Unordered

A list of items in which the order does not explicity matter.

@Html.List(l =>
{
    l.Item("Lorem ipsum dolor sit amet");
    l.Item("Consectetur adipiscing elit");
    l.Item("Integer molestie lorem at massa");
})

Ordered

A list of items in which the order does explicity matter. Just chain .Ordered()

@Html.List(l =>
{
    l.Item("Lorem ipsum dolor sit amet");
    l.Item("Consectetur adipiscing elit");
    l.Item("Integer molestie lorem at massa");
}).Ordered()

Unstyled

A list of items with no list-style or additional left padding. Just chain .Unstyled()

@Html.List(l =>
{
    l.Item("Lorem ipsum dolor sit amet");
    l.Item("Consectetur adipiscing elit");
    l.Item("Integer molestie lorem at massa");
}).Unstyled()

Default buttons

Use Html.Button() to create styled buttons. Configure additional settings by passing in a ButtonSettings parameter or through the overloads

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add Size = Size.Large, Size = Size.Small, or Size = Size.Small for additional sizes

<p>
    @Html.Button("Large Button", new ButtonSettings { Category = Category.Primary, Size = Size.Large })
    @Html.Button("Large Button", new ButtonSettings { Size = Size.Large })
</p>
<p>
    @Html.Button("Default Button", new ButtonSettings { Category = Category.Primary })
    @Html.Button("Default Button")
</p>
<p>
    @Html.Button("Small Button", new ButtonSettings { Category = Category.Primary, Size = Size.Small })
    @Html.Button("Small Button", new ButtonSettings { Size = Size.Small })
</p>
<p>
    @Html.Button("Mini Button", new ButtonSettings { Category = Category.Primary, Size = Size.Mini })
    @Html.Button("Mini Button", new ButtonSettings { Size = Size.Mini })
</p>

Create block level buttons—those that span the full width of a parent— by setting BlockLevel = true.

@Html.Button("Block level button", new ButtonSettings { Category = Category.Primary, Size = Size.Large, BlockLevel = true })
@Html.Button("Block level button", new ButtonSettings { Size = Size.Large, BlockLevel = true })

Disabled state

Make buttons look unclickable by fading them back 50% by setting Disabled = true

@Html.Button("Block level button", new ButtonSettings { Category = Category.Primary, Size = Size.Large, Disabled = true })
@Html.Button("Block level button", new ButtonSettings { Size = Size.Large, Disabled = true })

Heads up! Using Disabled = true on <a> elements is only for aesthetic; you must use custom JavaScript to disable links here.

Default styles

To use Bootstrap forms use using (Html.Form()) { ... }, in the same way that you would use using (Html.BeginForm()) { ... }. Individual form controls receive styling, resulting in stacked, left-aligned labels on top of form controls.

using (Html.Form()) {
    <legend>Legend</legend>
    @Html.LabelAndControl("Phone", Html.TextBox("Phone", null, new{placeholder="Give us yer number..."}))
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
        <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
}

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

Search form

Use Html.SearchForm() for an extra-rounded text input.

using (Html.SearchForm()) {
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
}

Inline form

Use Html.InlineForm() for left-aligned labels and inline-block controls for a compact layout.

using (Html.InlineForm()) {
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
    <label class="checkbox">
        <input type="checkbox"> Remember me
    </label>
    <button type="submit" class="btn">Sign in</button>
}

Horizontal form

Use Html.HorizontalForm() to right align labels and float them to the left, making them appear on the same line as controls:

using (Html.HorizontalForm())
{
    @Html.LabelAndControl("Email", Html.TextBox("Email", null, new{placeholder="Email"}))
    @Html.LabelAndControl("Password", Html.TextBox("Password"))
    <div class="control-group">
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox"> Remember me
            </label>
            <button type="submit" class="btn">Sign in</button>
        </div>
    </div>
}

Form controls

Labels

With the exception of checkboxes and radios, few input types require additional markup, and so existing form code can usually be reused with no changes.

It is recommended however to use Bootstrap Extension's Html.LabelAndControl() helper when rendering form controls, as it automatically adjusts the markup dependent on form type (notably horizontal forms).

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Prepended and appended inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

using (Html.Form())
{
    @Html.LabelAndControl(Html.TextBox("Prepend")).Prepend("Prepend")
    @Html.LabelAndControl(Html.TextBox("Append")).Append("Append")
    @Html.LabelAndControl(Html.TextBox("PrependAndAppend")).Prepend("Prepend").Append("Append")
}

Validation States

Bootstrap includes validation styles for error, warning, info, and success messages. To use, simply chain the appropriate method:

using (Html.HorizontalForm())
{
    @Html.LabelAndControl("Warning", "Input with warning", Html.TextBox("Warning")).Warning()
    @Html.LabelAndControl("Error", "Input with error", Html.TextBox("Error")).Error()
    @Html.LabelAndControl("Info", "Input with info", Html.TextBox("Info")).Info()
    @Html.LabelAndControl("Success", "Input with success", Html.TextBox("Success")).Success()
}