This unit will teach you how to offset the area before and grid column with the standards grid system using the standard classes. For example you need to place a single column leaving the two single columns space. You can do very easily using the in build classes not need to write a huge code. Simple add the offset classes with the col classes and it will start working. the class used for the offset is .col-md-offset-* use 0-11 value replacing (*) you can use the value according to space you need before a div. For more understanding we need a single column after the space of 11 columns in a row so we user the class .col-md-1 and .col-md-offset-11 it will look like class="col-md-1 col-md-offset-11" this will show the column in the 12th grid position in the row. You can see this example in the screenshot bottom of the grid it is a last one row.
<body>
- White background in above screenshot is the body color.
- Green color is container div nested in the body tag.
- Green color is container div nested in the body tag.
- Blue are the rows div nested in the container div.
- Red are the different div columns nested in the rows with white text (text are the class used ). Every row have the different column class to understand the system.
After understanding this your can develop the web layouts with multiple sidebars and multiple module positions within you web page. mostly we see there a left sidebars, right sidebars, footer multiple columns, after header or in a header multiple columns in the layouts. If we use this grid system these all sidebars and modules positions will you develop, they will auto response on all screens.
After understanding this your can develop the web layouts with multiple sidebars and multiple module positions within you web page. mostly we see there a left sidebars, right sidebars, footer multiple columns, after header or in a header multiple columns in the layouts. If we use this grid system these all sidebars and modules positions will you develop, they will auto response on all screens.
<div class="container">
<div class="row">
<div class="col-md-1 col-md-offset-0">.col-md-1<br>.col-md-offset-0</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-1">.col-md-1<br>.col-md-offset-1</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2">.col-md-1<br>.col-md-offset-2</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-3">.col-md-1<br>.col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-4">.col-md-1<br>.col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-5">.col-md-1<br>.col-md-offset-5</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-6">.col-md-1<br>.col-md-offset-6</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-7">.col-md-1<br>.col-md-offset-7</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-8">.col-md-1<br>.col-md-offset-8</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-9">.col-md-1<br>.col-md-offset-9</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-10">.col-md-1<br>.col-md-offset-10</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-11">.col-md-1<br>.col-md-offset-11</div>
</div>
</div>
<body>