Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap grid column offset

Suggested Video Tutorials
Part 2 - Setting up bootstrap
Part 3 - Bootstrap grid system
Part 4 - Bootstrap 3 grid classes



In this video we will discuss the concept of 
1. Offsetting the Grid Columns
2. Bootstrap classes to style an <img> element



When creating website layouts using the grid system, you may want to move grid columns to the right for alignment purpose. Let us understand this with an example.

Let us say we want to create a layout as shown below.
Bootstrap grid column offset

This can be very easily achieved with the following HTML

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 2</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 2</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 3</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 4</div>
        </div>
    </div>
</div>

Now, let us say we want the 2 columns in the first row to be centered. To center the columns, we need to push the first column to the right by 3 columns.

bootstrap offset column example

This is exactly the purpose of bootstrap offset classes. Just like how we have different grid classes for different screen sizes, we have the corresponding offset classes as well.

bootstrap grid layout offset

The following HTML will center the 2 columns in the first row. This is achieved by using col-md-offset-3 which is going to push the first column in the first row by 3 columns.

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 2</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 2</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 3</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 4</div>
        </div>
    </div>
</div>

Now, we want 6 columns gap between the first and second columns in the first row. In other words the layout should be as shown below. 

bootstrap grid offset examples

So we want the second column in the first row to be pushed 6 columns to the right. This can be very easily achieved by using col-md-offset-6 class on the second column in the first row.

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-3 col-md-offset-6">
            <div class="customDiv">Column 2</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 2</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 3</div>
        </div>
        <div class="col-md-3">
            <div class="customDiv">Column 4</div>
        </div>
    </div>
</div>

Let us now look at a simple example of where this grid column offset feature could be useful. Let us say we want to display 3 equal columns in the second row and only one image in the first row and the image should be centered.

twitter bootstrap 3 column offset

This can be very easily achieved with the following HTML.

<div class="container">
    <div class="row">
        <img src="Images/Tulips.jpg" class="col-md-4 col-md-offset-4" />
    </div>
    <br />
    <div class="row">
        <div class="col-md-4">
            <div class="customDiv">Column 1</div>
        </div>
        <div class="col-md-4">
            <div class="customDiv">Column 2</div>
        </div>
        <div class="col-md-4">
            <div class="customDiv">Column 3</div>
        </div>
    </div>
</div>

If you view the page in the browser at this point, you will see 2 problems
1. The width of the image is slightly larger than the columns in the second row.
2. As you resize the browser, and when the screen size is of a small device or extra small device, the image is not responsive.

Let us see how to solve these problems one by one.

1. To make the width of the image same as the width of the columns in the second row, remove margin style from CustomStyles.css and include margin-bottom style. With this change .customDiv class will be as shown below
.customDiv{
    margin-bottom:3px;
    min-height:300px;
    background-color:silver;
    text-align:center;
    font-size:large;
}

2. To make the image responsive, add img-responsive class on the img element
<img src="Images/Tulips.jpg" class="col-md-4 col-md-offset-4 img-responsive" />

The following bootstrap classes are useful to style an img element
.img-circle
.img-thumbnail
.img-rounded

Please note : For some reason img-rounded class is not working as expected when used along with any of the grid or offset classes. Without these classes we get the rounded corners as expected. If you know the fix for this issue, please leave it as a comment so it could help us.

bootstrap tutorial for beginners

1 comment:

  1. div class="row"
    ____div class="col-md-4 col-md-offset-4"
    ________img src="../Images/bg_dark_water.jpg" class="img-responsive img-rounded" /
    ____/div
    /div

    It should work when you place it inside DIV, great work, thanks for teaching me .NET programming.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.