What happens if the columns in a Bootstrap row add up to more than 12?

<div class="container text-center">
  <div class="row">
    <div class="col-8 border bg-light py-2">col-8</div>
    <div class="col-6 border bg-light py-2">col-6 (wraps to a new line)</div>
    <div class="col-4 border bg-light py-2">col-4</div>
  </div>
</div>

The first column takes 8, the second needs 6 (total 14), so it moves to the next line. The third (4) fits next to it. This is useful for some designs, but it is also a common mistake. See Grid System.

• Previous Interview Question
• Next Interview Question

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.