Clearfix

Bootstrap clearfix

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.

Edit in sandbox 
        
            

            <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.

Edit in sandbox 
        
            

            <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.



Edit in sandbox 
        
            

        <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.