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

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 >
  <div >
    <div >
      <div >
        <img  src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
      </div>
      <div >
        <div style="position: absolute; bottom: 0;"> <!-- this breaks responsiveness -->
          <h2>Together, we empower software development around the world.</h2>
          <p >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 >
  <div >
    <div >
      <div >
        <img  src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
      </div>
      <div >
        <h2>Together, we empower software development around the world.</h2>
        <p >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.

CodePudding user response：

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 >
  <div >
    <div >
      <img  src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
    </div>
    <div >
      <h2>Together, we empower software development around the world.</h2>
      <p >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 that the task can be achieved without any extra markup. Some tags that were removed are actually wrong (only the closing tags is present so he tag is assumed a typo and I removed it).

CodePudding user response：

Use align-items-end. I changed paddings, otherwise you have so much padding that it doesn't look like the text is aligned to the bottom.

See the snippet below.

<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 >
  <div >
    <div >
      <div >
        <img  src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
      </div>
      <div >
        <div>
          <h2>Together, we empower software development around the world.</h2>
          <p >Join our unique team of developers.</p>
        </div>
      </div>
    </div>
  </div>
</div>