Bootstrap btn-block not working

Question

I'm trying to expand the submit button so that it is the size of the password field. I am using the code btn-block but it's not working.

<div class="container">
  <div class="row" style="margin-top:60px;">
    <div class="col-md-4 col-md-offset-4">


      <div class="span12" style="text-align:center; margin: 0 auto;">
        <form class="form-horizontal" style="width: 400px; margin: 0 auto;" method="post">
          <fieldset>
            <h3 style="color:dimgray;" class="sign-up-title">
              Bem-vindo de volta! Efetue seu login
            </h3>
            <hr class="colorgraph">
            <legend>
              Efetue seu login
            </legend>
            <div style='display:none'>
              <input type='hidden' name='csrfmiddlewaretoken' value='ImQqDNXbmiVQKGo3OsZlrepAzwfAu70B' />
            </div>
            <tr>
              <th>
                <label for="id_username">
                  Usuário:
                </label>
              </th>
              <td>
                <input id="id_username" type="text" name="username" maxlength="30" />
              </td>
            </tr>
            <tr>
              <th>
                <label for="id_password">
                  Senha:
                </label>
              </th>
              <td>
                <input type="password" name="password" id="id_password" />
              </td>
            </tr>

            <div  class="buttonHolder">
              <input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

btn-block makes the button a block-level element. This makes it span the width of it's parent. What does it look like now? — Patrick Allen, Apr 20 '14 at 14:32

score 64 · Answer 1 · answered Jan 02 '21 at 12:43

64

In Bootstrap 5.0.x, btn-block is depreciated, and to get a full width button you can use a grid system and use col-12 in the button class.

you can check out the documentation from bootstrap documentation page

answered Jan 02 '21 at 12:43

imjoymhnt

1,011
11
14

4

It likely has been removed if it is not working. Deprecated means it is still there and will be removed in the future. – Binarian Aug 25 '21 at 12:00

score 56 · Answer 2 · answered Feb 02 '21 at 14:51

56

People from google, just add w-100 to your button to make it full width (the way btn-block used to work):

<button type="submit" class="btn btn-primary w-100">Login</button>

answered Feb 02 '21 at 14:51

kjdion84

9,552
8
60
87

This doesn't work properly as it doesn't take into account the padding of the button - making the inner width 100%, while the padding will be added on top of it, making the button get out of bounds. – Ghadir Aug 17 '21 at 22:18

score 7 · Answer 3 · edited Dec 05 '22 at 23:19

7

Works once you add w-100 to the button class.

<button type="submit" class="btn btn-primary w-100">Login</button>

edited Dec 05 '22 at 23:19

miken32

42,008
16
111
154

answered Mar 10 '21 at 23:44

Chidozie Duru

142
1
8

score 5 · Answer 4 · answered Aug 17 '21 at 13:27

5

Why not follow the official documentation of Bootstrap 5

Just add d-grid class in outer div

d-grid

Full syntax

 <div class="row mb-3">
     <div class="d-grid">
       <button class="btn btn-primary">Submit</button>
     </div>
 </div>

answered Aug 17 '21 at 13:27

Hadayat Niazi

1,991
3
16
28

Farhad.h · Answer 5 · 2022-01-22T18:08:13.203

4

The btn-block class is a combination of display: block and width: 100%, so we must use the d-block w-100 classes. Of course, if it is necessary to use ‍‍‍‍‍‍‍‍display: block‍, otherwise w-100 is enough

<div class="buttonHolder">
    <input type="submit" value="Entrar" class="btn btn-large btn-success w-100 d-block" id="submit-login"/>
</div>

edited Jan 22 '22 at 18:08

answered Jan 22 '22 at 08:46

Farhad.h

51
3

score 2 · Answer 6 · answered Jun 10 '21 at 15:53

2

Use "col-12" or use "w-100". Both will work at making a button full width relative to it's container.

answered Jun 10 '21 at 15:53

Ed DeGagne

3,250
1
30
46

score 1 · Answer 7 · answered Jan 26 '19 at 19:37

1

I had the same problem but my btn-block wasn't working within a modal. This was because the button was in bootstrap 4's footer. Once I moved it to the modal's body, it worked just fine. I hope this might help someone.

answered Jan 26 '19 at 19:37

Paula

389
1
6
23

score 1 · Answer 8 · answered Nov 29 '21 at 22:02

1

try to use w-100 inside class like that <button type="submit" class="btn btn-primary w-100">Login</button>

answered Nov 29 '21 at 22:02

hamza houri

19
9

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 30 '21 at 21:04

score 1 · Answer 9 · answered May 30 '22 at 12:07

1

You can use this method in Bootstrap version 5

<div class="w-100">
    <button class="btn btn-primary w-100" type="button">Button</button>
</div>

answered May 30 '22 at 12:07

Fahimeh Ahmadi

813
8
13

score 0 · Answer 10 · answered Aug 16 '14 at 21:34

0

set the display value to inline-block and it should work.

answered Aug 16 '14 at 21:34

waahhhh

1

jidexl21 · Answer 11 · 2019-03-12T13:24:03.080

I had the same Issue where btn-block was not working in bootstrap 4, in a modal-body. the Issue was that it was inside in a column <div class="col-xs-12"> and that parent element was not filling the expected 100%. The fix was to replace the col-xs-12 with col so the parent looks like this after the fix <div class="col-xs-12">. The root cause is that the styling is using flexbox. To have better understanding see the documentation for bootstrap 4 here... Bootstrap 4 Grid Documentation

For the solution of the above, you should add the col class to the buttonHolder or replace buttonHolder with col completely

score 0 · Answer 12 · answered Dec 09 '19 at 03:41

btn-block refer to their parent( div with class="buttonHolder"), which their size fit with "Entrar" word.

<div class="buttonHolder"> <input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/> </div>

So, delete their div (div with class="buttonHolder") and Button with btn-block can have same size with the password field.

score 0 · Answer 13 · edited Dec 01 '20 at 00:46

0

You can use the .col-bg-12 class and it will work the same as block. I had this same problem but using this solved it so hopefully it will be helpful to you too.

edited Dec 01 '20 at 00:46

TheFunk

981
11
39

answered Nov 30 '20 at 13:59

Harit Shandilya

11

score 0 · Answer 14 · answered Jan 05 '21 at 04:48

0

The simple method will be just give col-12 to the btn class

answered Jan 05 '21 at 04:48

BRAVO

1

dgkntkn · Answer 15 · 2022-02-18T11:15:56.160

0

U can use class=btn h-100, class=btn col-12 or in div tag d-grid``

edited Feb 18 '22 at 11:15

answered Feb 16 '22 at 14:36

dgkntkn

1
2

score 0 · Answer 16 · edited Dec 19 '22 at 08:41

0

just add col-12 to the class.

btn-block doesn't work with bootstrap5

edited Dec 19 '22 at 08:41

Suraj Rao

29,388
11
94
103

answered Dec 19 '22 at 08:35

Abhay Gaur

21
7

blueflyer · Answer 17 · 2023-03-10T23:43:42.063

in Bootstrap 5 btn-block is deprecated, visit https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons for options for using btn-block. Use display and gap utilities for block display of buttons, below is an example from the above link

<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>

score 0 · Answer 18 · edited Mar 22 '23 at 18:38

0

I'm just facing a similar situation here, d-block doesn't work in bootstrap5, so using w-100, will give the button a width of 100% the parental allowance.

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

edited Mar 22 '23 at 18:38

Tyler2P

2,324
26
22
31

answered Mar 16 '23 at 12:13

victor robin

11
3

score -1 · Answer 19 · edited Jan 13 '21 at 11:22

-1

Or maybe try the following:

<a href="#" class="btn btn-success btn-toolbar d-flex justify-content-center">Confirm</a>

edited Jan 13 '21 at 11:22

Skully

2,882
3
20
31

answered Jan 12 '21 at 23:28

Osman Can Kucuk

11

Bootstrap btn-block not working

19 Answers19