Trying to understand how horizontal forms work

Question

I have the following form:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h5>Some text
    </h5>
    <hr />

    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

I understand that when the browser view port is medium or larger, the label will appear on the same line as the associated control. What I don't understand is why, when the view port is small or xs, does the form revert to a vertical form? I'm not specifically telling it to do this. Is this just default bootstrap behavior? Also, if I were to remove all the col-md-2 and col-md-10 classes, the form always displays as a vertical form. Why?

FYI, if you're asking an HTML or CSS question, it's usually better to show the actual HTML that's output to the browser, not your un-compiled source-code. Only show the source if that's what you're asking about. — Olly Hodgson

Olly Hodgson Olly Hodgson · Accepted Answer · 2014-03-27T17:54:07

Is this just default bootstrap behavior?

Yes. As the screen gets smaller, the layout collapses to make it fit.

Also, if I were to remove all the col-md-2 and col-md-10 classes, the form always displays as a vertical form. Why?

Bootstrap 3 is a mobile-first layout framework. The default layout is vertical, so it will fit on a mobile-sized screen. The -md- bit of col-md-2 means "medium sized screen" (by default that's 992px wide and upwards). So .col-md-2 means "2 (out of 12) columns on a medium-sized screen".

You can add more classes (e.g. col-sm-2, col-xs-2 and col-lg-2 for small, xtra-small and large screens) to adjust your layout for other screen sizes.

Go and have a good read of http://getbootstrap.com/css/#grid and play with the examples. It tells you everything you need to know.

Trying to understand how horizontal forms work

1 Answers