In this tutorial bootstrap class col in Grid System
will be described. Hope you will enjoy this tutorial.
Grid Classes
| No. | Class Names | Description |
| 1. | .col |
The class col is used for extra small devices
such as width of screen less than 576px. |
| 2. | .col-sm |
The class col-sm is used for small devices such
as width of screen greater than 576px. |
| 3. | .col-md |
The class col-md is used for medium devices such
as width of screen nearly equal to or greater than 768px. |
| 4. | .col-lg |
The class col-lg is used for large devices such as
width of screen greater than 992px. |
| 5. | .col-xl |
The class col-xl is used for xlarge devices such as
width of screen greater than 1200px. |
Example of XSmall columns
In this example class col-3 is used for XSmall columns
while 3 show 25% width. As this is already described that, there are
12 columns in a row.
<divclass="container"><divclass="row"><divclass="col-3 bg-info"><p>Dummy text 1...</p></div><divclass="col-3 bg-success"><p>Dummy text 2...</p></div><divclass="col-3 bg-warning"><p>Dummy text 3...</p></div><divclass="col-3 bg-primary"><p>Dummy text 4...</p></div></div></div>
Output of above code
Dummy text 1...
Dummy text 2...
Dummy text 3...
Dummy text 4...
Example of Fluid container
In this example example class container-fluid is used
for full width box. While other all classes like col-3 is
used for extra small devices.
<divclass="container-fluid"><divclass="row"><divclass="col-3 bg-info"><p>Dummy text 1...</p></div><divclass="col-3 bg-success"><p>Dummy text 2...</p></div><divclass="col-3 bg-warning"><p>Dummy text 3...</p></div><divclass="col-3 bg-primary"><p>Dummy text 4...</p></div></div></div>
Output of above code
Dummy text 1...
Dummy text 2...
Dummy text 3...
Dummy text 4...
Example of Auto Layout Columns
In this example not are division of column's width is fixed. The width of the columns will be auto change.
<divclass="container-fluid"><divclass="row"><divclass="col bg-info"><p>Dummy text 1...</p></div><divclass="col bg-success"><p>Dummy text 2...</p></div><divclass="col bg-warning"><p>Dummy text 3...</p></div><divclass="col bg-primary"><p>Dummy text 4...</p></div></div></div>
Output of above code
Dummy text 1...
Dummy text 2...
Dummy text 3...
Dummy text 4...
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
