How to clear floats properly in twitter bootstrap?

Question

I've just started learning twitter bootstrap and I was wondering what the correct method is to clear floats with it.

Normally I would just do something like this:

HTML:

<div class="container">     <div class="main"></div>     <div class="sidebar"></div>     <div class="clear"></div> </div> 

CSS:

.clear {     clear: both; }  .main {     float: left; }  .sidebar {     float: right; } 

Please ignore the infrastructure of the above as it's just an example.

Now say in bootstrap if I am trying to float some text next to a nav section what is the correct way of doing that?

Consider this example in bootstrap:

<div class="main_container">      <header id="main_header" class="col-md-12">          <nav class="navbar navbar-default" role="navigation">          </nav>          <div class="contact">          </div>              </header> </div> 

I am wanting to float the contact field next to the navbar field.

I have read about bootstrap's .clearfix class, do I just apply this as I have done above (after the floats)? ....or should I apply the class to something else?

Answer 1

You need to utilize the proper bootstrap classes. If inside a container (a true Bootstrap container), you need a row to offset the padding.

<div class="container"> <div class="row">          <header id="main_header" class="col-md-12">              <nav class="navbar navbar-default" role="navigation">              </nav>              <div class="contact pull-left">              </div>                  </header> </div> </div> 

Bootstrap has pull-left and pull-right already to float content. clearfix shouldn't be needed if you are utilizing a container/row.

Realistically you could also (or instead) use the grid utilities on the nav/contact.