Helper classes

Bootstrap also includes a few helper classes that we can use to adapt our layout. Let's take a look at some examples.

Floats

Floating classes of Bootstrap will help you to create a decent layout on the web. Here are two Bootstrap classes to pull your elements left and right:

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

When we are using floats on elements, we need to wrap our floated elements in a clearfix class. This will clear the elements and you will be able to see the actual height of the container element:

<div class="helper-classes"> 
    <div class="pull-left">...</div> 
    <div class="pull-right">...</div> 
    <div class="clearfix"> 
</div>

If the float classes are directly within an element with the row class, then our floats are cleared automatically by Bootstrap and the clearfix class does not need to be applied manually.

Center elements

To make it center block-level elements, Bootstrap allows this with the center-block class:

<div class="center-block">...</div>

This will set your element property margin-left and margin-right properties to auto, which will center the element.

Show and hide

You may wish to show and hide elements with CSS, and Bootstrap gives you a couple of classes to do this:

<div class="show">...</div> 
<div class="hidden">...</div>

Note

The show class sets the display property to block, so only apply this to block-level elements and not to elements you wish to be displayed inline or inline-block.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset