Making button go full-width?

Question

I want a button to take up the full width of the column, but having difficulties...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

How do I make the button as wide as the column?

score 892 · Answer 1 · edited Apr 19 '18 at 18:43

892

Bootstrap v3 & v4

Use btn-block class on your button/element

Bootstrap v2

Use input-block-level class on your button/element

edited Apr 19 '18 at 18:43

Beau Smith

33,433
13
94
101

answered Nov 04 '13 at 21:43

Layke

51,422
11
85
111

13

For button groups you'll need to add `btn-block` to the `btn-group` wrapper as well. – Jesse Sep 23 '15 at 19:56
6

For bootstrap 5.1+, `btn-block` class doesn't exist anymore and won't work, check updated answer here: https://stackoverflow.com/questions/12061139/making-button-go-full-width/68974259#68974259 – Wadih M. Aug 29 '21 at 15:26
For Bootstrap 5.2+, we should use d-grid class. For example:
– Chen Hanhan Dec 02 '22 at 17:35

CodeAngry · Answer 2 · 2014-03-07T08:21:43.143

43

Why not use the Bootstrap predefined class input-block-level that does the job?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

Learn more here in the Control Sizing^ section.

edited Mar 07 '14 at 08:21

answered Jul 16 '13 at 23:51

CodeAngry

12,760
3
50
57

2

@fguillen **Not using BS anymore but try `form-control` class.** It appears to make things 100% wide in the samples. – CodeAngry Oct 16 '13 at 18:11
1

As of bs4, @Layke 's answer seems more up to date and covers bs 2, 3 and 4. Neither option above did anything useful for me on bs4. Apologize for being chatty with this, but the accepted answer doesn't seem a good idea and this one appears deprecated. – JL Peyret Apr 05 '17 at 23:39

Wadih M. · Answer 3 · 2022-03-15T14:35:31.583

In case some are noticing btn-block not working anymore in bootstrap 5.1+:

It was dropped in bootstrap 5.1 (changelog):

Breaking Dropped .btn-block for utilities. Instead of using .btn-block on the .btn, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples.

You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:

<button type="button" class="w-100 btn btn-lg btn-outline-primary">
    Sign up for free
</button>

Source: https://getbootstrap.com/docs/5.1/examples/pricing/

If you want to make a stack of block buttons, the official docs recommend the following :

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons

So how do you catch something like this? I spent over an hour trying to figure out why btn-block was no longer working! Do you track the change logs??? Thank you for the solution. — stromyc, Feb 11 '22 at 21:37
@stromyc same here, I was scratching my head for a while, and found out they had changed it. I guess it's always living and breathing, so have to keep an eye for those. — Wadih M., Feb 17 '22 at 21:03

WasiF · Answer 4 · 2020-09-07T15:12:22.007

Bootstrap / CSS

Use col-12, btn-block, w-100, form-control or width:100%

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

         <button class="btn btn-success col-12">
             class="col-12"
         </button>
    
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>

         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
         
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
         
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>

score 30 · Answer 5 · edited Jun 19 '18 at 02:06

30

I simply used this:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

edited Jun 19 '18 at 02:06

WasiF

26,101
16
120
128

answered Jun 23 '14 at 05:50

syn

341
3
6

1

This is the way to do it with btn-lg. form-control does not work. – Mark Swardstrom Jul 31 '14 at 21:02

score 12 · Answer 6 · edited May 26 '16 at 20:29

12

use

<div class="btn-group btn-group-justified">
  ...
</div>

but it only works for <a> elements and not <button> elements.

see: http://getbootstrap.com/components/#btn-groups-justified

edited May 26 '16 at 20:29

fracz

20,536
18
103
149

answered Dec 13 '13 at 14:05

noel

585
1
5
10

1

The question was about buttons not `btn-group`s, there is a more accepted response referring to `btn-block` class by Layke. – Hans Oct 12 '16 at 09:13

Kenny Bania · Answer 7 · 2012-08-22T15:11:35.047

10

You should add these styles to a CSS sheet

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Then change add the classes to your code

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.

edited Aug 22 '12 at 15:11

answered Aug 21 '12 at 19:14

Kenny Bania

637
6
18

I corrected a typo in my code, should have been div instead of span in the top css entry. Can you confirm the styles are being applied? Does the button's width change at all? – Kenny Bania Aug 22 '12 at 15:12
7

`btn-block` is the attribute that saved me! Was pulling my hair out.. Now I go back and search http://twitter.github.io/bootstrap/base-css.html#buttons, that attribute was documented there - doh ;) – GONeale Apr 15 '13 at 01:50

Discostu36 · Answer 8 · 2021-03-02T09:12:55.947

In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row"><div class=" col-5 ">
            <a class="btn btn-outline-primary w-100  " href="# "><span>Button 1</span></a> 
</div><div class="col-5 ">

            <a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a> 
</div></div>

score 6 · Answer 9 · edited Jun 20 '14 at 23:32

6

I would have thought this would be the most bootstrap-esque way of doing things:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

All I'm doing is adding the class col-xs-12 to the button.

edited Jun 20 '14 at 23:32

Alexis Wilke

19,179
10
84
156

answered Apr 03 '14 at 13:26

Starkers

10,273
21
95
158

score 5 · Answer 10 · answered Mar 06 '14 at 11:53

5

<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.

answered Mar 06 '14 at 11:53

kim3er

6,306
4
41
69

score 2 · Answer 11 · answered Oct 27 '22 at 21:17

Update 2022:

You have multiple ways to make button full width.

You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:

<div class="d-grid gap-2"> <!-- Here -->
  <button class="btn btn-primary" type="button">Button</button>
</div>

score 0 · Answer 12 · answered May 11 '21 at 09:35

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

         <button class="btn btn-success col-12">
             class="col-12"
         </button>
    
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>

         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
         
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
         
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>

score 0 · Answer 13 · answered Aug 29 '21 at 15:53

We can Use a Block Level Full-Width Button

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">
   Block level button
</button>

<button type="button" class="btn btn-secondary btn-lg btn-block">
   Block level button
</button>

score 0 · Answer 14 · answered Mar 07 '23 at 21:35

0

You can simply use the css property width: 100%:

<button style="width: 100%;">Test Button</button>

answered Mar 07 '23 at 21:35

User5486

11
2

Making button go full-width?

14 Answers14

Bootstrap v3 & v4

Bootstrap v2

Linked