Bootstrap 3 col floating issue

Question

Im trying to get this: https://i.stack.imgur.com/2jUDB.jpg
Currently i have this: https://i.stack.imgur.com/3u1TE.jpg

It's no option to split them into two container with col-md-6 like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row-fluid">
  <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
   <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
    <div class="imageContainerAnimated">
     <a href="#">
        <img src="images/image.jpg">
      <div>Title</div>
     </a> 
    </div>
   </div>
   
   <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
    <div class="imageContainerAnimated">
     <a href="#">
        <img src="images/image.jpg">
      <div>Title</div>
     </a> 
    </div>
   </div>
   
   <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
    <div class="imageContainerAnimated">
     <a href="#">
        <img src="images/schmuck3.jpg">
        <div>Title</div>
     </a> 
    </div>
   </div>
  </div>
  
  <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
   <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
    <div class="imageContainerAnimated">
     <a href="#">
        <img src="images/image.jpg">
      <div>Title</div>
     </a> 
    </div>
   </div>
   
   <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
    <div class="imageContainerAnimated">
     <a href="#">
        <img src="images/image.jpg">
      <div>Title</div>
     </a> 
    </div>
   </div>
   
   <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
    <div class="imageContainerAnimated">
     <a href="#">
        <img src="images/schmuck3.jpg">
        <div>Title</div>
     </a> 
    </div>
   </div> 
  </div>
 </div> 
</div>

My code:

    <div class="container">
 <div class="row-fluid">
  <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/schmuck3.jpg">
       <div>Title</div>
    </a> 
   </div>
  </div>
  
  
  <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/schmuck3.jpg">
       <div>Title</div>
    </a> 
   </div>
  </div> 
  

  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/schmuck3.jpg">
       <div>Title</div>
    </a> 
   </div>
  </div>
  
  
  <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  
  <div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/image.jpg">
     <div>Title</div>
    </a> 
   </div>
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
   <div class="imageContainerAnimated">
    <a href="#">
       <img src="images/schmuck3.jpg">
       <div>Title</div>
    </a> 
   </div>
  </div>
 </div> 
</div>

The class removePaddingMargin removes padding an margin
The class imageContainerAnimated animates the image in the container and gives 100% width.

Non-Bootsrap Example: https://jsfiddle.net/jea8ezny/

This is the same URL: Im trying to get this: http://imgur.com/lJr41u7 Currently i have this: http://imgur.com/lJr41u7 — Monicka, Mar 11 '17 at 19:47
Please provide a [mcve]. There's no way we can inspect images to see what rules currently apply. Use the snippet tool (`<>` button) and link all required resources. — tao, Mar 11 '17 at 20:11

Bootstrap 3 col floating issue

0 Answers0