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:
- 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 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.
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
- 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.
- Download Bootstrap here. Download full minified version or you can download customized bootstrap as it gives you 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 file 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 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
<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) -->
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 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”>
But we will customize bootstrap later.
In the next lesson we shall learn to install bootstrap using different methods.
Bootstrap Tutorial 1: Quiz Questions
0 of 5 questions completed
Please enter your email to start FREE quiz.
You have already completed the quiz before. Hence you can not start it again.
Quiz is loading...
You must sign in or sign up to start the quiz.
You have to finish following quiz, to start this quiz:
0 of 5 questions answered correctly
Time has elapsed
You have reached 0 of 0 points, (0)
Question 1 of 5
What bootstrap is use for?Correct
Question 2 of 5
Why use bootstrap?Correct
Question 3 of 5
What is dist folder in bootstrap?Correct
Question 4 of 5
Is meta name=”viewport” is required for bootstrap?Correct
Question 5 of 5
Difference between bootstrap.css and bootstrap.min.cssCorrect
Share this Tutorial