Home » Exercises » Bootstrap Exercises » Bootstrap Layout

Bootstrap Layout

Create a responsive three column layout with Bootstrap

Description: Create three columns. On small screens they must be stacked (full width), and from the medium breakpoint they must be side by side.

Hint:

  • Use container, row and col-12 col-md-4.

Solution

<div class="container text-center">
  <div class="row g-2">
    <div class="col-12 col-md-4"><div class="p-3 border bg-light">Column 1</div></div>
    <div class="col-12 col-md-4"><div class="p-3 border bg-light">Column 2</div></div>
    <div class="col-12 col-md-4"><div class="p-3 border bg-light">Column 3</div></div>
  </div>
</div>
Live preview

How it works

  • col-12 gives the full width on small screens, and col-md-4 gives 4 of 12 columns from 768px.
  • g-2 adds a small gutter between the columns.

Read Grid System.

Create a centered page heading and text with Bootstrap

Description: Make a centered heading “Welcome” with a lead paragraph under it, inside a container, with some space above and below.

Hint:

  • Use container, text-center, display-*, lead and my-5.

Solution

<div class="container text-center my-5">
  <h1 class="display-4">Welcome</h1>
  <p class="lead">This is a short introduction text under the heading.</p>
</div>
Live preview

How it works

  • my-5 adds margin on top and bottom. text-center centers the text.

Read Typography and Spacing.

Create a responsive grid of six cards

Description: Show six cards: 1 per row on small screens, 2 per row from sm and 3 per row from lg.

Hint:

  • Use row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 and card h-100.

Solution

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 1</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 2</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 3</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 4</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 5</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 6</h5><p class="card-text">Text</p></div></div></div>
  </div>
</div>
Live preview

How it works

  • row-cols-* sets the number of columns per row, so each column needs only the class col.
  • h-100 makes the cards in a row the same height.

Read Grid: Gutters, Offset and Order and Cards.

Create a pricing section with three cards

Description: Build three pricing cards in one row (stacked on phones). Each has a title, a price, a list of features and a button. The middle card must be highlighted.

Hint:

  • Use row row-cols-1 row-cols-md-3, card, list-unstyled and border-primary.

Solution

<div class="container">
  <div class="row row-cols-1 row-cols-md-3 g-3 text-center">
    <div class="col">
      <div class="card h-100">
        <div class="card-header"><h3 class="h5 my-1">Free</h3></div>
        <div class="card-body">
          <p class="card-title display-6">$0<small class="fs-6 text-body-secondary"> / month</small></p>
          <ul class="list-unstyled mt-3 mb-4"><li>1 project</li><li>Basic support</li></ul>
          <button type="button" class="btn btn-outline-primary w-100">Sign up</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 border-primary">
        <div class="card-header text-bg-primary"><h3 class="h5 my-1">Pro</h3></div>
        <div class="card-body">
          <p class="card-title display-6">$15<small class="fs-6 text-body-secondary"> / month</small></p>
          <ul class="list-unstyled mt-3 mb-4"><li>10 projects</li><li>Email support</li></ul>
          <button type="button" class="btn btn-primary w-100">Get started</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <div class="card-header"><h3 class="h5 my-1">Business</h3></div>
        <div class="card-body">
          <p class="card-title display-6">$49<small class="fs-6 text-body-secondary"> / month</small></p>
          <ul class="list-unstyled mt-3 mb-4"><li>Unlimited projects</li><li>Phone support</li></ul>
          <button type="button" class="btn btn-outline-primary w-100">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>
Live preview

How it works

  • row-cols-md-3 makes three equal columns from the md breakpoint, and h-100 makes the cards the same height.
  • The Pro card is highlighted with border-primary and a colored header.

Read Cards and Grid: Gutters, Offset and Order.

Create a hero section with a heading and two buttons

Description: Make a hero section with a light background, a big heading, a lead text and two buttons. The buttons must be stacked on phones and side by side from the small breakpoint.

Hint:

  • Use py-5, display-5, lead and d-grid gap-2 d-sm-flex justify-content-sm-center.

Solution

<div class="bg-body-tertiary py-5 text-center rounded">
  <h1 class="display-5 fw-bold">Learn Bootstrap</h1>
  <p class="lead col-lg-8 mx-auto">Build responsive websites faster with ready components and utilities.</p>
  <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
    <button type="button" class="btn btn-primary btn-lg px-4">Get started</button>
    <button type="button" class="btn btn-outline-secondary btn-lg px-4">Learn more</button>
  </div>
</div>
Live preview

How it works

  • d-grid gap-2 stacks the buttons full width on phones. d-sm-flex changes to a flex row from 576px, and justify-content-sm-center centers them.

Read Utilities and Flex Utilities.