Offset & Center Container w/Bootstrap - html

Question

Im trying to center the header and input field with bootstrap. I cant get the input field to center with the header. If anyone has a better way of doing this let me know.
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-4 text-center">Weight Converter</h1>
<form>
<div class="form-group">
<input
id="lbsInput"
type="number"
class="form-control form-control-lg"
placeholder="Enter Weight..."
/>
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

you have incomplete HTML and no CSS. But based on what you have, a simple margin: auto; in CSS should center the element for you.
If you want more control you should look into flexbox. post more code and you'll get more help.
EDIT: thanks for the code: this works to center the input. I just verified it. let me know if you need any more help. cheers
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-4 text-center">Weight Converter</h1>
<form>
<div class="form-group" id="centerParent">
<input
id="lbsInput"
type="number"
class="form-control form-control-lg"
placeholder="Enter Weight..."
/>
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#centerParent {
display: flex;
flex-direction: row;
justify-content: center;
}
</style>