Radon Radon - 2 months ago 8
CSS Question

Bootstrap float images around column/text

I'm trying to float images in a diffrent column around the column, which contains text, on the left. I was hoping there is solution via bootstrap (which is implemented anyway).

<div class="row">
<div class="col-md-8">
<div class="new"></div>
<h1>TITLE</h1>
CONTENT
</div>
<div class="col-md-4">
IMAGE
</div>
</div>


As the image count is varying, the text has the same height as the image-col, which results in the pictures not wrapping around the text.
Thanks in advance, maybe i need another coffee...




EDIT:

+------------+ +----+ +------------+ +----+
| | | | | | | |
| | | | | | | |
| | +----+ | | +----+
| | | |
| | +----+ | | +----+
| | | | | | | |
+------------+ | | +------------+ | |
+----+ +----+
+----+ +----+ +----+
| | | | | |
+----+ | | | | | |
| | +----+ +----+ +----+
| |
+----+ +----+ +----+ +----+
| | | | | |
| | | | | |
+----+ +----+ +----+ +----+
| |
| |
+----+

+----+
| |
| |
+----+

+----+
| |
| |
+----+


I hope this helps where im going, the small blocks are the images that id like to wrap around the text/content which is the big block. Left ist the current state, the right one is the one i want to achieve with, all being responsive. Is there a way with bootstrap to limit the big boxes height even id its in the same row ?

Answer

If you are putting all your images in the single <div class="col-md-4">then that's why...it's a separate column. Use multiple versions of the div, one for each image. Then they should wrap.

Thus your structure needs to be:

<div class="row">
    <div class="col-md-8">
        <div class="new"></div>
        <h1>TITLE</h1>                 
        CONTENT
    </div>
    <div class="col-md-4">
    IMAGE
    </div>
    <div class="col-md-4">
    IMAGE
    </div>    
     <div class="col-md-4">
    IMAGE
    </div>    
     <div class="col-md-4">
    IMAGE
    </div>    
    <div class="col-md-4">
    IMAGE
    </div>
</div>

enter image description here

Then it works fine.

Codepen Demo

img {
  max-width: 100%;
  margin-bottom: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="new"></div>
      <h1>TITLE</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam voluptatem laborum rerum amet rem, itaque eaque nesciunt distinctio adipisci possimus repudiandae, cum assumenda fugit ab. Nulla omnis eos facere, quisquam dolor officia possimus odit
        quaerat nemo ad error veritatis voluptate, deserunt ex corrupti aspernatur. Nulla, iure, iste! Exercitationem, architecto. Dolor.</p>
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
  </div>
</div>