unable to move form input field to center

Question

I am trying to build a small ToDo App. I am trying to place input field and submit button in the centre, but alignment going to left side.

#todo {
  align-items: center;
  text-align: center;
}

#todo .form-group {
  align-items: center;
  margin: auto;
}

#id-button {
  margin: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
  <p>
    <h3>Add New ToDo</h3>
    <div class="form-group">
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
</div>

JSFiddle

Any suggestions please?

Your example has them in the center, or ? what do you mean – ajobi May 09 '20 at 09:46 — ajobi, May 09 '20 at 09:46
@ajobi, Check my JSFiddle link in the bottom. – Raja G May 09 '20 at 09:47 — Raja G, May 09 '20 at 09:47

Manjuboyz · Accepted Answer · 2020-05-09T09:55:16.077

you can do something like this:

When you looking for centering the contents, then CSS has a beautiful class called flex and one of the property called justify-content:center; which will take care of the alignment.

More on Justify-content

add this:

#todo .form-group {
 display: flex;
 margin: 0 auto;     
 justify-content: center;
}

#todo {
  align-items: center;
  text-align: center;
}

#todo .form-group {
  display: flex;
  margin: 0 auto;
  justify-content: center;
}

#id-button {
  margin: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="todo">
  <p>
    <h3>
      Add New ToDo
    </h3>
    <div class="form-group">
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">
            Submit
            </button>
      </div>
    </div>
</div>

score 1 · Answer 2 · answered May 09 '20 at 09:55

You could either modify the css of the .form-group to the below as correctly pointed by below user. Justify-content is the proper way to solve it.

#todo .form-group {
  display: flex;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}

But since you're using bootstrap as a css framework. You could also add <div class="col-xs-4"></div> in the start of <div class="form-group"> as the first child. Refer Bootstrap docs for grid structure. Bootstrap Docs

score 0 · Answer 3 · answered May 09 '20 at 10:09

form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}     

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
  <p>
    <h3>Add New ToDo</h3>
    <div class="form-group">
      <div class="col-xs-4">
       <form>
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
       </form>
      </div>
    </div>
</div>

score 0 · Answer 4 · edited May 09 '20 at 12:49

I have a few notices on your code:

your <p> tag has no closing.
try removing the "form-group" <div> and class="col-xs-4".
resize the input and out a <br> tag. your code would be as you desired.

the col-xs-4 and (I think) form-group are Bootstrap classes that override whatever you are trying to do. So, either wrap your code in different <div> or override it in your CSS. Also if you want to use the col class you have to wrap that div in another <div> with "row" class.

unable to move form input field to center

4 Answers4