Clearfix

When columns have different heights, they can wrap incorrectly. The clearfix class fixes this problem.

The Problem

If columns have uneven content, the grid can break:

<div class="row">
    <div class="col-sm-6">Short content</div>
    <div class="col-sm-6">Much longer content that takes up more vertical space and causes issues</div>
    <div class="col-sm-6">This column doesn't clear properly!</div>
    <div class="col-sm-6">Neither does this one.</div>
</div>

The Solution: Clearfix

<div class="row">
    <div class="col-sm-6">Short content</div>
    <div class="col-sm-6">Much longer content...</div>

    <!-- Add clearfix after every 2 columns on small screens -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-sm-6">Now this clears properly!</div>
    <div class="col-sm-6">So does this.</div>
</div>

Responsive Clearfix

<!-- Clear after every 2 columns on small, every 3 on medium -->
<div class="row">
    <div class="col-sm-6 col-md-4">1</div>
    <div class="col-sm-6 col-md-4">2</div>

    <div class="clearfix visible-sm-block"></div>

    <div class="col-sm-6 col-md-4">3</div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-sm-6 col-md-4">4</div>
</div>

When to Use Clearfix

• When columns have variable height content
• When you see columns not aligning in the next row
• When using multiple breakpoints with different column counts