Miguel Fernandez Miguel Fernandez - 3 months ago 14
CSS Question

Align images like Bootstrap

I want to align my images like bootstrap, I can't do it with bootstrap because user have the option to resize the images and using Bootstrap class "col-md, col-xs, etc." user can't resize the image width, I tried creating a div with width:100% and then I add width:25% to each image (I want 4 images per row), and the image is in the correct size but not in the correct position.

This is what I have at the moment:



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<h2>Without Bootstrap</h2>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
</div>





Here is an example of what I want vs what I have

Code

Thanks in advance.

Answer

If you add a class to your divs that contain the images, you can use:

display: inline-block;

I added CSS to your file:

.blockRow {
  display: inline-block;
  padding-right: 2.2em;
}

and HTML:

<div class="container">
  <h2>With Bootstrap</h2>
  <div class="row">
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  </div>
  <hr />
  <h2>Without Bootstrap</h2>
   <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
</div>

You'll have to play around with the padding to get it how you want it to look: http://codepen.io/anon/pen/pEobEg

Comments