How to align an element at the bottom of the mother div?

Asked

Viewed 286 times

4

I need the content that’s in <h1> stay aligned below (bottom) in <div>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="inline m-3">
    <img src="https://via.placeholder.com/100" width="100px">
  </div>
  <div class="inline m-3">
    <h1>Título</h1>
  </div>
</div>

I am using Bootstrap 4.1 and followed the contents of documentation, but without success. I believe it should be simple, but I still don’t understand the concept behind it.

css twitter-bootstrap

  • Tried to put class="align-bottom" inside H1 ?

  • Add the following attributes in your H1’s style: position: Absolute; bottom:0;

  • Yes. This solution is shown in the link I attached to my question

  • There are several ways to do, detail the question better. What you want is, only that the div who has the h1 stay under the first div?

  • No, I want H1 to be aligned next to the image and aligned down (bottom)

  • that lined up below would be at the footer?

Show 1 more comment

1 answer

4


Work with flexbox.
You can single-align an element through the property align-self:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class='d-flex'>
  <img src='http://lorempixel.com/160/160/abstract/'>
  <div class='d-flex mx-2'>
    <h1 class='align-self-end'>Título</h1>
  </div>
</div>

  • Perfect... I didn’t know the flex classes. One more thing held about bootstrap. Thank you.

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.