Menu
I'm using Bootstrap 3, and I have a fairly standard page layout: one wide column on the left (.col-md-8), containing plain text, and one narrower column on the right (.col-md-4), containing a form.
Each of the form fields, in turn, is wrapped in a .form-group.
In my first attempt, the .form-groups were spilling over the left and right edges of the containing column. (Make sure the JSFiddle preview frame is at least as wide as Bootstrap's sm breakpoint.) I've added a pink background div to show the box that the .form-groups should be staying within.
In my second attempt, I added a .container inside of the .col-md-4, then wrapped each .form-group inside of a .row and a .col-md-4.
This does the trick, but...is this the correct and preferred way? It seems like an awful lot of extra, boilerplate markup to achieve something that should just kinda happen naturally.
The Bootstrap docs are pretty good, but they gloss over some of the "big picture" stuff like this. Maybe this stuff is obvious to folks who are already experienced with responsive CSS, but it can be pretty confusing for a beginner like me.
Here's the code from my first attempt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
<div class="container">
<h1>Broken version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
And here's the code from my second, possibly corrected attempt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<div class="container">
<h1>Corrected (?) version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<div class="container">
<form role="form" class="form-horizontal">
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- .container -->
</div> <!-- .pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
402
Both previous answers lack reading the Bootstrap docs.
You are not required to use .form-horizontal so don't because this is not a .form-horizontal situation. Look at the docs for .form-horizontal examples, this is not where you would use that class. Use no class on your form then you don't need the .container to zero out the negative margin on the .form-group.
Same as yours without .form-horizontal and with without nested .container (read the docs).
also this:
<div class="form-group col-md-4">
is like putting a column class on a .row, it will mess things up significantly.
Just use:
<div class="form-group">
This should help (from the boostrap doc: http://getbootstrap.com/css/#forms-horizontal
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
so considering this you can clean up your html quite a bit - and you can also remove the container. Here's a fiddle to a little bit cleaner version of your form: http://jsfiddle.net/fr6p90ar/2/
<div class="col-md-4" style="background-color: pink;">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name"/>
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input class="text form-control" type="email" name="email" id="email"/>
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- .col-md-4 -->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
