Search code examples
csstwitter-bootstrap-3css-multicolumn-layout

css: four column width

I have a simple page

What I want is to spread columns over the row. Is it possible to achieve this goal within this scheme? I think it is quite useful to use w-100 classes within single row to build multi-column grid. Isn't it?

Solution

  • If you want to have 4 columns per row, then add col-3 class to your div.

    <div class="container">
  <h3>Block #1</h3>
  <div class="row">
    <div class="col-3 item-card">
        Block #11
    </div>

    <div class="col-3 item-card">
        Block #12
    </div>

    <div class="col-3 item-card">
        Block #13
    </div>

    <div class="col-3 item-card">
        Block #14
    </div>

    <div class="w-100 divider"></div>
  </div>
</div>

    Bootstrap grid system is using a twelve column system. Which means each row has total of 12 units. So to have 4 columns per row, 12 / 4 = 3

    Read more from Bootstrap Grid Layout.

    .divider {
  height: 1px;
  background-color: red;
}