Bootstrap 3 Align Text To Bottom of Div

Question

I m trying to get a setup in Bootstrap that would look something like this  where I have text aligned with the bottom of an image                                                                                                                                                             THIS IS AN IMAGE                                                         And some text                                                                                                         So I tried this    lt div class  row  gt       lt div class  col-sm-6  gt           lt img src    Images MyLogo png  alt  Logo    gt       lt  div gt       lt div class  col-sm-6  gt           lt h3 gt Some Text lt  h3 gt       lt  div gt   lt  div gt    But I end up with something that looks more like this  where the text is top-aligned                                                                                                                                   And some text             THIS IS AN IMAGE                                                                                                                                                                               I ve tried a few positioning tricks to get it to work  but when I do that  it breaks the mobile-firstness of Bootstrap  When collapsed down to phone-size  I need it to snap to this                                                                                         THIS IS AN IMAGE                                                                   And some text                                                               So doing it as a table really isn t an option   EDIT  Here s a fiddle  courtesy of Joseph Marikle in the comments  D  http   jsfiddle net 6WvUY 1

User · Answer

I collected some ideas from other SO question (largely from here and this css page)

Fiddle

The idea is to use relative and absolute positioning to move your line to the bottom:

@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}

The display:flex option is at the moment a solution to make the div get the same size as its parent. This breaks on the other hand the bootstrap possibilities to auto-linebreak on small devices by adding col-sx-12 class. (This is why the media query is needed)

User · Answer

Here s another solution  http   jsfiddle net 6WvUY 7    HTML    lt div class  container  gt       lt div class  row  gt           lt div class  col-sm-6  gt               lt img src    placehold it 600x300  alt  Logo  class  img-responsive   gt           lt  div gt           lt div class  col-sm-6  gt               lt h3 gt Some Text lt  h3 gt           lt  div gt       lt  div gt   lt  div gt    CSS    row       display  table      row  gt  div       float  none      display  table-cell

User · Answer

You can do this   CSS    container       height 175px      container h3      position absolute      bottom 0      left 0      Then in HTML    lt div class  row  gt       lt div class  col-sm-6  gt           lt img src    placehold it 600x300  alt  Logo    gt       lt  div gt       lt div id  container  class  col-sm-6  gt           lt h3 gt Some Text lt  h3 gt       lt  div gt   lt  div gt    EDIT  add the  lt

User · Answer

The easiest way I have tested just add a  lt br gt  as in the following    lt div class  col-sm-6  gt       lt br gt  lt h3 gt  lt p class  text-center  gt Some Text lt  p gt  lt  h3 gt   lt  div gt    The only problem is that a extra line break  generated by that  lt br gt   is generated when the screen gets smaller and it stacks  But it is quick and simple

User · Answer

I think your best bet would be to use a combination of absolute and relative positioning   Here s a fiddle  http   jsfiddle net PKVza 2   given your html    lt div class  row  gt       lt div class  col-sm-6  gt           lt img src    Images MyLogo png  alt  Logo    gt       lt  div gt       lt div class  bottom-align-text col-sm-6  gt           lt h3 gt Some Text lt  h3 gt       lt  div gt   lt  div gt    use the following CSS    media  min-width  768px        row         position  relative          bottom-align-text       position  absolute      bottom  0      right  0          EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class

[css] Bootstrap 3 Align Text To Bottom of Div

Examples related to css

Examples related to twitter-bootstrap-3