Wrapping an image in a link in a Bootstrap row

Question

I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.

Here's a JSFiddle of what I've tried

Here's what I'm trying to do:

row
--------------------------------------------------------
                  |                  |                  
      image1      |      image2      |      image3      
                  |                  |                  
--------------------------------------------------------

Here's the best I can come up with:

row
--------------------------------------------------------
      image1      |      image2      |      image3      
                  |      image2      |      image3      
                  |      image2      |            
--------------------------------------------------------

This answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.

I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row

What I've tried:

Here's what I started with:

<div class="row vertical-align">
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>    
</div>

I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.

.vertical-align {
    display: flex;
    align-items: center;
}

For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:

<div class="row">
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-1.png"></a></div>
    </div>
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-2.png"></a></div>
    </div>
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-3.png"></a></div>
    </div>    
</div>

In my CSS file, I added these classes:

.jumbotron .row > a {
    display: block;
}

.jumbotron > .row div a img {
    max-height: 80px;
    max-width: 100%;
    vertical-align: middle;
}

The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.

I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:

How to vertically align an image inside div

I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.

Punker (http://plnkr.co/) is an online tool where you can create a running app to demonstrate your problem. Sometimes code examples aren't enough. — pgreen2, Jun 08 '16 at 02:48
Whew! Glad that's not the urban dictionary definition. I'll see what I can throw together with plnkr.co — Adrian, Jun 08 '16 at 02:52
@pgreen2 I put up a jsfiddle of the issue I've encountered. I've tried adding `!important` to my CSS statements thinking there's something in Bootstrap that's overriding it, but that doesn't do anything. — Adrian, Jun 08 '16 at 16:57
Is adding some padding to the last image an option? https://jsfiddle.net/f9ogw26n/20/ — eye-wonder, Jun 10 '16 at 13:46
@eye-wonder Thanks for reading! I'm trying to get the images to align vertically in the row without breaking Bootstrap's responsiveness. I can get them to align vertically, but when the window resizes, it's not responsive when I use the `vertical-align` class I created. — Adrian, Jun 10 '16 at 13:54

score 8 · Accepted Answer · answered Jun 11 '16 at 09:54

Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.

Here is the trick.

.vertical-align {
  letter-spacing: -4px;
  font-size: 0;
}

.vertical-align .col-xs-4 {
  vertical-align: middle;
  display: inline-block;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="jumbotron">
    <div class="row vertical-align">
      <div class="col-xs-4">
        <a href="#" title=""><img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive"></a>
      </div>
    <div class="col-xs-4">
        <a href="#" title=""><img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive"></a>
    </div>
    <div class="col-xs-4">
        <a href="#" title=""><img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive"></a>
    </div>    
  </div>
</div>
</div>

Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.

Awesome! That got me over the finish line. I changed the selector to `.vertical-align [class*='col-']` to broaden its use a bit. — Adrian, Jun 11 '16 at 12:04

Dhaval Chheda · Answer 2 · 2016-06-08T03:16:14.520

0

please try this and lemme know if this is what you wanted

 <style>
        img {
        height: auto;
        width: 100%;
    }

    .vertical {
        height: 100vh;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .abcd {
        min-width: 5em;
        flex: 1;
    }
    </style>

</head>

<body>
    <div class="container">
        <div class="vertical">
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
        </div>
    </div>

</body>

edited Jun 08 '16 at 03:16

answered Jun 08 '16 at 02:46

Dhaval Chheda

4,637
5
24
44

Thank you for reading. That didn't get it done. I updated to show what I'm trying to get as a result. – Adrian Jun 08 '16 at 03:11
try the edited code and also add some margin between the images if you want as i forgot to add that in the code – Dhaval Chheda Jun 08 '16 at 03:15
1

While this code snippet may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Box Box Box Box Jun 10 '16 at 16:04

Luuk Skeur · Answer 3 · 2016-06-10T14:26:29.507

I have created a little workaround. The real problem is that the <a> element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-image property. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.

https://jsfiddle.net/f9ogw26n/21/

.wrapper {
  height: 200px;
  width: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <a href="#">
        <div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
        </div>
      </a>
    </div>
    <div class="col-xs-4">
      <a href="#">
        <div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
        </div>
      </a>
    </div>
    <div class="col-xs-4">
      <a href="#" title="">
        <div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
        </div>
      </a>
    </div>
  </div>
</div>

In the future, please add the snippet into the answer itself, links can go bad. — misterManSam, Jun 10 '16 at 14:25

Wrapping an image in a link in a Bootstrap row

3 Answers3

Linked