CODEWITHSUNDEEP
htmlcsstwitter-bootstrapforms
Aziz Bokhari
Aziz Bokhari

Reputation: 329

Centering form in Bootstrap?

I am having issues centering a form in Bootstrap. The form includes name and comment box including a post button.

This is what I have:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;"> 
  <label for="usr">Name:</label>
  <input type="text"  id="name" >
<br>
<br>
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
  <br>
  <button onClick ="myFunction()">Post</button>
  </form>
  <br>
  <ul id="adduserinput"></ul>
  </div>
</div>
</div>

</body>
</html>

When you run the code, the form only appears on the left side of the page. It won't center the page. Can anyone help me with this?

Upvotes: 1

Views: 1061

Answers (5)

Shidersz
Shidersz

Reputation: 17190

If you want to go with the Bootstrap way, then you can go with col and col offset classes. Also, try to avoid fixed width elements if you want it to be responsive on all screen sizes. Even more, use form-groups classes for wrap labels and they related input. I show you an example of this (you can play with the browser's width): 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <form id="Form" onsubmit="return false">
    <div class="col-sm-offset-3 col-sm-6">
      <br>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" type="text" id="name"/>
      </div>
      <div>
        <label for="comment">Comment:</label>
        <textarea class="form-control" rows="5" id="comment" style="resize:vertical"></textarea>
      </div>          
      <br>
      <button class="btn btn-primary" onClick="myFunction()">
        Post
      </button>  
    </div>
  </form>  
</div>

As you can note, the formulary is centered on small, medium and large screen sizes, but it use the full width on extra small devices. Hope this helps you.

Upvotes: 0

Abubakar Sambo
Abubakar Sambo

Reputation: 73

Like @MichaelvE said, the mx-auto works for Bootstrap 4, not 3. A method I use with 3 is adding the class text-center to the form tag (or wrapping them all inside a <div class="text-center">...</div>. Works fine for me.

Note: It does not center only text, as the name implies.

Upvotes: 0

Nattamai Jawaharlal Manikandan
Nattamai Jawaharlal Manikandan

Reputation: 226

This would help you in making your form center of page.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; // optional this is only to get full height
}

Upvotes: 3

MichaelvE
MichaelvE

Reputation: 2578

The mx-auto class does not work for Bootstrap 3. If you use Bootstrap 4, then it will work no problem. If you need to use Bootstrap 3, then put your own style with a margin: 0 auto;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="mx-auto" style="width: 200px;">
    <form id="Form" onsubmit="return false">
      <label for="usr">Name:</label>
      <input type="text" id="name">
      <br>
      <br>
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
      <br>
      <button onClick="myFunction()">Post</button>
    </form>
  </div>
  <br>
  <ul id="adduserinput">
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Upvotes: 1

UnpassableWizard
UnpassableWizard

Reputation: 1279

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">



  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    #Form {
      margin: 0 auto;
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="container">
    <form id="Form" onsubmit="return false">
      <div class="mx-auto" style="width: 200px;">
        <label for="usr">Name:</label>
        <input type="text" id="name">
        <br>
        <br>
        <label for="comment">Comment:</label>
        <textarea class="form-control" rows="5" id="comment"></textarea>
        <br>
        <button onClick="myFunction()">Post</button>
    </form>
    <br>
    <ul id="adduserinput"></ul>
    </div>
  </div>
  </div>

</body>

</html>

Upvotes: 2

Related Questions