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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.