How to clear floats properly in twitter bootstrap? - css

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.