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>

Do you mean `
`? You only need them if you're using the [grid system](http://getbootstrap.com/css/#grid). — RichardTowers, Oct 02 '13 at 13:56
Yes. I mean that. I am using the grid system. How do I use them? — panthro, Oct 02 '13 at 14:07
Rows are just what they sound like, they are rows. You use them when you want to separate information horizontally in bootstrap's grid layout. See the docs section here for an example of how they expect you to use them: http://getbootstrap.com/css/#grid-example-basic — DigTheDoug, Oct 02 '13 at 14:35

score 15 · Answer 1 · answered Oct 02 '13 at 14:45

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>

visit: http://www.getbootstrap.com All documentation is there. Your current form needs major editing and I cannot edit without more content and an idea of placement. — SethCodes, Oct 02 '13 at 16:25
The information is not on that site. It just provides examples of forms, not how to use them with rows. — panthro, Oct 02 '13 at 16:40
It doesn't have to be exactly 12. More is ok too: http://stackoverflow.com/questions/23502342/bootstrap-3-grid-does-it-really-matter-how-many-columns-are-in-a-row — Carol Skelly, Sep 25 '16 at 11:30

score 3 · Answer 2 · answered Apr 03 '14 at 00:32

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.

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.
Send your inputs using javascript. Then you don't need a form.

score 2 · Answer 3 · answered Aug 07 '15 at 09:21

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>

Bootstrap Rows?

3 Answers3