CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Mia
Mia

Reputation: 233

Offsetting columns in Bootstrap

I am making a webpage using Bootstrap and I have seven logos I need to display in two rows. The top row with three logos and the bottom row with four logos. To look something like this: enter image description here

I kind of have it like that now but it only stays like that when the screen in full width. It doesn't stack properly like how Bootstrap normally does when you begin to resize it. Here is the HTML I have:

    <div class="row partners">
      <!--Title-->
      <div class="col-md-12">
        <h5 id="vp">
      VALUED PARTNERS
    </h5>
    <div class="underline"></div>
  </div>  
  <div class="col-md-3 col-md-offset-1 ">
    <img class="img-responsive " alt="CEN logo" src="img/CEN_logo.png">
  </div>
 <div class="col-md-3 col-md-offset-1">
    <img class="img-responsive" alt="Kinber logo" src="img/Kinber_logo.png">
  </div>
   <div class="col-md-3 col-md-offset-1 ">
    <img class="img-responsive" alt="NYSERNET logo" src="img/NYS_logo.png">
  </div>


    <div class="col-md-3 littlebit">
        <img class="img-responsive" src="img/WISNET_logo.png" alt="WISCNET logo">      
    </div>
    <div class="col-md-3 littlebit">
        <img class="img-responsive" src="img/NJEdge_logo.png" alt="NJedge logo">      
    </div>
     <div class="col-md-3 littlebit">
        <img class="img-responsive" src="img/MCNC_logo.png" alt="MCNC logo">      
    </div>
     <div class="col-md-3 littlebitless">
        <img class="img-responsive" src="img/GPN_logo.png" alt="Great Plains Network logo">      
    </div>

  </div> <!--Partners-->

And here is the CSS I have to go with it:

.littlebit{
    padding-right: 2%; 
    padding-left: 4%; 
    padding-bottom: 2%; 
    padding-top: 2%; 
}
.littlebitless{ 
    padding-left: 5%; 
    padding-bottom: 2%; 
    padding-top: 2%; 
}
.partners{
    margin-top: 3%;  
    border-style: solid; 
    border-width: 3px; 
    border-color: #7C7C7C; 
    padding-bottom: 7px; 
    padding-top: 5px; 
}

The images should be centered on the page. My problem is getting the second row to be aligned to the first like the image shows. Thanks!

Upvotes: 0

Views: 893

Answers (1)

Christina
Christina

Reputation: 34652

Why not do something simpler:

DEMO: https://jsbin.com/resaxa

https://jsbin.com/resaxa/1/edit?html,css,output

enter image description here

HTML:

 <div class="container">
   
   <ul class="logo-list list-inline text-center">
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li class="visible-md visible-lg clearfix"><!--clear after three on md and large --></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
  </ul>
   
</div>

CSS:

.logo-list img {width:100%;height:auto;}
.logo-list li {padding-bottom:1%}

Upvotes: 4

Related Questions