5 equal width columns in bootstrap (full width of container)

Question

According to my psd template, i have CONTAINER which consists of 5 equal width (344px) columns. I decided to go with bootstrap in terms of responsiveness. But now i'm frustrated with this task.

Is there any way to implement this or i need:

• Rebuild my psd template to fit bootstrap grid and sizes
• Not to use bootstrap and write custom responsive classes

Codepen: http://codepen.io/anon/pen/YZbBQG

<div class="cont">
        <div class="bicycles">
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
        </div>
    </div>

Solution 1

I'd recommend using the auto layout col-lg columns for larger widths so that you can have 5 across, then scale down to the standard size grid columns on md, sm, etc..

Bootstrap 4.6 (update 2020)

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 d-none d-lg-block">
           <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>

Note: This will allow the columns to grow evenly to fill the width of the row. In rare cases where the column content forces the width (for example columns that contain fixed width images or non-wrapping text), use min-width:0 to force equal column width regardless of their content.

.col-lg {
    min-width: 0;
}

http://codeply.com/go/DVzExqdUZa

Solution 2

It's easy using bootstrap 4. You just need a single flex line on the columns to define the custom width.

.row > .col {
  flex: 0 0 344px;
  background: #eee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>