Bootstrap Grid
Bootstrap’s grid system is responsive and adapts to different screen sizes. In addition to the default stacking behavior on small devices and the layout control on medium devices, the grid system also provides classes for controlling the layout of columns on large-sized devices, such as desktops.
To specify the layout of columns on large devices, you can use the col-lg-* classes. The * in col-lg-* 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 on large devices, you can use the following HTML:
<div class="container">
<div class="row">
<div class="col-lg-6">Column 1</div>
<div class="col-lg-6">Column 2</div>
</div>
</div>
Bootstrap Grid – Large Devices
In this example, the col-lg-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 large devices and larger.
On small and medium devices, the columns will stack vertically in the order they are defined. On large devices, they will display horizontally. You can also use the col-lg-*-offset-* classes to offset columns, and the col-lg-*-push-* and col-lg-*-pull-* classes to re-order columns on large devices.
For example, to create a row with two columns that are offset from each other by one column on large devices, you can use the following HTML:
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1">Column 1</div>
<div class="col-lg-5">Column 2</div>
</div>
</div>
In this example, the col-lg-5 class specifies that each column should take up 5 of the 12 available columns in the row on large and larger devices. On large 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 small and medium devices, the columns will stack vertically in the order they are defined.