Bootstrap-tutorial-3-hfarazm

Tutorial 1: Getting started with bootstrap 3

In Bootstrap by Sarmad Javaid2 Comments

Welcome to up and running with bootstrap 3 learning series with Hfarazm Software. This is complete bootstrap tutorial SERIES in which we’re going to build complete Bootstrap site from top to bottom divided in different bootstrap tutorials. This is first tutorial of Bootstrap 3, in which we will learn:

Note: All tutorial files are available for FREE at the end of each Bootstrap tutorial. So, let’s get started.

What is bootstrap?

Bootstrap is web design framework that assists in designing website very quickly with little knowledge of CSS. To design website, you need to know only bootstrap class names and structure. No need to write CSS.

Why use bootstrap?

  • Framework: It organizes code, follows certain structure and provide many pre-defined components  like modals, tabs, navigation bars etc.
  • Popular: Bootstrap is currently the most popular project on GitHub.
  • Minimal effort: Bootstrap is a great way to design website without knowing tons of HTML and CSS.
  • Mobile first: Lets you create 100% mobile friendly website.
  • Responsive: Works on all devices. It comes with 12 column layout for website design that fits for all media types.
  • Tested: Bootstrap is battle tested means 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.

Prerequisites

Bootstrap is best helpful when you don’t want to consume much efforts on design and need to focus on website functionality. Here is 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 can use any other editor you like:

Note: Online Editor is also available in each tutorial.

Installing bootstrap

Bootstrap-tutorial-folder-hierarchy-hfarazm

Fig 1.1

  1. Download Bootstrap here. Download full minified version or you can download customized bootstrap as it gives you more control on colors and fonts etc.
  2. 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 file inside them. (see Fig 1.1)
  3. Create index file: Now create an index.html file in your “dist” folder(highlighted in Fig 1.1)
  4. Link CSS: Open 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

Code Explanation

Explaining code line by line below:

4: declares 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 width of screen.
6: title tag show 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:

But we will customize bootstrap later.

Video

Download Project Files

In the next lesson we shall learn to install bootstrap using different methods.


Bootstrap Tutorial 1: Quiz Questions

Please enter your email to start FREE quiz.


Next Tutorial

Share this Tutorial