Center Align Form In Bootstrap


Center Align Form In Bootstrap- Sometimes we need the centered Aligned form in bootstrap. There are many ways to center align the form you can use bootstrap’s inbuilt classes or you can create your own class to center align the form. Here in this tutorial we are going to explain how you can center align a form in Bootstrap. You can use online editor to see the output online.


How to Center Align Form In Bootstrap?

You can create the class custom-centered class to center align the form in bootstrap. Here is an example –

:Center Align Form In Bootstrap Example

<style type="text/css">
.custom-centered{
 margin:0 auto;
 width:300px;
}
</style>
<div class="col-lg-1">
 <form role="form" class="custom-centered" >
    <div class="form-group">
        <label for="firstname">Email</label>
        <input type="text" name= "Email" class="form-control" id="email"
               placeholder="Enter Email..">
    </div>
	<div class="form-group">
        <label for="firstname">Password</label>
        <input type="password" name="Password" class="form-control" id="password"
               placeholder="Enter Password">
    </div>
    
    <button type="submit" class="btn btn-primary">Login</button>
</form>
</div>

Try it »

The above classes will create a centered form. If you run the above example it will produce the output something like this –

Center Align Form In Bootstrap


Advertisements

Add Comment

📖 Read More