Welcome to the Bootstrap Tutorials, The intent of these tutorials to teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial we will discuss Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins.
Apart from the tutorials, we will also cover Interview Questions, Issues and How To’s of Bootstrap.
Bootstrap is a free and open-source framework for creating websites and web applications. It’s the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
It is absolutely free to download and use.
It is a front-end framework used for easier and faster web development.
It facilitates you to create responsive designs.
Bootstrap includes components such as buttons, navbars, dropdown menus, alert boxes, and more. In most cases, you can make use of a component simply by using the appropriate class name.
We’ll be looking at these components throughout this tutorial. We’ve got plenty of interactive examples that enable you to see exactly how these components work.
Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and background. This is is covered in detail in the section Bootstrap Basic Structure
CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.
Customize − You can customize Bootstrap’s components, LESS variables, and jQuery plugins to get your very own version.
Interested in mastering Bootstrap Training? Enroll now for FREE demo on Online Bootstrap Training.
Useful Links on Bootstrap
-Twitter Bootstrap − Official Website of Twitter Bootstrap. Find all the documentation and downloads available at this site.
-Bootstrap Wiki − Wikipedia Reference for Bootstrap
HTML Template for Bootstrap to work
Activate the Bootstrap framework, you need to include all the appropriate files and follow a proper HTML structure. Here, we will build the structure first and then see which files are required. The first thing that you should note is that it requires an HTML5 doctype declaration at the top:
We will set the meta character to utf-8 because we will be using special characters in our project and we want the browser to parse them correctly. Twitter Bootstrap also specifies the use of utf-8 in their documentations for better compatibility.
Then we will set normal html tags like <html>, <head> and <body> which are basic tags of html. Your index.html page should look as below.
We will now proceed to include the necessary style sheet which is bootstrap.css.
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> Then we will include the Bootstrap file.
All these scripts should lie just above the end body tag
</body>, in consideration of the performance of your web page.
Finally, we are done with the process of including all the necessary files. You are now set to start building the various components of your website. Your index.html should look like this.
Bootstrap – Code
-The first is the <code> tag. If you are going to be displaying code inline, you should use the <code> tag.
-Second is the <pre> tag. If the code needs to be displayed as a standalone block element or if it has multiple lines, then you should use the <pre> tag.
Check out the top Bootstrap Interview Questions now!
<p><code><header></code> is wrapped as an inline element.</p> <p>To display code as a standalone block element use <pre> tag as:</p> <pre> <article> <h1>Article Heading</h1> </article> </pre>
<header> is wrapped as an inline element.
To display code as a standalone block element use <pre> tag as:
<article> <h1>Article Heading</h1> </article>
Container is used to set the content’s margins dealing with the responsive behaviors of your layout. It contains the row elements and the row elements are the container of columns (known as grid system).
There are two container classes in Bootstrap:
layout of a container:
<html> <body> <div class="container"> <div class="row"> <div class="col-md-xx"></div> ... </div> <div class="row"> <div class="col-md-xx"></div> ... </div> </div> </body> </html>
Bootstrap container example
<!DOCTYPE html> <html lang="en"> <head> <title>Job</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> </head> <body> <div class="container"> <h1>Container</h1> <p>container content</p> </div> <div class="container-fluid"> <h1>Container-fluid</h1> <p>container-fluid content</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
Advantage of Bootstrap
-It is very easy to use. Anybody having basic knowledge of HTML and CSS can use Bootstrap.
-It facilitates users to develop a responsive website.
-It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera etc.