a blog for those who code

Wednesday 24 June 2015

Control Content Placement in Bootstrap

In this post we are going to discuss about controlling content placement in Bootstrap. In our previous posts we had discussed about Bootstrap Grid System and BootStrap Classes, where we learnt that the ability to re-size content based on screen size is an extremely powerful feature of Bootstrap. But we should know that along with having the ability to re-size content, we should also have the ability to manage content placement.

Now you may ask us that what exactly is Content Placement. Content Placement actually means to show end user what is more relevant. Lets say you have an eCommerce site which handles both large screen devices as well as small screen devices. Now when it is large screen devices you can show the "Buy Now" button clearly on the right hind side of the screen, when it comes to small devices its always better to show that on top (as it is important for your business). For doing this Bootstrap will come into picture as it offers you complete control over the size and placement, of content, across the devices.

Before going deep into the Content Placement, one thing to note that you should always think mobile-first when designing your web-page. That means you should first lay out your designs to mobile devices and then rearrange for the larger devices.

We have three commands in Bootstrap which will help us to place the content over the web-page. They are offset, push and pull.

Offset - This actually means offsetting the columns. It will move columns to the right using .col-md-offset-* classes. These classes will increase the left margin of a column by * columns. That means if I say offset 2, then its going to leave 2 columns blank and then start putting your content.

Push - It will move an item to the right and allow the item to be specified earlier than flow. That means it is going to take an item and move that over to the right.

Pull - It will move an item to the left and allow the item to be specified later that flow. That means it is going to pull an item from the left side and put it into the right hand side.

The difference between offset and push is that with offset the columns are going to be left blank whereas in push you can pull the content over to the vacated area.

Offset, Push and Pull Example :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <div class="row jumbotron">
<div class="col-md-12">With Offset using col-md-offset-2 </div></div>
    <div class="row">
<div class="col-md-4 col-md-offset-2">In this post we are discussing about controlling content placement in Bootstrap</div>
<div class="col-md-4">In this post we are discussing about controlling content placement in Bootstrap</div>
    </div>
    <div class="row jumbotron">
<div class="col-md-12">Without Offset</div></div>
    <div class="row">
<div class="col-md-4">In this post we are discussing about controlling content placement in Bootstrap</div>
<div class="col-md-4">In this post we are discussing about controlling content placement in Bootstrap</div>
    </div>
    <div class="row">
<div class="col-md-6 col-md-push-6"><h3>Important</h3>In this post we are discussing about controlling content placement in Bootstrap</div>
<div class="col-md-6 col-md-pull-6"><h3>Bla Bla Bla...</h3>In this post we are discussing about controlling content placement in Bootstrap</div>
    </div>
</div>
</body>

Result :

As you can see in the above diagram in small devices the important content will go up and in big devices the content will come to the right hand side which we have done with the help of col-md-push-6 and col-md-pull-6. Similarly when you have set the offset, you will get those many blank columns.

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment