Align images side by side grid bootstrap

Asked

Viewed 4,237 times

3

I want to align elements on the grid, but they stay on top of each other when I place.

I tried to use float: left, at first it works, but when the screen gets small everything gets messy, the images stay outside the div.

Follow the example code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- - - - - - - - - - - - - - - -->

<div class="col-sm-3 col-sm-offset-1" style="border:1px solid red;">                
    <p style="text-align:center;"><b>Imagens</b></p>                

    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left " width="50px"> 
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
</div>


<div class="col-sm-3 col-sm-offset-1" style="border:1px solid red;">                
    <p style="text-align:center;"><b>Imagens</b></p>                

    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left " width="50px"> 
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
</div>

twitter-bootstrap

1 answer

4


Your images are with the class pull-left, using float: left making your images not in the HTML element stream.

To tidy up you can put the class clearfix in containers (Documentation).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- - - - - - - - - - - - - - - -->

<div class="col-sm-3 col-sm-offset-1 clearfix" style="border:1px solid red;">                
    <p style="text-align:center;"><b>Imagens</b></p>                

    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left " width="50px"> 
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
</div>


<div class="col-sm-3 col-sm-offset-1  clearfix" style="border:1px solid red;">                
    <p style="text-align:center;"><b>Imagens</b></p>                

    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left " width="50px"> 
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
    <img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
</div>

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.