Clearfix

Bootstrap clearfix

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

You can create quickly and easily clear floated content by adding a clearfix utility class ( .clearfix) to the parent element. It can also be used as a mixin.

Show code Edit in sandbox

HTML
CSS

        
            

            <div class="clearfix">...</div>

        
            

              // Mixin itself
              @mixin clearfix() {
                &::after {
                  display: block; content: "";
                  clear: both;
                }
              }
              // Usage as a mixin
              .element {
                 @include clearfix;
                }

The following example shows how the clearfix class can be used. Without the clearfix class the wrapping div would not span around the buttons which would cause a broken layout.

Show code Edit in sandbox

HTML

        
            

            <div class="bg-info clearfix">
              <button class="btn btn-secondary float-left">Example Button floated left</button>
              <button class="btn btn-secondary float-right">Example Button floated right</button>
            </div>

Basic example

In this simple example you can see, that every element will float to side you want after you add .clearfix class to parent element.

Active
Link 1

Link 2
Link 3

Show code Edit in sandbox

HTML

        
            

        <div class="clearfix mb-3">
          <button class="btn btn-primary float-left">Example Button floated left</button>
          <button class="btn btn-primary float-right">Example Button floated right</button>
        </div>
        <div class="clearfix mb-3">
          <ul class="nav md-pills nav-justified pills-primary float-left">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#panel56" role="tab">Active</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#panel55" role="tab">Link 1</a>
            </li>
          </ul>
    
          <ul class="nav md-pills nav-justified pills-pink float-right">
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#panel54" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#panel53" role="tab">Link 3</a>
            </li>
          </ul>
        </div>
    
        <div class="clearfix">
          <i class="fas fa-code float-left fa-3x"></i></br>  
          <i class="fas fa-code float-right fa-3x"></i></br>  
        </div>

You can see, that you can position every component and element in that simple way.

Introduction
Basic example