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>

Threadbare

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? – Footlights

Where is the problem? It works fine. – Hbomb

May I ask why are you using <tr> & <th> tags? – Occiput

I'm using django generic view. He creates these tr th. – Threadbare

Answer 1

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

Thoracotomy

It likely has been removed if it is not working. Deprecated means it is still there and will be removed in the future. – Vassili

Answer 2

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>

Amidships

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. – Sephira

Answer 3

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

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

Isisiskenderun

Answer 4

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>

Miscellany

Answer 5

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>

Forever

Answer 6

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

Immersed

Answer 7

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

Tantalizing

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. – Drollery

Answer 8

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>

Howitzer

Answer 9

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.

Brasilin

Answer 10

just add col-12 to the class.

btn-block doesn't work with bootstrap5

---

Fiann

Answer 11

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>

Lucid

Answer 12

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

Hydrometeor

Answer 13

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

Outhe

Answer 14

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.

Salaidh

Answer 15

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.

Assagai

Answer 16

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

Garamond

Answer 17

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

Mcglynn

Answer 18

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>

Clearly

Answer 19

Or maybe try the following:

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

Wheeling