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>

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.

• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.