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;
}
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"/><divclass="container-fluid"><divclass="jumbotron"><divclass="row vertical-align"><divclass="col-xs-4"><ahref="#"title=""><imgsrc="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png"class="img-responsive"></a></div><divclass="col-xs-4"><ahref="#"title=""><imgsrc="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png"class="img-responsive"></a></div><divclass="col-xs-4"><ahref="#"title=""><imgsrc="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><divclass="container"><divclass="vertical"><divclass="abcd"><ahref="#"><imgsrc="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a></div><divclass="abcd"><ahref="#"><imgsrc="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a></div><divclass="abcd"><ahref="#"><imgsrc="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;
}
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"  /><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  /><divclass="container-fluid"><divclass="row"><divclass="col-xs-4"><ahref="#"><divclass="wrapper"style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');"></div></a></div><divclass="col-xs-4"><ahref="#"><divclass="wrapper"style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');"></div></a></div><divclass="col-xs-4"><ahref="#"title=""><divclass="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"