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:

Note: *All tutorial files are available for FREE at the end of each tutorial*



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.

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.

: 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.

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.

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.

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.

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.

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.

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.

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)

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

Note: Online Editor is also available in each tutorial.

Installing bootstrap

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

Download Project Files

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

Share this Tutorial

About the Author hfarazm

[WpProQuiz 2]