[FIXED] How do I make this bootstrap 4 full-span row responsive on small screens?

Issue

I've problems with this Bootstrap 4 full-span row definition:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
  <div class="container my-5">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
      </div>
      <div class="col-lg-6 col-md-12 p-4">
        <div style="position: absolute; bottom: 0;"> <!-- this breaks responsiveness -->
          <h2>Together, we empower software development around the world.</h2>
          <p class="lead py-2">Join our unique team of developers.</p>
        </div>
      </div>
    </div>
  </div>
</div>

It works properly WITHOUT the right column bottom alignment as in the following code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
  <div class="container my-5">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
      </div>
      <div class="col-lg-6 col-md-12 p-4">
        <h2>Together, we empower software development around the world.</h2>
        <p class="lead py-2">Join our unique team of developers.</p>
      </div>
    </div>
  </div>
</div>

How can I align the right column content bottom without breaking responsiveness? On my page the columns content overlap instead of splitting in two independent lines.

Solution

You may achieve your goal by adding align-self-end class to the second column.

Here's a live demo:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container my-5">
  <div class="row mx-0">
    <div class="col-lg-6 col-md-12">
      <img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
    </div>
    <div class="col-lg-6 col-md-12 align-self-end">
      <h2>Together, we empower software development around the world.</h2>
      <p class="lead mb-0 pt-2">Join our unique team of developers.</p>
    </div>
  </div>
</div>

You may play with margins and paddings the way you see fit, I have removed the paddings and margins from the second column's content.

I have also removed some unnecessary tags as the task can be achieved without any extra markup. Some tags that were removed are actually wrong (only the closing tags is present so the tag is assumed a typo and I removed it).

Answered By - ths

Answer Checked By - Mary Flores (PHPFixing Volunteer)