CODEWITHSUNDEEP
csstwitter-bootstrap-3css-multicolumn-layout
GHopper
GHopper

Reputation: 387

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?

Upvotes: 1

Views: 109

Answers (1)

Andrew Lam
Andrew Lam

Reputation: 3804

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;
}

Upvotes: 1

Related Questions