display two input buttons in a form - html

Question

I come to you about an issue that I'm having with a contact form that I created using bootstrap see the jsfiddle below for a replica of my code...
My issue is the two buttons that I have for submit and clear are displaying on top of each other for some reason instead of inline next to each other...
I used CSS to format the form contents as table rows, columns and cells all contact labels are in one column and form fields in another (that's if I got my CSS coded properly) and I've put the form in a div with bootstrap class of col-md-6 which will only give it 50% width of the page...
Anyhow like I mentioned my issue is the two buttons are showing under the first column of the table under the labels which I guess is not giving it enough room and as a result the two buttons are stacked on top of each other my question is how would I go about showing the two buttons next to each other by using the full width of the form instead the width of the column??
Here is a link to my 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="[phone]" autocomplete="off">
</div>
<div class="form-group">
<label for="email">e-Mail: </label>
<input type="email" name="email" id="email" placeholder="name#email.ca" 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>

Answer 1

Here is the HTML5 & Bootstrap markup for your code....
/***********************************************************************************************/
/* Input Field */
/***********************************************************************************************/
input[type="text"],
input[type="name"],
input[type="phone"],
input[type="email"],
textarea {
border: none;
padding: 8px;
border-radius: 3px;
width:100%;
color: #454545;
font-size: 16px;
font-style: normal;
background-color: #F5F5F5;
}
input[type="text"]:hover:focus,
input[type="name"]:hover:focus,
input[type="phone"]:hover:focus,
input[type="email"]:hover:focus,
textarea:hover:focus {
padding: 8px;
border-radius: 3px;
min-width: 280px;
font-style: normal;
background: #F5F5F5;
}
/***********************************************************************************************/
/* Button & Reset */
/***********************************************************************************************/
input[type="submit"],
input[type="reset"],
button {
font-size: 16px;
font-weight: 300;
border: none;
padding: 10px 30px;
color: #ffffff;
border-radius: 2px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* prevents bg color from leaking outside the border */
background-color: #2FB7D5;
/* layer fill content */
-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
/* inner shadow */
-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
/* inner shadow */
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
/* inner shadow */
}
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
font-size: 16px;
font-weight: 300;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* prevents bg color from leaking outside the border */
background-color: #2FB7D5;
/* layer fill content */
-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
/* inner shadow */
-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
/* inner shadow */
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
/* inner shadow */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ================================================
Contact Form Start
================================================= -->
<section class="contact-form">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<form action="" method="post" name="form" id="form">
<p>
<label for="name">Name</label>
<input type="text" name="" id="name" placeholder="Name" required>
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" required>
</p>
<p>
<label for="message">Message</label>
<textarea name="" id="message" cols="40" rows="5" placeholder="Write here..." required></textarea>
</p>
<input type="submit" value="Send">
<input type="reset" value="Write Again">
</form>
</div>
</div>
</div>
</section>

Answer 2

You can use flex-box for this , here i updated your code please check the snippet and fiddle
#jumbotron-form {
display: block;
background-size: cover;
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%;
}
.submit {
display: flex;
}
.submit input {
margin-right: 20px;
}
<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="[phone]" autocomplete="off">
</div>
<div class="form-group">
<label for="email">e-Mail: </label>
<input type="email" name="email" id="email" placeholder="email#domain.com" 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 class="submit">
<input type="submit" value="Submit" id="submit">
<input type="reset" value="Clear">
</div>
</form>
</div>
</div>

Answer 3

Problem is because you used display: table in <form>. I modified your markup and css by adding another <div> wrapper for all .form-group elements.
Checkout it out: https://jsfiddle.net/nofuvqod/5/
Snippet:
#jumbotron-form {
display: block;
background-size: cover;
opacity: 0.90;
}
form {
text-align: left;
border-spacing: 0.25em;
}
.form-table{
display: table;
}
.form-group {
display: table-row;
}
label {
display: table-cell;
vertical-align: top;
}
input {
display: inline;
}
textarea {
width: 100%;
}
HTML
<div class="jumbotron" id="jumbotron-form">
<div class="col-md-6">
<form action="SUBMIT">
<div class="form-table">
<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="[phone]" autocomplete="off">
</div>
<div class="form-group">
<label for="email">e-Mail: </label>
<input type="email" name="email" id="email" placeholder="email#domain.com" 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>
<div>
<input type="submit" value="Submit" id="submit">
<input type="reset" value="Clear">
</div>
</form>
</div>
</div>

Answer 4

Use the button container with form-group class.
<div class="form-group">
<input type="submit" value="Submit" id="submit">
<input type="reset" value="Clear">
</div>