What is Bootstrap?

Bootstrap is a front-end framework built with HTML, CSS, and JavaScript that speeds up responsive web design. Instead of writing all CSS rules and media queries from scratch, Bootstrap provides ready-made components. Its grid system divides the page into 12 equal columns and rows, making it easy to build layouts that adapt to phones, tablets, and desktops.

Note: you can create responsive sites using plain CSS and flexible units, but Bootstrap simplifies the process and is widely used in web projects.

Bootstrap Grid: Device Widths & Classes

Bootstrap groups device widths into four categories:

  • Extra small (phones): 0 - 767px → class prefix .col-xs-1-12
  • Small devices (tablets): 768 - 991px → class prefix .col-sm-1-12
  • Medium devices (desktops): 992 - 1200px → class prefix .col-md-1-12
  • Large devices (large desktops): 1200px and above → class prefix .col-lg-1-12

Each column class takes a number from 1 to 12. For example, .col-md-4 occupies 4 of the 12 available columns at that breakpoint and above.

Core Rules of the Grid

Imagine the page width divided into 12 vertical columns - that’s the grid. A row is a horizontal container that holds columns. Three equal columns in a row would use 4 + 4 + 4 = 12 to fill the row.

  • On medium and larger screens, the columns sit side-by-side.
  • On smaller screens, columns stack vertically for a mobile-friendly layout.

Including Bootstrap (CDN or Local)

CDN (quickest - requires internet):

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery (required by Bootstrap JS) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Local (offline / self-hosted):

  1. Download Boostrap 3 and extract the files.
  2. Place bootstrap.min.css in /assets/css/.
  3. Place bootstrap.min.js and jQuery in /assets/js/.
  4. Link them in your page.

How to Use the Grid

  1. Wrap your layout inside a container or container-fluid.
  2. Add a <div class="row"> inside the container.
  3. Insert column(s) using classes like col-md-4, ensuring they sum to 12 per row.

Why Columns Wrap

A row cannot display more than 12 column units horizontally. Extra columns wrap to the next line automatically.

Live Demo on CodePen

View a responsive three-column layout on CodePen:

See the Pen Responsive Layout (Bootstrap 3) by Ezike Ebuka (@jswithzikebuz) on CodePen.


What the Demo Shows

  • The container centers your content.
  • The .row groups columns horizontally.
  • Three .col-md-4 columns fill the row completely (4 + 4 + 4 = 12).
  • On smaller screens, columns stack for mobile-friendly viewing.

Extra Tips & Common Pitfalls

  • Always nest .col-* inside a .row.
  • Use appropriate breakpoint prefixes (.col-sm-6 etc.) for your desired layout.
  • Columns exceeding 12 units wrap to the next line.
  • Use <img class="img-responsive"> for responsive images.

Conclusion

Using flexible measurements and Bootstrap’s grid gives you a modern, mobile-first layout. You can now extend this pattern for nested columns, offsets, and varying column widths per breakpoint.

Read also

Question for readers: Do you prefer building layouts from scratch or using frameworks like Bootstrap? Share your thoughts below.