CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3multiple-columns
FlyingCat
FlyingCat

Reputation: 14290

How to align images next to text?

I am trying to create a layout with bootstrap 3 that is like the following

ASCII art of what I'd like to happen, the boxes are images.

bunch of texts bunch of texts bunch of texts             ----------------
bunch of texts bunch of texts bunch of texts            |                |
bunch of texts bunch of texts bunch of texts            | ______________ |
bunch of texts bunch of texts bunch of texts            
                                                          ---------------
                                                        |                |
-------------------------------------------------       |                |
|                                               |         ---------------
|                                               | 
|                                               |        ----------------
|                                               |       |                |
|                                               |       |                |
-------------------------------------------------        ----------------

Here is the html code: 

<h1 class='title'>Project</h1>
<div class='row'>
    <p class='col-md-5 col-sm-5'> bunch of texts * 20</p>  
</div>
<div class='row'>
    <img class='col-md-7 col-sm-8 img-responsive' src='test1IMG1.png'/>
     <div class='col-md-5 col-sm-4'>
        <img class='img-responsive' src='testIMGsm.png'/>
        <img class='img-responsive' src='test1IMGsm.png'/>
        <img class='img-responsive' src='test1IMGsm.png'/>
     </div>
 </div>

I can't seem to get top of the small image next to the texts. The top of small image is being pushed down to align to the left larger images.

I need to get it to work on the iPad and desktop. Can someone help me to fix this? Thanks a lot!

Upvotes: 0

Views: 487

Answers (2)

Leon
Leon

Reputation: 2149

You should make two columns and put the large image in the left column. Something like:

<div class='col-medium'>
    <p>bunch of texts * 20</p>  
    <img src='test1IMG1.png'>
</div>
<div class='col-small'>
    <img class='img-responsive' src='testIMGsm.png'>
    <img class='img-responsive' src='test1IMGsm.png'>
    <img class='img-responsive' src='test1IMGsm.png'>
 </div>

This is how I would do it, hope it helps: http://jsfiddle.net/9477x/

Upvotes: 0

Mike Lyons
Mike Lyons

Reputation: 1792

You have two rows, one with the text, and the one below with two columns.

If you want the text and large image to be in one column, and the other images to be in another column, put both columns inside a single row. Like so:

<div class='row'>
  <div class='col-md-5 col-sm-5'> bunch of texts * 20
    <img class='col-md-7 col-sm-8 img-responsive' src='test1IMG1.png'/>
  </div>  
   <div class='col-md-5 col-sm-4'>
      <img class='img-responsive' src='testIMGsm.png'/>
      <img class='img-responsive' src='test1IMGsm.png'/>
      <img class='img-responsive' src='test1IMGsm.png'/>
   </div>
</div>

Upvotes: 2

Related Questions