26

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

4
  • 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? Apr 20, 2014 at 14:32
  • 1
    Where is the problem? It works fine. Apr 20, 2014 at 14:40
  • May I ask why are you using <tr> & <th> tags?
    – lozadaOmr
    Apr 20, 2014 at 15:36
  • I'm using django generic view. He creates these tr th. Apr 20, 2014 at 15:58

19 Answers 19

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

1
  • 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, 2021 at 12:00
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>
1
  • 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, 2021 at 22:18
7

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

<button type="submit" class="btn btn-primary w-100">Login</button>
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>
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>
2

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

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.

1

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

1
  • 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.
    – Community Bot
    Nov 30, 2021 at 21:04
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>
0

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

0

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

0

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.

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.

0

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

0

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

0

just add col-12 to the class.

btn-block doesn't work with bootstrap5


0

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>

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

Or maybe try the following:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.