CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Mia
Mia

Reputation: 233

Bootstrap Align One Large Image with Four Smaller Ones

I am trying to make a webpage with Bootstrap. This is what I want it to look like: enter image description here

However I am having trouble getting the pictures to align. This is what I have so far: enter image description here

I tried adding no padding and no margin to my columns but that didn't seem to do the trick. Here's the HTML I have so far: 

<body>
<div class="container">
  <div class="row">
    <div class="col-lg-8"><img src="img/logo.png" class="img-responsive"></div>
  </div>
  <div style="margin-top:30px"></div>

  <div class="row">
  <div class="col-lg-3 nopadding"> <img class="img-responsive" src="img/tagline.png"></div>
  <div class="col-lg-3 nopadding"> <img class="img-responsive" src="img/karen_big.png"></div>
  <div class="col-lg-6 nopadding"><img class="img-responsive"src="img/don_big.png"></div>
  <div class="col-lg-3 nopadding"><img class="img-responsive" src="img/elwood_big.png" style=""></div>
  <div class="col-lg-3 nopadding"><img class="img-responsive" src="img/michigan.png"></div>
  </div>


</body>
</html>

And here's the CSS I added for no padding and no margins:

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Thanks in advance!

Upvotes: 1

Views: 2089

Answers (3)

Marcelo
Marcelo

Reputation: 4425

For just this specific case, the simplest solution is to use bootstrap's pull-right class on the column containing the large image.

<div class="container">
  <div class="row">
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-6 nopadding pull-right"><img class="img-responsive" src="http://placekitten.com/g/300/300"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
  </div>
</div>

Upvotes: 1

Pevara
Pevara

Reputation: 14310

your markup should look more like this to get the correct alignment:

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

Or translated to the bootstrap grid system:

<div class='row'>
    <div class='col-md-6'>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
    </div>
    <div class='col-md-6'></div>
</div>
<div class='row'>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
</div>

And an example:http://jsfiddle.net/ajx8m5k3/

Upvotes: 9

Iodizer
Iodizer

Reputation: 15

you may have to scale your images to fit the containers. e.g.

<img class="img-responsive" src="img/karen_big.png" width="100%" height="100%">

Upvotes: 0

Related Questions