by: KSPosted on:

How do I create a 3-column layout using Bootstrap Grid?

o create a 3-column layout using Bootstrap grid, you can follow these steps:

  1. Start by creating a container div with the class “container” or “container-fluid“.
  2. Inside the container div, create a row div with the class “row“.
  3. Create three column divs inside the row div with the class “col“. You can specify the column width by appending a number from 1 to 12 to the class “col“, such as “col-4” for a column that takes up one-third of the row.
  4. Add content to each column div.

Here’s an example code snippet:

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Column 1 content here -->
    </div>
    <div class="col-4">
      <!-- Column 2 content here -->
    </div>
    <div class="col-4">
      <!-- Column 3 content here -->
    </div>
  </div>
</div>

In this example, each column takes up one-third of the row, creating a 3-column layout. You can adjust the column width by changing the number after “col-“, such as “col-6” for a column that takes up half of the row. You can also add additional classes such as “col-sm-” or “col-md-” to create responsive designs that adapt to different screen sizes.