unable to move form input field to center [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Center a column using Twitter Bootstrap 3
(34 answers)
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 2 years ago.
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?

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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.