• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Bootstrap Tutorials

Bootstrap Tutorials

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.

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 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 details in the section Bootstrap Plugins.

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:

<!DOCTYPE html>

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.

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

Capture.1256

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.

Capture.1257

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!

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

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:

-Container

-Container-fluid

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

Related Trainings

Contact US

Need an Instructor Led Training, Contact Us





Enter this code: captcha