Twitter Bootstrap Question posted in

twitter bootstrap centered login form

im using twitter bootstrap 3 and trying to center login form.

Example is here http://jsfiddle.net/0y848kf8/.

form is like this

<div id="loginContainer" class="container">
    <h2>Sign in</h2>

    <form action="/www/sign/in" method="post" class="form-horizontal" id="frm-signInForm">               
        <div class="form-group"><label for="frm-signInForm-username" class=" control-label col-sm-2">Username:</label>
            <div class="col-sm-5"><input type="text" name="username" id="frm-signInForm-username" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Please enter your username.&quot;}]" value="" class="form-control"></div>                    
        </div>
        <div class="form-group"><label for="frm-signInForm-password" class=" control-label col-sm-2">Password:</label>
            <div class="col-sm-5"><input type="password" name="password" id="frm-signInForm-password" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Please enter your password.&quot;}]" class="form-control"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-5">
                <input type="submit" name="send" id="frm-signInForm-send" value="Sign in" class="btn btn-default">
            </div>
        </div>
        <div><input type="hidden" name="do" value="signInForm-submit"></div>
    </form>
</div>

And im curious why pagination-center class not working on loginContainer and why form-groups have such big width. I thought that centering with bootstrap will be easy, but i must make some mistake.

Tags:

2

Answers


  1. 0

    Try this

    http://jsfiddle.net/scaisEdge/bhk7n3ar/

     <div id="loginContainer" class="container">

  <h2 class="text-center">Sign in</h2>

    and change width of the field

    Login or Signup to reply.
  2. 0

    Here is a basic use scenario to center the form using css media queries. You originally had div id="container-fluid" (you’ll want class not id) which is a full-width container so you’ll want div class="container" to utilize the bootstrap default css.

    Let me know if this helps at all.

    input[type="text"],
input[type="password"],
.form-control {
  box-shadow: none;
  padding: 4px 0px 0px 10px;
  height: 40px;
  width: 100%;
  font-size: 16px;
  color: #33342e;
  border: 1px solid #1c1c1c;
  border-radius: 1px;
  line-height: 100%;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#contact-form {
  padding: 15px 350px;
  color: #1c1c1c;
  font-size: 16px;
}
.btn-submit {
  color: #fff;
  background-color: #1c1c1c;
  border-color: #fff;
  width: 100%;
  height: 45px;
  font-size: 20px;
  font-weight: 500;
  margin: 5px 0px;
}
.btn-submit:hover {
  color: #F00;
  background-color: #FFF;
  border: 2px solid #1c1c1c;
}
@media (max-width: 992px) {
  #contact-form {
    padding: 15px 50px;
  }
}
@media (max-width: 480px) {
  #contact-form {
    padding: 15px 0px;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="contact-form" name="contact-form" class="contact-form">
    <fieldset>
      <div class="row">
        <div class="col-lg-12 form-group">
          <h2>Sign In</h2>

          <label for="user">Username</label>
          <input class="form-control" type="text" value="" name="user" placeholder="Username" aria-required="true" />
        </div>
        <div class="col-lg-12 form-group">
          <label for="Password">Password</label>
          <input class="fom-control" type="text" value="" name="password" placeholder="Password" aria-required="true" />
        </div>
        <div class="col-lg-12 form-group">
          <input type="submit" class="btn btn-submit" />
        </div>
      </div>
      <!--end row-->
    </fieldset>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search