CODEWITHSUNDEEP
csstwitter-bootstrapalignment
Septy Chasanah
Septy Chasanah

Reputation: 11

bootstraps 3 align bottom with 3 column in row

I've seen this thread but its for 2 column (col-md-6) and I've tried the jsfidlle too for 3 column but column 1st and column 2nd become stack.

Bootstrap 3 Align Text To Bottom of Div

what I want for my project is

.row {
      position: relative;
  }

 .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
<div class="container">
    <div class="row">
        <div class="bottom-align-text col-sm-4">
            <h3>Some Text</h3>
        </div>
        <div class="col-sm-4">
            <img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
        </div>
        <div class="bottom-align-text col-sm-4">
            <h3>Some Text</h3>
        </div>
    </div>
</div>

how to make them both align bottom?

Upvotes: 1

Views: 1100

Answers (2)

Robin Huy
Robin Huy

Reputation: 1100

You can wrap column 1st and column 2nd in to a row then we'll have 2 columns structure. See my jsFiddle demo: https://jsfiddle.net/robinhuy/kg1ykfL1/3/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115364

flexbox can do that

.row div {
  border: 1px solid red;
}

.flexy {
  display: flex;
  text-align: center;
}

.flexy .bottom-align-text {
  display: flex;
  justify-content: center;
  align-items: flex-end;

}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row flexy">
    <div class="bottom-align-text col-sm-4">
      <h3>Some Text</h3>
    </div>
    <div class="col-sm-4">
      <img src="//placehold.it/600x300" alt="Logo" class="img-responsive" />
    </div>
    <div class="bottom-align-text col-sm-4">
      <h3>Some Text</h3>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions