Clever Geek Handbook

5 equal width columns in bootstrap (full container width)

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

Is there a way to implement this or do I need:

  • Rebuild my psd template to fit the grid and boot sizes
  • Don't use loading and write custom response 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>
+3


source to share


4 answers


I would recommend using auto layout columns col-lg

for larger widths so you can have 5 rows and then scale to standard size grid columns by md

, sm

etc.

http://www.codeply.com/go/DVzExqdUZa



<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 hidden-md-down">
               <!--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>

http://www.codeply.com/go/DVzExqdUZa



+4


source


Easy to use bootstrap 4. You only need one row flex

per 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>
Run codeHide result


+1


source


You can also use Flexbox. I suggest you 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;

}
0


source


You can configure the "correct path" version of bootstrap. The link to this page allows you to configure several settings, including the number of grid columns.

http://getbootstrap.com/customize/

0


source






More articles:


All Articles