Align images side-by-side grid bootstrap

Navigation
3

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

I tried to use float: left , at first it works, but when the screen gets small everything gets messed up, the images are out of div .

Here is the sample 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><scriptsrc="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>
    
asked by anonymous 30.01.2017 / 14:14

1 answer

3

Your images are in the pull-left class. This class uses float: left to make your images not in the stream of HTML elements.

To set you can put the clearfix class 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><scriptsrc="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>
    
30.01.2017 / 14:30
Pass the return (integer) of a method from Controller to View Editable table with jquery and php?