I'm facing a design challenge with my form, showcased in this fiddle: https://jsfiddle.net/ejkvp88v/2/. The inputs are centered, which is great, but I'm struggling to align the labels above the inputs on the left side. I've searched through S.O. for solutions without success. Can anyone provide guidance on achieving this? My HTML and CSS are included below.
In essence, I want the form inputs to stay centered while the labels are positioned above them aligned to the left.
Here's the structure of the form:
<div class="container">
<div class="base-template">
<h1>A form whose labels need some aligning</h1>
<p class="lead">Use the form below to submit some information.</p>
</div>
<div class="container">
<div class="table-responsive">
<div class="request-form-container">
<form action="" method="post" accept-charset="utf-8">
<label for="email" class="formLabel">E-Mail Address</label>
<br />
<input type="text" name="email" value="" id="email" size="30" />
<br />
<br />
<label for="firstName" class="formLabel">First Name</label>
<br />
<input type="text" name="firstName" value="" id="firstName" size="30" />
<br />
<br />
<label for="lastName" class="formLabel">Last Name</label>
<br />
<input type="text" name="lastName" value="" id="lastName" size="30" />
<br />
<br />
<button name="" type="submit" id="submitButton" class="btn btn-default btn-default">Submit <span class="glyphicon glyphicon-transfer"></span>
</button>
</form>
</div>
</div>
</div>
Below is the CSS file where I've made customizations specific to this project alongside Bootstrap styles.
body {
padding-top: 50px;
}
.base-template {
padding: 40px 15px;
text-align: center;
color: #060a84;
}
a {
color: #060a84;
}
.formLabel {
color: #060a84;
}
.request-form-container {
padding: 0.5em;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
.successMessage {
text-align: center;
}
.submitFormContainer {
margin-top: 1.6em;
}
#navbar {
background-color: #525eab;
}
.navbar-inverse {
background-color: #525eab;
}
.nav-bar-fixed-top {
background-color: #525eab;
}
.navbar-inverse .navbar-brand {
color: white;
}
.error {
color: red;
font-weight: bold;
font-size: 1.1em;
}
Lastly, here's a mockup image created in Photoshop illustrating how I envision the form layout.