Seeking assistance with a contact form I created using bootstrap. The issue lies in the placement of the submit and clear buttons, which are currently stacked on top of each other instead of being displayed inline next to each other.
The form contents are formatted in table rows and columns, with contact labels in one column and form fields in another. The form is enclosed in a div with a bootstrap class of col-md-6 for 50% width of the page.
The problem arises from the buttons being placed under the first column of the table, occupying insufficient room. My query is how to display the two buttons next to each other across the full width of the form rather than the column width.
View the replicated code on jsfiddle: https://jsfiddle.net/neenus/nofuvqod/3/
#jumbotron-form {
display: block;
opacity: 0.90;
}
form {
text-align: left;
display: table;
border-spacing: 0.25em;
}
.form-group {
display: table-row;
}
label {
display: table-cell;
vertical-align: top;
}
input {
display: inline;
}
textarea {
width: 100%;
}<div class="jumbotron" id="jumbotron-form">
<div class="col-md-6">
<form action="SUBMIT">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" id="name" placeholder="enter your name" autocomplete="off">
</div>
<div class="form-group">
<label for="tel">Telephone: </label>
<input type="tel" name="tel" pattern="Telephone" id="tel" placeholder="(999) 999-9999" autocomplete="off">
</div>
<div class="form-group">
<label for="email">e-Mail: </label>
<input type="email" name="email" id="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b252a262e0b2e262a222765282a">[email protected]</a>" autocomplete="off">
</div>
<div class="form-group">
<label for="usrmsg">Message: </label>
<textarea name="message" id="usrmsg" cols="50" rows="5" placeholder="enter your message here..."></textarea>
</div>
<div>
<input type="submit" value="Submit" id="submit">
<input type="reset" value="Clear">
</div>
</form>
</div>
</div>