What is use of Columns in Bootstrap Grid System ?

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.