Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Wrapping An Image In A Link In A Bootstrap Row

Post a Comment
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

Solution 1:

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.


Solution 2:

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>

Solution 3:

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"  />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  />
<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>

Post a Comment for "Wrapping An Image In A Link In A Bootstrap Row"