I have a user profile form that is compact in size.
The issue is: the form/fields are small but the page itself is large. I don't want these fields to take up the entire page.
My solution is to make the fields even smaller.
The current layout allocates 2/12 of the space to the menu and 10/12 to the form.
One option is to place the form inside a smaller column, like 4/12 or 5/12. However, this poses a problem when the page is viewed on a smartphone as the form should then occupy the full page once again, like 10/12.
Location of the page:
Here is the code:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<ul class="list-group">
<a href="#" class="list-group-item"><strong>Profile</strong></a>
<a href="my-account-password.html" class="list-group-item">Password</a>
</ul>
</div> <!--/col-md-2-->
<div class="col-md-10">
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E.">
</div>
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote">
</div>
<div class="form-group">
<label for="inputTitle">Title:</label>
<input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26514f4a4f436647454b43454954560845494b">[email protected]</a>">
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Notifications:</label>
<select class="form-control" id="selectEmailNotifications">
<option>None</option>
<option>Daily</option>
<option>Weekly</option>
<option selected>Monthly</option>
</select>
<p class="help-block">Receive email notifications with all the most important metrics of your business.</p>
</div>
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button>
</form>
</div> <!--/col-md-10-->
</div><!--/row -->
</div><!--col-md-12-->
</div><!--/row-->