CODEWITHSUNDEEP
csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4
Src
Src

Reputation: 5502

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

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:

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>

Upvotes: 4

Views: 16510

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362700

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

Upvotes: 7

ganders
ganders

Reputation: 7451

You can customize your version of bootstrap "the right way". The link to this page let's you customize A LOT of settings, including the number of grid columns.

http://getbootstrap.com/customize/

Upvotes: -2

Franco Bermudez
Franco Bermudez

Reputation: 25

You can also use Flexbox. I suggest you to use 1200px or less as the maximum container width.

<div class="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

.container{

    display: flex;
    width: 1720px;

}

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

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>

Upvotes: 2

Related Questions