Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 769
user3553966 Avatar asked Sep 06 '25 03:09

user3553966


2 Answers

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

like image 167
imjoymhnt Avatar answered Sep 07 '25 22:09

imjoymhnt


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>
like image 26
kjdion84 Avatar answered Sep 07 '25 22:09

kjdion84