Tutorial 1: Getting started with bootstrap 3 (Part 1)

Bootstrap

bootstrap, CSS, Tutorial

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar is an expert Web Developer, SEO specialist, and Graphic Designer. Hafiz Faraz is an expert in WordPress design and development. Hire on Upwork | Hire on Fiverr

Welcome to up and running with Bootstrap 3 learning series with Hfarazm Software. This is a complete Bootstrap tutorial SERIES in which we will build a complete Bootstrap site from top to bottom, divided in different Bootstrap tutorials.

Lets get started with our first tutorial of Bootstrap 3, in which we will learn:

What is Bootstrap 3?
Why use Bootstrap?
Prerequisites of Bootstrap
How to install bootstrap?
Bootstrap Helping Material

Note: *All tutorial files are available for FREE at the end of each tutorial*
[vc_row_inner padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=”margin-bottom: 0px;”][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_widget_sidebar sidebar_id=”ups-sidebar-bootstrap3″][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][/vc_column_inner][/vc_row_inner]

Table of Contents

What is bootstrap?

Bootstrap is a web design framework that assists in designing websites with little knowledge of CSS, efficiently. To design a website in Bootstrap, you only have to know the class names and structure of Bootstrap. Best part is there is no need to write CSS.

Why use bootstrap?

Framework: Bootstrap organizes code, follows certain structure and provide many predefined components like modals, tabs, navigation bars etc.
Popular: Bootstrap is currently the most popular project on GitHub.
Minimal effort: It is a great way to design website without knowing tons of HTML and CSS.
Mobile first: It lets you create 100% mobile friendly website.
Responsive: Bootstrap works on all devices. Its 12 column layout for website design fits for all media types.
Tested: Bootstrap is battle-tested, i.e. there will be no uncertainty in website design.
Modern: Apart from HTML and CSS, it can also be used with LESS and SASS to enhance customization.
Combination: Bootstrap can be combined with PHP, ASP, JSP, AngularJS and more.
Inspiration: BuiltWithBootstrap.com is Bootstrap portfolio site. Designers have showcased there bootstrap work there.
Efficient: It is best helpful when you don’t want to consume much efforts on design and need to focus on website functionality

Prerequisites

Here are the basic prerequisites for learning Bootstrap:

HTML – 60% knowledge
CSS – 40% knowledge
JavaScript – (optional)

Code editors

You need a text-editor. Choose one of the following or you may want to use:

Sublime Text (I will be using sublime text editor)
Notepad++

Note: Online Editor is also available in each tutorial.

Installing bootstrap

Bootstrap-tutorial-folder-hierarchy-hfarazm — Fig 1.1

Download Bootstrap here. Download full version or you can download customized bootstrap as it gives more control on colors and fonts etc.
About dist Folder: After downloading the Bootstrap file, extract it and open the folder. Goto “*- dist” (distribution) folder (highlighted in Fig 1.1). dist folder is the heart of Bootstrap and it is all you need to work with Bootstrap. If you open “dist” folder it contains three main folders i.e css, fonts, js and some files inside them. (see Fig 1.1)
Create index file: Now create an index.html file in your “dist” folder(highlighted in Fig 1.1)
Link CSS: Open the newly created index.html file from “dist” folder and link it to CSS file. You can do this by pasting following code in your index.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Tutorial 1: Bootstrap 3</title>
      
      <!-- Linking Bootstrap.min.css (Minified Bootstrap Core CSS file) -->
      <link rel="stylesheet"  href="css/bootstrap.min.css">
   </head>
   <body></body>
</html>

Code Explanation

Explaining code line by line below:

4: declares a meta tag encoding for browser.
5: meta tag declares ‘viewport’ and ‘content’ means that the browser will specify/render the width of the page according to the width of screen.
6: title tag shows the title of webpage.
9: defines link of bootstrap.min.css to index.html file. (min.css is a minified css file – minified means that spaces, indents, long variable names are truncated to make it smaller in size)

Note: You don’t need to link both bootstrap.css and bootstrap.min.css file with html document because both are same files.

Customizing Bootstrap

Customizing Bootstrap is fairly easy, you just need to include a custom css file after bootstrap css file, like this:

<link href=”css/style.css” rel=”stylesheet”>

We will customize Bootstrap in upcoming tutorials.

Video

[x_button shape=”square” size=”regular” float=”none” href=”https://github.com/hfarazm/Bootstrap-3-Tutorials-Hfarazm.com” title=”Download Project Files” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Download Project Files[/x_button]

This tutorial is to be continued in the next tutorial to look for other methods to install Bootstrap

[WpProQuiz 2]

[x_button shape=”square” size=”regular” float=”right” href=”http://blog.hfarazm.com/basic-bootstrap-template/” title=”Tutorial 2: Basic Bootstrap Tutorial” info=”tooltip” info_place=”bottom” info_trigger=”hover” info_content=”Tutorial 2: Basic Bootstrap Tutorial”]Next Tutorial[/x_button]
[x_share title=”Share this Tutorial” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” email=”true”]