CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Slim Hmidi
Slim Hmidi

Reputation: 57

How to center a form using Bootstrap?

I want to center a form containing two inputs(username and password):

<h2 align="center" >Authentication</h2>
<form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
    <div class="form-group" align="center">
        <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
        <div class="col-sm-6">
            <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
        </div>
    </div>  
    <div class="form-group">
        <label class="control-label col-sm-2" for="password">password<em>*</em></label>
        <div class="col-sm-6">            
            <input type="password" name="password" id="password" required="true" class="form-control"/> 
        </div>
    </div>
    <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-8">  
            <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
         </div>
     </div>     
</form>

but when I run the page, the form isn't in the center of the page. I added in the style.css:

.form-horizontal{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

but that didn't work.

Upvotes: 3

Views: 47387

Answers (4)

AngularJR
AngularJR

Reputation: 2762

Slim Hmidi Hi there, You were close with your class of .form-horizontal.

Using this will center the form in the middle of the page. 

.center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;  
}

You will just now need to adjust the col-sm-xx within the form to fill and work correctly at all screen sizes.

Here is a screenshot, the blue div that holds the form is centered horizontally.

center form

Here is the form with the classes in the form changed to fill and work on all screen sizes.

enter image description here 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>How to center a form using Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}      
.block {
  height: 300px;
  padding-top: 15px;  
  background-color: darkorange;
}  
.block2 {
  min-height: 160px;
  padding-top: 15px; 
} 
.center {
  position: absolute;
/*  top: 0;
  bottom: 0; */
  left: 0;
  right: 0;
  margin: auto;  
}
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 spacer"></div>
    


    <div class="container col-lg-12 block">
        
        <div class="row col-xs-6 block2 bg-primary center">
            
            <form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
            <div class="form-group" >
                <label class="control-label col-sm-3"  for="username">username<em>*</em></label>
                <div class="col-sm-8 col-xs-12">
                    <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
                </div>
            </div>  
            <div class="form-group">
                <label class="control-label col-sm-3" for="password">password<em>*</em></label>
                <div class="col-sm-8 col-xs-12">            
                    <input type="password" name="password" id="password" required="true" class="form-control"/> 
                </div>
            </div>
            <div class="form-group"> 
                <div class="col-sm-offset-2 col-sm-8">  
                    <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
                </div>
            </div>     
        </form>
        </div>
            
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
</body>
</html>

Upvotes: 2

Geoffrey
Geoffrey

Reputation: 467

To center a div on the page, you need to set the width of your container, then apply margin:0 auto; to it and it will center left and right on the page.

.form-horizontal{
    display:block;
    width:50%;
    margin:0 auto;
}

If you want to center text, just add text-center to the class of the div your text is in. Bootstrap will do the rest.

Edit 1

<div class="contact-form">
    <h2 align="center" >Authentication</h2>
    <form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
        <div class="form-group" align="center">
            <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
            <div class="col-sm-6">
                <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
            </div>
        </div>  
        <div class="form-group">
            <label class="control-label col-sm-2" for="password">password<em>*</em></label>
            <div class="col-sm-6">            
                <input type="password" name="password" id="password" required="true" class="form-control"/> 
            </div>
        </div>
        <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-8">  
                <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
            </div>
        </div>     
    </form>
</div>

Upvotes: 4

CAPS LOCK
CAPS LOCK

Reputation: 2040

Wrap the whole form in <div class="container">your form HTML</div>.

Like this: http://codepen.io/anon/pen/pJLrOq. Code centers form container to the middle of a site. Edit a CSS and input text's classes to get the layout you want.

Upvotes: 1

anon
anon

Reputation:

You can add text-align: center; in css .

Upvotes: 0

Related Questions