CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
djur1
djur1

Reputation: 39

Nesting images in column

I'm having trouble explaining this in words, so I'll illustrate. Today, I have banners on my front page with this layout:

 _______________________   _____
|                       | |     |
|                       | |     |
|_______________________| |_____|

The HTML (Bootstrap v.3.3.5) for this layout is the following:

<div class="row">
  <div class="col-sm-9">
    <img src="img1.jpg" alt="">
  </div>
  <div class="col-sm-3">
    <img src="img2.jpg" alt="">
  </div>
</div>

But now I'm changing the smaller image (the right one) into two separate images -- in the same column. Most stuff I've tried break the document flow completely and I'm not having any luck. This is an illustration of what I want it to look like:

 _______________________   _____
|                       | |_____|
|                       |  _____     
|_______________________| |_____|

Should I be breaking it into two columns or are there any other good Bootstrap techniques to use?

Upvotes: 0

Views: 174

Answers (2)

Muhammad Jafar
Muhammad Jafar

Reputation: 84

<div class="row">
  <div class="col-sm-9">
    <img src="img1.jpg" alt="">
  </div>
  <div class="col-sm-3">
    <div class="row">
      <div class="col-sm-12">
        <img src="img2-1.jpg" alt="">
      </div>
      <div class="col-sm-12">
       <img src="img2-2.jpg" alt="">
    </div>
  </div>
</div>

Instead of using many rows, you can try to use col-sm-12 for the 2nd row. and if you want to remove annoying padding just do with your own css

Upvotes: 1

Dorvalla
Dorvalla

Reputation: 5240

<div class="row">
  <div class="col-sm-9">
    <img src="img1.jpg" alt="">
  </div>
  <div class="col-sm-3">
    <div class="row">
       <img src="img2-1.jpg" alt="">
    </div>
    <div class="row">
       <img src="img2-2.jpg" alt="">
    </div>
  </div>
</div>

No, you should not break a column for this. You can simply add rows (think of this as a table) towards your column and thus create the effect you seek.

Upvotes: 1

Related Questions