Box-sizing

Bootstrap 3 started using box-sizing: border-box for all elements and pseudo-elements. With this enabled, the width and height properties start to include the padding and the border but not the margin.

With that, it is easier to set the right sizing for your elements. This is because any change that you make in the element, such as customizing the padding of a .row, will reflect the width and height of the whole element. The following figure shows you the differences of box-sizing.

Quick floats

Bootstrap offers quick classes to make an element float. Add the .pull-left or .pull-right class to make the elements float left or right, respectively. Keep in mind that both classes apply the !important modifier to avoid override issues:

<div class="pull-left"></div>
<div class="pull-right"></div>

Clearfix

Clearfix is a way of clearing the floating of an element related to its child element. The Bootstrap columns are all floated left, and the parent row has a clearfix. This makes every column appear right next to each other, and the row does not overlap with other rows. This figure exemplifies how clearfix works:

So, if you want to add the clearfix to a new element or pseudo-element, add the .clearfix class and you can get the hard work quickly done.

Font definitions for typography

In the following table, the font sizes for default text and heading are presented. It describes the heading, font family, and line height. It is important to make it explicit for you to deeply understand the Bootstrap default configuration if you want a different customization.