Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialClifford Gagliardo
Courses Plus Student 15,069 PointsPlace item at bottom of bootstrap column.
I am using Bootstrap 4 and trying to align links at the bottom. Here is what I have so far:
<div class="col-lg-3 col-md-5 col-sm-12 issues-card">
<img src="img/angry.jpg.jpg" alt="angry voters">
<h1>How can you help?</h1>
<p>Attend meetings where we can talk about the issues that affect all of us</p>
<button>Join Us</button>
</div>
.issues-card {
padding-top: 1em;
margin-bottom: 1em;
background-color: white;
text-align:center;
border-radius: 5px;
h1 {
font-family: $headline-font;
}
img {
@include center;
width: 80%;
}
button {
@include btn;
position: absolute;
bottom: 0;
}
}
The poor button (actually just a link with background color) aligns with the bottom of the Bootstrap col, but now the button appears above the text. How can I get items to align at the bottom and not float above the text?
2 Answers
Matt Brock
28,330 PointsThat's because its position
property is set to absolute
. You could just remove that and it will move to the bottom of the card component. Here's a quick demo: https://codepen.io/mattpbrock/pen/VrmqWY.
Clifford Gagliardo
Courses Plus Student 15,069 PointsYes.
Clifford Gagliardo
Courses Plus Student 15,069 PointsClifford Gagliardo
Courses Plus Student 15,069 PointsThank you for the response. I tried that, but it seems like the buttons don't line up. I've shared my code for the whole website here so you can see: https://codepen.io/cliffardo/pen/vWgxxY
Matt Brock
28,330 PointsMatt Brock
28,330 PointsAre you trying to get all of the buttons to line up horizontally?