Making button go full-width?

Bootstrap: going full-width in style

Bootstrap can make your buttons full-width without breaking a sweat. To expand a button to full column width in Bootstrap v3 & v4, leverage the magic of .btn-block:

<button class="btn btn-primary btn-block">Full Width Button</button>


For lovers of Bootstrap v2, .input-block-level will work amazingly for you:

<button class="input-block-level">Full Width Button</button>


Warning: Bootstrap 5.1 users may have asked, "Where is .btn-block?" It's been shown the door. Use .w-100 instead:

<button class="btn btn-primary w-100">Full Width Button</button>


When dealing with forms, the .form-control class moonlights as a full-width button enforcer—remember this for your form elements:

<button class="form-control">Full Width Button</button>


Grid layout and responsiveness: playing nice with different screen sizes

For that grid layout feeling, .col-12 ensures your button isn't missing out on much—let it soak up all that column space:

<div class="row">
  <div class="col-12">
    <button class="btn btn-primary w-100">Full Width Button</button>
  </div>
</div>


And for when things get cramped on medium devices, .col-md-12 has got your button's back:

<div class="row">
  <div class="col-md-12">
    <button class="btn btn-primary w-100">Full Width Button</button>
  </div>
</div>


Make sure to have the Bootstrap CSS link in your HTML to benefit from Bootstrap's stylish classes.

No Bootstrap? No problem: straight from the CSS mines

Without Bootstrap, you can still mine for full-width glory by using inline styles:

<button style="width: 100%;">Full Width Button</button>


This is the CSS equivalent of a quick-fixed leak—it gets the job done, but it's not pretty under the hood. For more maintainability, consider using class selectors:

.full-width-button {
  width: 100%;
  display: block; /* You wish `display: taco` was a thing, right? */
  box-sizing: border-box; /* Get that padding and border under control, like herding cats */
}


Then, dress your button in its new suit:

<button class="full-width-button">Full Width Button</button>


Say you're working with a grid. You can tailor your classes for specific breakpoints like a well-fitted tuxedo. Use classes like .col-md-4 and .col-12 inside your grid layout for a customized responsive flair.

Visualisation Imagine your device's screen as a canvas and your button as elastic:

Before Stretching:   | Button |
                     |        |
Screen (canvas size): |------------------|

By applying width: 100%, we want to transform it to cover the entire width:

button {
    width: 100%; /* Triggers an extreme workout for the button */
}


And voila, you've got a stretched out, full-width button:

After sweating (ahem, stretching):    |------------------|
                                       |    Full Width    |
Screen (canvas size):                  |------------------|

Remember, a day in the gym (or in this case, a dose of CSS) and you can have that full-width button you always wanted!