How To Create Bootstrap Columns All With Same Width?

I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.

Solution 1:

You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-md-4">
      1
    </div><divclass="col-md-4">
      2
    </div><divclass="col-md-4">
      3
    </div></div><divclass="row"><divclass="col-md-4">
      1
    </div><divclass="col-md-4">
     2
    </div><divclass="col-md-4"id="last-column"></div></div></div>

Solution 2:

You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><divclass="container"><divclass="row"><divclass="col-md-4">
      1
    </div><divclass="col-md-4">
      2
    </div><divclass="col-md-4">
      3
    </div><divclass="col-md-4">
      4
    </div><divclass="col-md-4">
      5
    </div><divclass="col-md-4 d-none d-lg-block">
      6
    </div></div></div>

Share