What is use of Columns in Bootstrap Grid System ?
Last Updated :
19 Feb, 2024
In Bootstrap’s grid system, columns are essential for creating responsive layouts that adapt to different screen sizes.
Syntax
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Content for the first column -->
</div>
<div class="col-md-4">
<!-- Content for the second column -->
</div>
<div class="col-md-4">
<!-- Content for the third column -->
</div>
</div>
</div>
Explanation
- The outermost
<div>
with the class container
serves as a wrapper for the grid layout and helps to center the content horizontally on the page.
- Inside the container, a
<div>
with the class row
is used to contain the columns. Rows ensure proper alignment and spacing of columns.
- Within the row, individual columns are defined using
<div>
elements with classes such as col-md-4
. In this example, each column occupies 4 out of 12 available columns on medium-sized devices and above (md
breakpoint). The number 4
represents the number of columns each column spans.
- Bootstrap provides various predefined classes for columns, such as
col-sm
, col-md
, col-lg
, etc., to specify different column widths based on different screen sizes (small, medium, large, etc.).
Use of Columns
- Columns allow you to divide the page horizontally into different sections.
- They enable you to organize content into a grid layout, making it easier to create responsive designs that adapt well to various devices and screen sizes.
- By combining and nesting columns, you can create complex layouts with multiple levels of content hierarchy.
Share your thoughts in the comments
Please Login to comment...