Seeking a solution for centering all form elements in the middle using Bootstrap. Attempts to adjust margin: 0 auto !important on the form-control class did not fully resolve padding/margin issues, especially with uneven spacing on input fields. Additionally, text area and button alignment remains stuck to the left. How can this responsive design challenge be effectively tackled?
https://i.sstatic.net/HDrqB.png
HTML:
<form class="form">
<h4 class="form-contactme">Contact Me</h4>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="firstName" class="form-inputlabel">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="First Name">
</div>
<div class="form-group col-sm-6">
<label for="lastName" class="form-inputlabel">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="email" class="form-inputlabel">Email</label>
<input type="email" class="form-control" id="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="770e180237120f161a071b125914181a">[email protected]</a>">
</div>
<div class="form-group col-sm-6">
<label for="phone" class="form-inputlabel">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
</div>
<div class="form-row">
<div class="form-group">
<label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
<textarea type="text" class="form-control" id="messageBox"></textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Scss:
.form{
padding:3% !important;
background-color:#9fd199;
margin-bottom:5%;
&-contactme{
font-size:1.8rem;
font-weight:900;
text-align:center;
margin-bottom:15%;
}
&-row{
width:100%;
}
&-inputlabel{
display:none;
}
&-control{
margin-left:0 auto !important;
}
}