Boostrap Grid system for managing height width and layout of web page

Managing rows and columns of a web page.

Grid with 4 equal width sections

Horizontally there will be 4 equal sections ( or columns )

class='col-sm'
1/4 equal sections

In above code we have used border class to show columns. class='col-sm border'

<div class="container-fluid">
<div class='row'>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
</div>	
</div>

You can use the same class to show equal width of 2 or 3 columns.

Grid with 3 unequal width sections

Horizontally there will be three columns. Left column should have width of 1 , centre width should be 7 and right column should have width of 4 ( 1 + 7 + 4 = 12 ) .

Note that Bootstrap CSS permits maximum of 12 column layout.

col-1

class='col-7'
7/12 sections

class='col-4'
4/12 sections

<div class="container-fluid">
<div class='row'>
	<div class='col-1'>col-1</div>
	<div class='col-7'>class='col-7'<br>7/12  sections</div>
	<div class='col-4'>class='col-4'<br>4/12  sections</div>	
</div>	
</div>

Column width in percentage

We can assign one column with percentage value of 25%, 50%, 75% or 100% by using class w-25, w-50, w-75,w-100. Rest of the columns will adjust the width left. By using class='w-100' we can insert one new row.

class='w-50'
50% of full width

class='col'

<div class="container-fluid">
<div class='row'>
	<div class='w-50'>class='w-50'<br>50% of full width</div>
	<div class='col'>class='col'</div>
	<div class='col'>class='col'</div>	
</div>	
</div>

Vertical alignment

We will increase the height of left column. Then center and right columns we will try to allign in top, middle and bottom level. ( watch the alignment of center and right columns w.r.t left column.

align-items-start for top align
align-items-center for center align
align-items-end for bottom align

class='w-25'

25% of full width

class='col'

class='w-25'

25% of full width

class='col'

class='w-25'

25% of full width

class='col'

<div class="container-fluid">
<div class='row align-items-start'>
	<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
	<div class='col border'>class='col'</div>
	<div class='col border'>class='col'</div>	
</div>
<br>	
<div class='row align-items-center'>
	<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
	<div class='col border'>class='col'</div>
	<div class='col border'>class='col'</div>	
</div>	
<br>
<div class='row align-items-end'>
	<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
	<div class='col border'>class='col'</div>
	<div class='col border'>class='col'</div>	
</div>	
</div>

Adding offset

class='col offset-md-2'
with offset

class='col'

<div class='row align-items-start'>
<div class='col offset-md-2'>class='col offset-md-2'<br>with offset</div>
<div class='col'>class='col'</div>
<div class='col'>class='col'</div>	
</div>	
</div>

Two columns with offset

class='col

class='col offset-md-2'

with offset

<div class="container-fluid">
<div class='row align-items-start'>
 <div class='col >class='col </div>
 <div class='col offset-md-2'>class='col offset-md-2'<br><br>with offset</div>
</div>	
</div>

Using order

We can change the order of display of columns. First no order columns will be displayed and then numbers will be followed.

1^st column
order-8

2^nd column
order-2

3^rd column
No order

4^th column
order-1

<div class='container-fluid'>
<div class='row align-items-start'>
	<div class='col  order-8'> 1st column<br> order-8</div>
	<div class='col  order-2'> 2nd column<br> order-2</div>
	<div class='col' > 3rd column <br> No order</div>
	<div class='col order-1'> 4th column<br> order-1</div>
</div>	
</div>

Using .order-last and .order-first

1^st column
order-last

2^nd column
No order

4^th column
order-first

<div class='container-fluid'>
<div class='row align-items-start'>
	<div class='col border order-last'> 1st column<br> order-last</div>
	<div class='col border' > 2nd column <br> No order</div>
	<div class='col border order-first'> 4th column<br> order-first</div>
</div>	
</div>

Application of order

In a page we want to display advertisement at the top but want content to be loaded first. So we can keep content at top but order can be after the advertisement.

Bootstrap Boostrap Alert

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Bootstrap Grid

Grid with 4 equal width sections

Grid with 3 unequal width sections

Column width in percentage

Vertical alignment

Adding offset

Using order

Application of order

Subscribe

1

2

3

4