Basically the grid system is used to make responsive and powerful layout of the web-pages. It should be with code and difficulties. There are dozens of bootstrap classes used to make responsive layout of web-pages
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. |
Basic Examples of Grid
<divclass="container bg-secondary"><divclass="row text-white"><divclass="col border p-2">One of two columns</div><divclass="col border p-2">One of two columns</div></div></div>
Output of above code
One of two columns
One of two columns
<divclass="container bg-secondary"><divclass="row text-white"><divclass="col border p-2">One of six columns</div><divclass="col border p-2">One of six columns</div><divclass="col border p-2">One of six columns</div><divclass="col border p-2">One of six columns</div><divclass="col border p-2">One of six columns</div><divclass="col border p-2">One of six columns</div></div></div>
Output of above code
One of six columns
One of six columns
One of six columns
One of six columns
One of six columns
One of six columns
<divclass="container bg-secondary"><divclass="row text-white"><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div><divclass="col border">One of eight columns</div></div></div>
Output of above code
One of eight columns
One of eight columns
One of eight columns
One of eight columns
One of eight columns
One of eight columns
One of eight columns
One of eight columns
<divclass="container bg-secondary"><divclass="row text-white"><divclass="col border">col 1 of 12</div><divclass="col border">col 2 of 12</div><divclass="col border">col 3 of 12</div><divclass="col border">col 4 of 12</div><divclass="col border">col 5 of 12</div><divclass="col border">col 6 of 12</div><divclass="col border">col 7 of 12</div><divclass="col border">col 8 of 12</div><divclass="col border">col 9 of 12</div><divclass="col border">col 10 of 12</div><divclass="col border">col 11 of 12</div><divclass="col border">col 12 of 12</div></div></div>
Output of above code
col 1 of 12
col 2 of 12
col 3 of 12
col 4 of 12
col 5 of 12
col 6 of 12
col 7 of 12
col 8 of 12
col 9 of 12
col 10 of 12
col 11 of 12
col 12 of 12
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.
