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 Framework Basics Prototyping with Bootstrap Building a Header, Navigation, and Jumbotron Component

Posted by Nijad Kifayeh
Nijad Kifayeh
6,092 Points

Bootstrap button sizes

lets say I have two links that I want to turn into buttons: 

<div class="btn-group" role="group">
                <a href="#" class = "btn btn-primary btn-lg">Download the app</a>   
                <a href="#" class = "btn btn-warning btn-lg" disabled="disabled">Text me the link</a>
            </div>

In dekstop mode they look fine, however in mobile view the first box is wider (since it has more text in it).
What is the easiest way to ensure both boxes have the same width?

1 Answer

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

You can use the .btn-block class on the button, so that it expands to the parent's width.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
Nijad Kifayeh
Nijad Kifayeh
6,092 Points

I considered that, and it works very well in mobile mode, but when expanded to desktop mode the buttons stay stacked since they're now block level elements;
One workaround would be to add the btn-block class in the base code then remove it via a media query at the larger breakpoints, but I was wondering if there is a better way of addressing this....