mobileNavlogo
headerlogo

Bootstrap Tutorial

Ratings:
(4.3)
Views:1483
Banner-Img
  • Share this blog:

 

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

Introduction

  • 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 can also use JavaScript plug-ins.
  • It facilitates you to create responsive designs.

Bootstrap Components

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

Bootstrap Package

Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and background. This 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.

JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in detail in the section Bootstrap Plugins.

Customize − You can customize Bootstrap's components, fewer variables, and jQuery plugins to get your very own version.

Inclined to build a profession as Bootstrap Developer? Then here is the blog post on, explore 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:

<!DOCTYPE html>

We will set the metacharacter 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.

<meta charset=”utf-8”>

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.

index.html

We will now proceed to include the necessary style sheet which is bootstrap.css.

<link rel=”stylesheet” href=”css/bootstrap.css”  type=”text/css”/>

Now that we have our CSS ready, we will include all the required JavaScript files. Firstly, you need to include a jQuery file, for this, I will suggest including from the jQuery CDN, as below.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Then we will include the Bootstrap file.

  <script src=”js/bootstrap.js”></script>

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.

index.html

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.

Bootstrap Interview Questions

Example

<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use &lt;pre&gt; tag as:</p>

<pre>
   &lt;article&gt;
      &lt;h1&gt;Article Heading&lt;/h1&gt;
   &lt;/article&gt;
</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>

Bootstrap Container

The 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 containers of columns (known as grid system).

There are two container classes in Bootstrap:

  • Container
  • Container-fluid

The 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="http://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 a basic knowledge of HTML and CSS can use Bootstrap.

-It facilitates users to develop a responsive website.

-It is compatible with most browsers like Chrome, Firefox, Internet Explorer, Safari and Opera, etc.

You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses

1/15

About Author
Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.

Stay Updated

Get stories of change makers and innovators from the startup ecosystem in your inbox