Bootstrap Grid Examples

A classic layout: header, sidebar, main content, footer. Use nested rows and responsive columns.

Grid Examples — holy grail layout

A classic layout: header, sidebar, main content, footer. Use nested rows and responsive columns.

Real-life example: This layout is like a newspaper — banner headline on top, narrow column for ads, wide column for articles, footer for contact.

Header, sidebar, main, footer

<div class="container">
  <header class="row py-3 border-bottom mb-3">
    <div class="col"><h1 class="h4 mb-0">Rishtaara Blog</h1></div>
  </header>
  <div class="row">
    <aside class="col-md-3 mb-3">
      <nav class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">Bootstrap</a>
        <a href="#" class="list-group-item list-group-item-action">React</a>
      </nav>
    </aside>
    <main class="col-md-9">
      <article class="card mb-3">
        <div class="card-body">
          <h2 class="h5">Grid in practice</h2>
          <p class="card-text">Build real layouts with rows and breakpoints.</p>
        </div>
      </article>
    </main>
  </div>
  <footer class="row py-3 border-top mt-3">
    <div class="col text-center text-muted">&copy; 2026 Rishtaara</div>
  </footer>
</div>

Grid Examples — marketing row

Center a hero with offset columns. Use .offset-md-2 or justify-content-center for balanced whitespace.

Real-life example: Centering with offset is like framing a photo with equal margin on left and right — the picture sits in the middle.

Centered narrow column

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-8 text-center py-5">
      <h2 class="display-6">Start learning today</h2>
      <p class="lead text-muted">Free lessons with real-life examples.</p>
      <a class="btn btn-lg btn-primary" href="#">Browse courses</a>
    </div>
  </div>
</div>

Grid Examples — uneven columns

Not every layout adds to 12 — .col-md-8 + .col-md-4 is common. Use .order-* to reorder visually on mobile (e.g. image after text on phone).

Real-life example: Uneven columns are like a desk with a big monitor and a small notepad — most space for main work, little for notes.

Order utilities on mobile

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-6 order-md-2">
      <img src="feature.jpg" alt="Feature" class="img-fluid rounded" />
    </div>
    <div class="col-md-6 order-md-1">
      <h2>Feature title</h2>
      <p>Text first on desktop left; image can appear first on mobile with order classes.</p>
    </div>
  </div>
</div>