Bootstrap Grid – Small Devices
Bootstrap’s grid system is designed to be responsive, which means it can adapt to different screen sizes. By default, columns in the grid will stack vertically on small devices such as smartphones and display horizontally on larger devices such as tablets and desktops.
To use Bootstrap’s grid system, you first need to define a container element, which is typically a <div> element with the container class:
<div class="container">
...
</div>
Bootstrap Grid – Small Devices
Inside the container element, you can create rows using the row class. Rows contain columns, which are created using the col-* classes. The * in col-* can be replaced with a number from 1 to 12, which specifies the width of the column in terms of the total number of columns in a row. For example, to create a row with two columns that each take up half of the available width, you can use the following HTML:
<div class="container">
<div class="row">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
</div>
In this example, the col-6 class specifies that each column should take up 6 of the 12 available columns in the row, which means they will each take up half of the available width.
On small devices such as smartphones, the columns will stack vertically in the order they are defined. On larger devices, they will display horizontally. You can also use the col-*-offset-* classes to offset columns, and the col-*-push-* and col-*-pull-* classes to re-order columns on different screen sizes.
For example, to create a row with two columns that are offset from each other by one column on small devices, you can use the following HTML:
<div class="container">
<div class="row">
<div class="col-10 col-sm-5 col-sm-offset-1">Column 1</div>
<div class="col-10 col-sm-5">Column 2</div>
</div>
</div>
In this example, the col-10 class specifies that each column should take up 10 of the 12 available columns in the row. On small devices, the first column is also offset by one column and takes up 5 of the 12 available columns, while the second column takes up 5 of the 12 available columns. On larger devices, the columns will each take up 10 of the 12 available columns and display horizontally.