Bootstrap Grid

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
class='col-sm'
1/4 equal sections
class='col-sm'
1/4 equal sections
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'
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='col'

class='w-25'

25% of full width
class='col'
class='col'

class='w-25'

25% of full width
class='col'
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'
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.
1st column
order-8
2nd column
order-2
3rd column
No order
4th 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
1st column
order-last
2nd column
No order
4th 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.


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
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer