Bootstrap Docs
Getting Started

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

  • Bootstrap is a free front-end framework for faster and easier web development.
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • Bootstrap also gives you the ability to easily create responsive designs.

What is responsive web design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.

Bootstrap History

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub!

Why Use Bootstrap

Advantages of Bootstrap:

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)
Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:

  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div>

First, create a row with:

<div class="row"></div>Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Bootstrap Buttons

Bootstrap provides different styles of buttons:

To achieve the button styles above, Bootstrap has the following classes:

  • .btn
  • .btn .btn-primary
  • .btn .btn-default
  • .btn .btn-success
  • .btn .btn-info
  • .btn .btn-warning
  • .btn .btn-danger
  • .btn .btn-link

The following example shows the code for the different button styles:

<button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>
Button Sizes

Bootstrap provides three main button sizes:

The classes that define the different sizes are:

  • .btn-lg
  • .btn
  • .btn-sm

The following example shows the code for different button sizes:

<button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Normal</button> <button type="button" class="btn btn-primary btn-sm">Small</button>
Active and Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state:

The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:

<button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Learn More
Reference

All the content on this page can be found at W3schools and I claim no rights of ownership over this content. This site was developed just for educational purposes.