bootstrap col class code example

Example 1: row class in bootstrap

/*
In Bootstrap, the "row" class is used mainly to hold columns in it.
Bootstrap divides each row into a grid of 12 virtual columns. 
In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. 
The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
*/

Example 2: .col-12 bootstrap

.col-12{
	flex: 0 0 100%;
	max-width: 100%;
}

Example 3: bootstrap grid



This code will create 4 boxes placed side by side, which will be 
dynamically positioned, according to the size of the screen. We define 
the following behavior: 




class = "col-lg-3"   




class = "col-md-4"   




class = "col-sm-6"  




  
One of four columns
One of four columns
One of four columns
One of four columns

Example 4: .row bootstrap

.row{
    display: flex;
    flex-wrap: wrap;
	margin-right: -15px;
    margin-left: -15px;
}

Tags:

Misc Example