Base

Fundamental HTML elements styled and enhanced with extensible classes.

Unordered

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
@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()

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
@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()

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
@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

Button Category Description
null (default) Standard gray button with gradient
Category.Primary Provides extra visual weight and identifies the primary action in a set of buttons
Category.Info Used as an alternative to the default styles
Category.Success Indicates a successful or positive action
Category.Warning Indicates caution should be taken with this action
Category.Danger Indicates a dangerous or potentially negative action
Category.Inverse Alternate dark gray button, not tied to a semantic action or use
Category.Link Deemphasize a button by making it look like a link while maintaining button behavior

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.

Legend Example block-level help text here.
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>
}
Heads up! Using Html.LabelAndControl() with horizontal forms will automatically take care of the required markup changes for labels/controls

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.

Prepend

Append

PrependAppend
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()
}
Heads Up! Bootstrap currently only supports adding validation states to controls in horizontal forms

Help Text

Inline and block level support for help text that appears around form controls.

Inline help text A longer block of help text that breaks onto a new line and may extend beyond one line.
@Html.LabelAndControl("Inline", Html.TextBox("Inline")).HelpText("Inline help text")
@Html.LabelAndControl("Block", Html.TextBox("Block")).HelpText("A longer block of help text...", false).