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 trial

CSS

Posted by Clifford Gagliardo
Clifford Gagliardo
Courses Plus Student 15,069 Points

Place 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
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

That'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
Clifford Gagliardo
Courses Plus Student 15,069 Points

Thank 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
Matt Brock
28,330 Points

Are you trying to get all of the buttons to line up horizontally?

Clifford Gagliardo
PLUS
Clifford Gagliardo
Courses Plus Student 15,069 Points
Clifford Gagliardo
Clifford Gagliardo
Courses Plus Student 15,069 Points

Yes.