htmltwitter-bootstrapoffset

Offset columns in Bootstrap

This is the idea of what I want to do: 

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-2"></div>
    </div>
</div>

How would it work using offset?

Solution

  • The offset works like a blank column that will stay before your column. For example, if you want a column that will have half of the size of the screen and will be exactly in the middle, you will have to do:

    <div class="col-sm-6 col-sm-offset-3"></div>

    A full row has 12 columns. This way you will have 6 columns (half of the row) and a offset of 3 columns. It will be exactly in the middle of the screen.

    Take a look on Bootstrap documentation.