Bootstrap-tutorial-3-hfarazm

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

In Bootstrap by Mubeen2 Comments

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

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 version or you can download customized bootstrap as it gives 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 files 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 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

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:

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


Bootstrap Tutorial 1: Quiz Questions

Please enter your email to start FREE quiz.


Next Tutorial

Share this Tutorial