Centering a form in bootstrap not working [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I'm trying to center my form inside a div but the methods I'm using are not working. I tried using the justify-content-center attribute as stated by the bootstrap documentation but it is not centering it. When I try to center it but applying display: flex and justify-content: center in my CSS on the box it's wrapped in the form losses its orientation and messes up. I can't figure out how to center it, where did I go wrong. Any help is appreciated. Thanks in advance.
.onlineRefilFormCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
width: 100%;
height: 90%;
}
.onlineRefillTitleCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
}
.onlineRefillForm {
position: absolute;
top: 20%;
width: 40%;
height: 80%;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.form-group {
padding-top: 5%;
}
.col-form-label {
font-weight: 600;
}
.form-check-input {
border: 2px solid;
}
.form-control {
width: 60%;
border: 2px solid;
}
.textarea {
margin-top: -10%;
margin-left: 17%;
border: 2px solid;
}
.radio1 {
margin-top: 3%;
margin-left: 20%;
}
.form-check-inline {
padding: 0%;
}
.OnlineSubmitBtnCon {
position: absolute;
bottom: 7%;
width: 100%;
height: 10%;
}
.OnlineSubmitBtnCon button {
margin-left: 35%;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="onlineRefilFormCon">
<div class="onlineRefillTitleCon">
<h2 class="onlineRefillTitle">Online Refill</h2>
</div>
<form class="onlineRefillForm" id="onlineRefillForm">
<div class="form-group row justify-content-center">
<label for="text-input" class="col-2 col-form-label">First Name</label>
<div class="col-10">
<input class="form-control" type="text" value="" id="text-input">
</div>
</div>
<div class="form-group row justify-content-center">
<label for="text-input" class="col-2 col-form-label">Last Name</label>
<div class="col-10">
<input class="form-control" type="text" value="" id="text-input">
</div>
</div>
<div class="form-group row justify-content-center">
<label for="date-input" class="col-2 col-form-label">Date</label>
<div class="col-10">
<input class="form-control" type="date" value="yyyy-mm-dd" id="date-input">
</div>
</div>
<div class="form-group row justify-content-center">
<label for="email-input" class="col-2 col-form-label">Email</label>
<div class="col-10">
<input class="form-control" type="email" value="" id="email-input">
</div>
</div>
<div class="form-check-inline radio1">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1"
value="option1" checked>
Pickup
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
value="option2">
Delivery
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
value="option2">
Mail
</label>
</div>
<div class="form-group justify-content-center">
<label for="textarea" class="col-2 col-form-label">Refill Details</label>
<textarea class="form-control textarea" rows="7" placeholder="Example: Lisinopril"></textarea>
</div>
<div class="OnlineSubmitBtnCon">
<button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">Submit</button>
</div>
</form>
</div>

Answer 1

If you want to align the form elements center, you should use text-align:center style. So you should add text-center bootstrap class into the elements which you want to align center.
Does it work for you?

Answer 2

Any chance it's because the link to the bootstrap styles is broken? When I tried the example code the url failed so I uploaded a new cdn link and the form appears centered.
.onlineRefilFormCon {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-weight: 600;
}
.onlineRefillForm {
display: flex;
flex-direction: column;
width: 40%;
padding: 48px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.form-group {
padding-top: 5%;
}
.form-check-input {
border: 2px solid;
}
.form-control {
width: 60%;
border: 2px solid;
}
.textarea {
margin-top: -10%;
margin-left: 17%;
border: 2px solid;
}
.radio1 {
margin-top: 3%;
margin-left: 20%;
}
.form-check-inline {
padding: 0%;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
<div class="onlineRefilFormCon">
<form class="onlineRefillForm" id="onlineRefillForm">
<label for="text-input">First Name </label>
<input type="text" value="" id="text-input" />
<br>
<label for="text-input">Last Name</label>
<input type="text" value="" id="text-input" />
<br>
<label for="date-input">Date</label>
<input type="date" value="yyyy-mm-dd" id="date-input" />
<br>
<label for="email-input">Email</label>
<input type="email" value="" id="email-input" />
<br>
<label>Pickup
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked /></label>
<br>
<label>Delivery
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /></label>
<br>
<label>Mail
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /></label>
<br>
<label for="textarea" class="col-2 col-form-label">Refill Details</label>
<textarea rows="7" placeholder="Example: Lisinopril"></textarea>
<br>
<button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">
Submit
</button>
</form>
</div>

Answer 3

Applying the style
margin-left:auto;margin-right:auto;
Will also center anything for future reference