Bootstrap Rows?

Question

I have a form and im getting confused with rows.

Where should I put in rows? Do I need them? Do I need one for a modal? One for the entire form or each form input?

Here's what I have:

<div class="container">
  <div id="modal" class="modal fade">
  //modal stuff
  </div><!-- /.modal -->

  <h1>Title Here</h1>
  <form id="content-add-form" class="form-horizontal" role="form" name="content-add-form" enctype="multipart/form-data">

   <div class="form-group">
        <label for="title" class="col-md-2 control-label">Title:</label>
        <div class="col-md-4">
            <input name="title" type="text" class="form-control" placeholder="Title">
        </div>
    </div>

    <div class="form-group">
        <label for="date" class="col-md-2 control-label">Date:</label>
        <div class="col-md-2">
            <div class='input-group date' id='date-picker'>
                <input type='text' class="form-control" name="date" value="{{ date("d-m-Y") }}" data-format="dd-MM-yyyy" readonly/>
                <span class="input-group-btn">
                    <button class="btn btn-default datepicker-invoker" type="button"><i class="icon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>


</form>

Answer 1

You use <div class="row"> whenever you start a section of cols for an example, lets say I have have 3 sections. The first row I require 12 columns. I wrap those twelve columns in a row I listed below an example counting to 12. The second I need 3 columns, In those columns lets say for an example I need a nav-menu, some text-content and an image, I will wrap the columns in a row. Same like the first two, the third column I need only a image and some content. I follow the same rules.

<div class="row">
  <div class="col-md-1">one</div>
  <div class="col-md-1">two</div>
  <div class="col-md-1">three</div>
  <div class="col-md-1">four</div>
  <div class="col-md-1">five</div>
  <div class="col-md-1">six</div>
  <div class="col-md-1">seven</div>
  <div class="col-md-1">eight</div>
  <div class="col-md-1">nine</div>
  <div class="col-md-1">ten</div>
  <div class="col-md-1">eleven</div>
  <div class="col-md-1">twelve</div>
</div>

<div class="row">
  <div class="col-md-4">nav-menu</div>
  <div class="col-md-4">content</div>
  <div class="col-md-4">image</div>
</div>

<div class="row">
  <div class="col-md-6">image</div>
  <div class="col-md-6">content</div>
</div>

Answer 2

You do need the rows because if you don't follow the structure defined in the documentation-

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">form</div>
    </div>
</div>

-the grid won't behave as expected. There are a couple ways of working around this, neither of them ideal.

1. You can wrap the form around the container and then create the whole grid structure inside that container putting your form groups inside the columns. You might have to set the form width to 100%. Another limitation is that your form groups need to be inside columns and can't wrap them. Therefore if you really need to control widths inside form groups then you need to create a new container inside the group. This is fairly easily managed if you wrap containers in columns with factors of 2, 4 or 6 then in is clear where the columns in your new container will align with the columns in the outer container.
2. Send your inputs using javascript. Then you don't need a form.

Answer 3

I think I can see the confusion. A form has many fields, on different rows, but you wouldn't necessarily use a Bootstrap "row" for each.

What we can do is use just one Bootstrap "row", and then put each label/field pair in its own div. Within that div the label and the field have their own divs, with Boostrap col- information. This will give us a form with many rows, and will give the desired wrapping effect you are expecting with Bootstrap.

The example below is an MVC form. Don't let the MVC syntax confuse you - you can replace the @Html.Label & Editor with HTML labels & input fields.

<div class="container">
    <div class="row">

    @using (Html.BeginForm("MyAction", "MyController", Model))
        {
        @Html.AntiForgeryToken()
            <div class="form-group">
                <div class="col-md-4">
                    @Html.LabelFor(model => model.PersonFirstName)
               </div>
                <div class="col-md-8">
                    @Html.EditorFor(model => model.PersonFirstName, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your first name" } })
                    @Html.ValidationMessageFor(model => model.PersonFirstName, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    @Html.LabelFor(model => model.PersonSurname)
               </div>
                <div class="col-md-8">
                    @Html.EditorFor(model => model.PersonSurname, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your surname" } })
                    @Html.ValidationMessageFor(model => model.PersonSurname, "", new { @class = "text-danger" })
                </div>
            </div>
        }
    </div>
</div>