Responsive Buttons with Bootstrap
Using Bootstrap, I found myself wanting to have a button that will change widths depending on the screen size. Here is what I believe to be the best solution. It works with Bootstrap 4 right out of the box.
The goal is to get a button to have a limited width unless the screen is small, in which case the button should expand to fit the entire width of the container.
I discovered this can be accomplished by adding the
[btn-block class](getbootstrap.com/docs/4.0/components/button..) to the button and placing it inside of a
<div> with the appropriate
col classes to size it at different breakpoints.
btn-block creates block level buttons — those that span the full width of a parent.
Here’s a simple example:
<div class="container my-5"> <h1>Mailing List</h1> <div class="form-group"> <input class="form-control" placeholder="Your email address"> </div> <div class="row"> <div class="col-md-4 col-lg-2"> <button class="btn btn-primary btn-block">Sign up</button> </div> </div> </div>
The button is inside a
col-lg-2classes. This means the
<div>will span 12/12 (100%) of its container by default, 4/12 (1/3) of its container on medium screens, and 2/12 (1/6) of its container on large screens.
btn-blockclass, which spans the full width of its container (which is the previously mentioned
The end result can be seen in this pen: