greenie2600 greenie2600 - 3 months ago 14
CSS Question

Bootstrap 3: How are form-groups meant to be used inside of columns?

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>

Answer

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.

http://jsfiddle.net/fr6p90ar/6/

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">