'Bootstrap btn-block not working

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>

http://i60.tinypic.com/2n7fpz5.png

twitter-bootstrap-3django-generic-views


Solution 1:[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

Solution 2:[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>

Solution 3:[3]

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

Solution 4:[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>

Solution 5:[5]

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

Solution 6:[6]

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>

Solution 7:[7]

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.

Solution 8:[8]

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

Solution 9:[9]

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

Solution 10:[10]

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

Solution 11:[11]

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.

Solution 12:[12]

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.

Solution 13:[13]

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

Solution 14:[14]

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

Solution 15:[15]

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>

Solution 16:[16]

Or maybe try the following:

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

Related Questions