CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Huey
Huey

Reputation: 2834

Bootstrap responsive image align bottom

In the following fiddle, I want the 275x275 image to align to the bottom of the row:

https://jsfiddle.net/2n2x2bko/

<div class="container">
  <div class="row">
    <div class="col-md-12"><img class="img-responsive logo center-block" src="http://placehold.it/100x100" /></div>
  </div>
  <div class="row">
    <div class="col-md-4">Work</div>
    <div class="col-md-4">About</div>
    <div class="col-md-4">Contact</div>
  </div>
  <div class="row">
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div>
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/275x275"></div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-6">App</div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-3">App</div>
    <div class="col-md-3">App</div>
  </div>
</div>

There doesn't seem to a vertical alignment equivalent of .center-block, any ideas?

Upvotes: 2

Views: 2266

Answers (2)

Alex
Alex

Reputation: 8695

There is no any class in Bootstrap v3 that aligns element vertically but you can use the below solutions to achieve your desire situation.

  1. display:inline-block;.(don't forget to remove spaces) Jsfiddle

[class*=valign-] [class*=col] {
  display: inline-block;
  float: none;
}

[class=valign-top] [class*=col] {
  vertical-align: top;
}

[class=valign-middle] [class*=col] {
  vertical-align: middle;
}

[class=valign-bottom] [class*=col] {
  vertical-align: bottom;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12"><img class="img-responsive logo center-block" src="http://placehold.it/100x100" /></div>
  </div>
  <div class="row">
    <div class="col-md-4">Work</div>
    <div class="col-md-4">About</div>
    <div class="col-md-4">Contact</div>
  </div>
  <div class="row valign-bottom">
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div><div class="col-md-6"><img class="img-responsive bottom-img" src="http://placehold.it/275x275"></div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-6">App</div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-3">App</div>
    <div class="col-md-3">App</div>
  </div>
</div>

  1. display: flex; Jsfiddle

[class*=valign-bottom"]{
 display: flex;
align-items:flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12"><img class="img-responsive logo center-block" src="http://placehold.it/100x100" /></div>
  </div>
  <div class="row">
    <div class="col-md-4">Work</div>
    <div class="col-md-4">About</div>
    <div class="col-md-4">Contact</div>
  </div>
  <div class="row valign-bottom">
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div>
    <div class="col-md-6"><img class="img-responsive bottom-img" src="http://placehold.it/275x275"></div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-6">App</div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-3">App</div>
    <div class="col-md-3">App</div>
  </div>
</div>

Upvotes: 1

Sasang
Sasang

Reputation: 1281

One way to do it is to make the image element relative to its parent row. So change the images row to :

<div class="row alignRow">
   <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div>
   <div class="col-md-6 alignImage"><img class="img-responsive bottom-img" src="http://placehold.it/275x275"></div>
</div>

And add this css:

.alignRow {
    position: relative;
 }
.alignImage {
    position: absolute;
    bottom: 0;
    right: 0;
 }

Note that this will mess up its allignment with its siblimg image, so the best way to do this would be to make them both absolute and then specify some width values.

Take a look at your updated jsfiddle: here

Upvotes: 0

Related Questions