Bootstrap How To

Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.

Why to Learn Bootstrap?

Mobile first approach − Bootstrap 3, framework consists of Mobile first styles throughout the entire library instead them of in separate files.

Easy to get started − With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.

Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles. More about the responsive design is in the chapter Bootstrap Responsive Design.

Bootstrap tutorial provides basic and advanced concepts of Bootstrap. Our Bootstrap tutorial is designed for beginners and professionals.

Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.

Our Bootstrap tutorial includes all topics of Bootstrap such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Prerequisite

Before learning Bootstrap, you must have the basic knowledge of HTML and CSS.

Audience

Our Bootstrap tutorial is designed to help beginners and professionals.

Problem

We assure that you will not find any problem in this Bootstrap tutorial. But if there is any mistake, please post the problem in contact form.

Example -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      
      
      
      
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

<script src = "https://code.jquery.com/jquery.js"></script>
      
      
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Applications of Bootstrap

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, pop-overs, 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.