Fundamental HTML elements styled and enhanced with extensible classes.
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"); })
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()
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()
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> }
Included with Bootstrap are three optional form layouts for common use cases.
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> }
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> }
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> }
Html.LabelAndControl()
with horizontal forms will automatically take care of the required markup changes for labels/controlsWith 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).
Adding on top of existing browser controls, Bootstrap includes other useful form components.
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") }
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() }
Inline and block level support for help text that appears around form controls.
@Html.LabelAndControl("Inline", Html.TextBox("Inline")).HelpText("Inline help text") @Html.LabelAndControl("Block", Html.TextBox("Block")).HelpText("A longer block of help text...", false).