On my website, I have two large buttons (btn-lg) - one is placed at the top of the page with a hidden form beneath it (initially set to display: none), and the other button is below that with another hidden form. When clicked, the buttons reveal their respective forms.
My issue arises when I attempt to center the buttons on the page while maintaining the current positioning of the forms. I tried surrounding the buttons with a div having a class of col-xs-12 and setting the text-align property to center, which successfully center aligns the buttons. However, upon toggling the form using a button click, the forms are pushed against the right side of the page, disrupting their layout!
The problem seems to occur after enclosing both buttons within the div, not around the form. The structure of the form consists of form-groups similar to this:
<div class="form-group">
<label for="inputInsured" class="col-lg-2 control-label"> Name of insured(s)</label>
<div class="col-lg-10">
<input class="form-control" id="inputInsured" name="name" placeholder="" type="text">
</div>
</div>
The form elements only include classes like col-lg-10 and col-lg-2 as shown in the form-group above. Does anyone have insight into what might be causing this issue?