Bootstrap Responsive Summary

Responsive Summary

Bootstrap is mobile-first with six breakpoints. Use responsive grid columns, display utilities, flex utilities, offcanvas, container types, and responsive spacing to build layouts that adapt from 320px to 1920px.

Example

<!-- Responsive template skeleton -->
<div class="container">
  <nav class="d-flex align-items-center py-3">
    <span class="navbar-brand me-auto">Logo</span>
    <ul class="d-none d-md-flex list-unstyled mb-0 gap-3">...</ul>
    <button class="btn btn-primary d-md-none" data-bs-toggle="offcanvas" data-bs-target="#nav">Menu</button>
  </nav>
  <div class="row g-4">
    <main class="col-12 col-lg-8">...</main>
    <aside class="col-12 col-lg-4 d-none d-lg-block">...</aside>
  </div>
</div>

HTML

Full Editor

Pro Tip

Always start from mobile — add complexity as the screen grows, not the other way around.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned