How to Create a Three-Column Layout in Bootstrap?

Creating a three-column layout in Bootstrap involves dividing the container into three equal-width columns using the col-sm-4 class within a row and container. This ensures the columns are responsive and maintain equal width on small-sized devices and larger, providing a balanced layout for organizing content effectively.

Syntax

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <!-- Content for the first column -->
        </div>
        <div class="col-sm-4">
            <!-- Content for the second column -->
        </div>
        <div class="col-sm-4">
            <!-- Content for the third column -->
        </div>
    </div>
</div>

Explanation

• Bootstrap Grid System: Bootstrap provides a powerful grid system based on a 12-column layout, allowing easy creation of multi-column designs.
• Column Classes: Each column within a row is assigned the class col-sm-4, which ensures that each column occupies 4 out of the 12 available columns on small-sized devices (sm) and larger.
• Equal Width Columns: By using the col-sm-4 class for each column, the layout ensures that all three columns have equal width, creating a balanced appearance.

Features

• Responsive Design: The layout adjusts responsively on small-sized devices and above, ensuring an optimal viewing experience across various screen sizes.
• Equal Width Columns: Each column spans one-third of the container’s width, maintaining a balanced layout.
• Flexibility: Bootstrap’s grid system offers flexibility, allowing developers to create customized layouts to suit their design needs effectively.