TwitterBootstrapMVC

Development for ASP.NET MVC with Bootstrap made simple.

Some of the Bootstrap components rely on JavaScript. We've built a simple JavaScript library to help you with these. Download it here.

BMVC makes use of fluent syntax allowing for chaining.

Consider the following example:

@(Html.Bootstrap().LabelFor(m => m.Amount)
    .LabelText("Amount Left")
    .ShowRequiredStar(true))
@(Html.Bootstrap().TextBoxFor(m => m.Amount)
    .Placeholder("amount in dollars")
    .Prepend("$")
    .Append(".00")
    .Append(Html.Bootstrap().Button().Text("Save")))

This code will give you the following HTML output:

<label for="Amount">
    Amount Left<span class="required">*</span>
</label>
<div class="input-prepend input-append">
    <span class="add-on">$</span>
    <input id="Amount" name="Amount" 
      placeholder="amount in dollars" type="text" value="10">
    <span class="add-on">.00</span>
    <button class="btn" type="button">Save</button>
</div>

...which will look like this:

$.00

Most of the BMVC controls have some chaining methods in common. For the sake of DRY principle I will discuss them here.

.Label()
Assures that input will have label.
This method can be applied to any BMVC input (textbox, checkbox...). When it's applied, the input will be rendered with a label. Once used, chain of extension methods changes to the chain of label.
.Id("cool-element")
Sets id html attribute to the element.
.Class("cool-css-class")
Assures that specified class will be applied to the element.
.HtmlAttributes(new { @readonly = "readonly" })
Applies specified html attributes to the element. Optionally IDictionary<string, object> is accepted as a parameter.
In this case readonly="readonly" attribute will be applied.
.Data(new { id = "item1" })
Works similar to .HtmlAttributes(), but prepends data- to each attribute.
In this case attribute data-id="item1" will be applied.
.Readonly()
Applies html attribute readonly="readonly" to the input
.Disabled()
Applies html attribute disabled="disabled" to the input
.DisabledDependsOn(m => m.OtherProperty, "true")
Conditionally enables/disables input based on the value of another input
Important! Requires latest version of TwitterBootstrapMvcJs-*.js file.
.VisibleDependsOn(m => m.OtherProperty, "true")
Conditionally show/hides input, related label or a whole control group based on the value of another input
It is also possible to specify JQuery speed, with which elements should be shown/hidden.
Important! Requires latest version of TwitterBootstrapMvcJs-*.js file.
.Tooltip("Think something silly!")
.Tooltip(new Tooltip("Think something silly!"))
Allows input to have a tooltip.
Tooltip object has extension methods of its own. For full customization options see documentation for Tooltip.
.HelpText("Help is on its way!")
Puts a help text next to the input.
Instead of supplying help text in this method, you can call it without parameters. Instead, use data annotation [Display(Description = "Help is on its way!")] on the model property.
.ShowValidationMessage(false)
Sets whether a validation message should show for an input or not in case an validation failed for that input.

TextBox

Basic Usage
@Html.Bootstrap().TextBoxFor(m => m.UserName)
Html output
<input class="form-control" id="UserName" name="UserName" type="text" value="">
End result
Extension Methods
.Value("Dmitry")
Sets the value of the input.
.Size(InputSize.Large)
Sets the size (width) of the input.
InputSize here is an enum, so all possible values are available via intellisense.
.Placeholder("Ex: Carramba")
Sets a placeholder on the textbox.
.Format("{0:dd/MM/yyyy}")
Sets format of the textbox value.
.Append(".00")
Appends given string to the input.
Optionally html helper can be passed.
This extension can be used multiple times to append multiple elements.
.Prepend("@")
Works similar to .Append(), but prepends the string to the input.
.AppendIcon("icon-class")
Appends an icon tag <i> to the input with specified css class.
Optionally an object new Icon() can be passed to this method. This allows for full customization of the icon. See documentation for Icon.
.PrependIcon(Icons.align_center)
Works similar to .AppendIcon(), but prepends icon to the input.
.TypeAhead(new TypeAhead())
Allows input to have typeahead functionality. View documentation for TypeAhead.
Common extension methods are: .Label(), .Id(), .Class(), .HtmlAttributes(), .Data(), .ShowValidationMessage(), .Tooltip(), .HelpText()

Password

Basic Usage
@Html.Bootstrap().PasswordFor(m => m.Password)
Html output
<input class="form-control" id="Password" name="Password" type="password" value="">
End result
Extension Methods Extension methods are the same as for the TextBox

File

Basic Usage
@Html.Bootstrap().FileFor(m => m.SomeFile)
Html output
<input id="SomeFile" name="SomeFile" type="File" value>
End result
Extension Methods .Label(), .Id(), .Class(), .HtmlAttributes(), .Data(), .ShowValidationMessage(), .Tooltip(), .HelpText()

CheckBox, RadioButton

Basic Usage
@Html.Bootstrap().CheckBoxFor(m => m.RememberMe)
@Html.Bootstrap().RadioButtonFor(m => m.Gender, "Male")
Html output
<input id="RememberMe" name="RememberMe" type="checkbox" value="true">
<input name="RememberMe" type="hidden" value="false">
<input id="Gender" name="Gender" type="radio" value="Male">
End result
Extension Methods
.IsChecked(true)
Sets whether the checkbox is checked or not.
Common extension methods are: .Label(), .Id(), .Class(), .HtmlAttributes(), .Data(), .ShowValidationMessage(), .Tooltip(), .HelpText()

By default .FormGroup().CheckBox() renders checkbox with label on the right. This can be overwritten with any of the following methods:

  • (Local Scope) Extension method: .FormGroup().CheckBox(...).Label().PositionedLeft()
  • (View Scope) Globals: Html.Bootstrap().Globals().FormGroup().CheckBoxLabelsPositionLeft();
  • (Application Scope) add key to web.config appSettings: <add key="BMVC.Globals.FormGroup.CheckBoxLabelsPositionLeft" value="true" />

Local Scope overwrites View Scope and View Scope overwrites Application Scope.



DropDownList

Basic Usage
@Html.Bootstrap().DropDownListFor(m => m.Activity, Model.Activities)
Html output
<select class="form-control" id="Activity" name="Activity" class="valid">
    <option value>-- Select --</option>
    <option value="1">Hacking</option>
    <option selected="selected" value="2">Rocking</option>
    <option value="3">Sleeping</option>
</select>
End result
Extension Methods
.OptionLabel("-- Select --")
Sets the value of the option label.
.Size(InputSize.Large)
Sets the size (width) of the input.
InputSize here is an enum, so all possible values are available via intellisense.
.SelectedValue(1)
Sets an option with a given value to be selected.
.Append(".00")
Appends given string to the input.
Optionally html helper can be passed.
This extension can be used multiple times to append multiple elements.
.Prepend("@")
Works similar to .Append(), but prepends the string to the input.
.AppendIcon("icon-class")
Appends an icon tag <i> to the input with specified css class.
Optionally an object new Icon() can be passed to this method. This allows for full customization of the icon. See documentation for Icon.
.PrependIcon(Icons.align_center)
Works similar to .AppendIcon(), but prepends icon to the input.
Common extension methods are: .Label(), .Id(), .Class(), .HtmlAttributes(), .Data(), .ShowValidationMessage(), .Tooltip(), .HelpText()

ListBox

Basic Usage
@Html.Bootstrap().ListBoxFor(m => m.Activity, Model.Activities)
Html output
<select class="form-control" id="Activity" name="Activity" multiple="multiple" class="valid">
    <option value="0">-- Select --</option>
    <option value="1">Hacking</option>
    <option selected="selected" value="2">Rocking</option>
    <option value="3">Sleeping</option>
</select>
End result
Extension Methods
Common extension methods are: .Label(), .Id(), .Class(), .HtmlAttributes(), .Data(), .ShowValidationMessage(), .Tooltip(), .HelpText()

TextArea

Basic Usage
@Html.Bootstrap().TextAreaFor(m => m.Description)
Html output
<textarea id="Description" name="Description"></textarea>
End result
Extension Methods
.Value("some description")
Sets value for the textarea.
.Columns(10)
Sets number of columns for the textarea.
.Rows(4)
Sets number of rows for textarea.
Common extension methods are: .Label(), .Id(), .Class(), .HtmlAttributes(), .Data(), .ShowValidationMessage(), .Tooltip(), .HelpText()

CheckBoxList / RadioButtonList

This is an advanced input that allows to simply generate multiple checkboxes / radio buttons using any IEnumerable<T>.

CheckBoxList and RadioButtonList are very similar in their nature and share the same common code and extension methods. For brevity sake I'll make an example of CheckBoxList only.

Basic Usage

Lets say we have a class:

public class Car
{
    public int Id { get; set; }
    public string Make { get; set; }
    public int Year { get; set; }
    public string Color { get; set; }
}

... a View Model:

public class MyViewModel
{
    public int CarsDriven { get; set; }
    public List<Car> AllCars { get; set; }
    // more properties... 
}

... then in the view you'd write:

@(Html.Bootstrap().CheckBoxListFor(
    m => m.CarsDriven,
    m => m.AllCars,
    car => car.Id,
    car => car.Make))
Html output

If you had object Cars populated with 3 cars, you'd get:

<div class="input-list-container">
  <div class="checkbox">
    <label for="CarIdsOwned_0">
      <input id="CarIdsOwned_0" name="CarIdsOwned" type="checkbox" value="1">
      Honda
      <span class="required" style="visibility:hidden;">*</span>
    </label>
  </div>
  <div class="checkbox">
    <label for="CarIdsOwned_1">
      <input id="CarIdsOwned_1" name="CarIdsOwned" type="checkbox" value="2">
      Nissan
      <span class="required" style="visibility:hidden;">*</span>
    </label>
  </div>
  <div class="checkbox">
    <label for="CarIdsOwned_2">
      <input id="CarIdsOwned_2" name="CarIdsOwned" type="checkbox" value="3">
      Toyota
      <span class="required" style="visibility:hidden;">*</span>
    </label>
  </div>
</div>
End result
Parameters
  1. m => m.CarsDriven - Expression where you specify the model property where selected value(s) will be stored
  2. m => m.Cars - Data Source expression.
    Optionally instead of an expression you can pass any IEnumerable here.
    Example: @(List<Car>)ViewBag.AllCars
  3. car => car.Id - Value Expression - select which property of <T> will be used for the value of the checkbox
  4. car => car.Make - Text Expression - select which property of <t> will be used for the display text of the checkbox
Extension Methods
.SelectedValues(
    car => car.Make == "Nissan")
Sets checkboxes that satisfy condition to be selected.
.DisabledValues(
    car => car.Year == 2005)
Sets checkboxes that satisfy condition to be disabled.
.DisplayInlineBlock()
Makes all checkboxes to display in one line.
.DisplayInColumns(3, 200)
Makes all checkboxes to display in columns (in this case in 3 columns with width of 200px).
It's possible to supply third parameter bool condition to this extension method to specify the condition when checkboxes are displayed in columns (Ex: when total amount of checkboxes is more than 50).
.ContainerClass("my-items")
Applies provided css class to the div that contains checkboxes/radio buttons
.InputHtmlAttributes(car => new
    {
        @class = "cool-car",
        @data_year = car.Year
    })
Sets HtmlAttributes for inputs.
It is made to take expression for easy access to the properties of each car.
.LabelHtmlAttributes(car => new
    {
        @class = "car-label",
        @data_color = car.Color
    })
Sets HtmlAttributes for labels of the inputs.
Common extension methods are: .Label(), .ShowValidationMessage()

CheckBoxesFromEnum / RadioButtonsFromEnum

This is an advanced input that allows to simply generate multiple checkboxes / radiobuttons using any Enum.

CheckBoxesFromEnum and RadioButtonsFromEnum helpers are very similar in their nature and share the same common code and extension methods. For brevity sake I'll make an example of CheckBoxesFromEnum only.

Basic Usage

Lets say we have an Enum:

public enum Color
{
    Red = 1,
    Green = 2,
    Blue = 3,
    Yellow = 4
}

... a View Model:

public class MyViewModel
{
    public List<Color> Colors { get; set; }
    // or simply public Color Color { get; set; } if you were doing radio buttons
    // more properties... 
}

... then in the view you'd write:

@(Html.Bootstrap().CheckBoxesFromEnumFor(m => m.Colors))
Html output
<div class="input-list-container">
    <div class="checkbox">
        <label for="Colors_0">
            <input id="Colors_0" name="Colors" type="checkbox" value="Red">
            Red
            <span class="required" style="visibility:hidden;">*</span> 
        </label>
    </div>
    <div class="checkbox">
        <label for="Colors_1">
            <input id="Colors_1" name="Colors" type="checkbox" value="Green">
            Green
            <span class="required" style="visibility:hidden;">*</span> 
        </label>
    </div>
    <div class="checkbox">
        <label for="Colors_2">
            <input id="Colors_2" name="Colors" type="checkbox" value="Blue">
            Blue
            <span class="required" style="visibility:hidden;">*</span> 
        </label>
    </div>
    <div class="checkbox">
        <label for="Colors_3">
            <input id="Colors_3" name="Colors" type="checkbox" value="Yellow">
            Yellow
            <span class="required" style="visibility:hidden;">*</span> 
        </label>
    </div>
</div>
End result
Extension Methods
.DisplayInlineBlock()
Makes all checkboxes to display in one line.
.DisplayInColumns(3, 200)
Makes all checkboxes to display in columns (in this case in 3 columns with width of 200px).
It's possible to supply third parameter bool condition to this extension method to specify the condition when checkboxes are displayed in columns (Ex: when total amount of checkboxes is more than 50).
.InputHtmlAttributes(
    new { @class = "cool-color" }
)
Sets HtmlAttributes for all inputs to be the same.
.InputHtmlAttributes<Color>(e => 
    new { @class = "color-" + e }
)
Customizes HtmlAttributes for all inputs per enum.
Notice that when using this helper, the whole thing needs to be inside @( ... )
.InputData<Color>(
    e => new { @id = (int)e }
)
Works similar to InputHtmlAttributes, but prepends data- to each attribute.
Notice that when using this helper, the whole thing needs to be inside @( ... )
.LabelHtmlAttributes(
    new { @class = "color-label" }
)
Sets HtmlAttributes for labels of the inputs.
.LabelHtmlAttributes<Color>(e => 
    new { @class = "label-" + e }
)
Customizes HtmlAttributes for labels of the inputs per enum.
Notice that when using this helper, the whole thing needs to be inside @( ... )
Common extension methods are: .Label(), .ShowValidationMessage()

If your model does not have a property of the enum type that you'd like to use to generate checkboxes/radio buttons, you still may generate them using the following code:

@(f.FormGroup().CheckBoxesFromEnum<MyEnumType>("WhateverPropertyName"))
Important! this helper needs to be wrapped in @(...) as shown above.

Label

Basic Usage
@Html.Bootstrap().LabelFor(m => m.UserName)
Html output
<label for="UserName">
  User Name
  <span class="required">*</span>
</label>
End result User Name*
Extension Methods
.LabelText("Other Label Text")
Sets label text.
BMVC label will first check data annotation [Display(name="label text here")] to determine text for the label. If it is absent, it will use text from this extension. If this extension was not used, it will use Property name split by upper case.
.LabelHtml(
    Html.TextBox("UserName"),
    Html.CheckBox("IsCool"))
Able to take as a parameter any number of other html helpers separated by comma in order to customize label.
In this case label will contain a textbox and a checkbox.
Note that additional styling through css might be needed.
.ShowRequiredStar(true)
Sets whether required star need to be shown or not.
BMVC label will check data annotation [Required] to determine whether to show the star or not. Use this extension if you want to override result.

There are different ways to create forms. Here I'll just show how to reproduce examples of forms posted on Bootstrap's website with the help of BMVC.

Basic example

Example block-level help text here.
Html required by Bootstrap and ASP.NET MVC:
<form action="/Controller/Action" method="post">
    <div class="form-group">
        <label class="control-label" for="Email">
            Email
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <input class="form-control" id="Email" name="Email" type="text" value="" placeholder="Enter Email">
        <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <label class="control-label" for="Password">
            Password
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <input class="form-control" id="Password" name="Password" type="password" placeholder="Password">
        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <label class="control-label" for="SomeFile">
            Some File
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <input id="SomeFile" name="SomeFile" type="File" value="">
        <span class="help-block">Example block-level help text here.</span>
        <span class="field-validation-valid" data-valmsg-for="SomeFile" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <div class="control-label"></div>
        <div class="checkbox">
            <label for="CheckMeOut">
                <input id="CheckMeOut" name="CheckMeOut" type="checkbox" value="true">
                <input name="CheckMeOut" type="hidden" value="false">
                Check Me Out
                <span class="required" style="visibility:hidden;">*</span>
                <span class="field-validation-valid" data-valmsg-for="CheckMeOut" data-valmsg-replace="true"></span>
            </label>
        </div>
    </div>
    <button class="btn-default  btn" type="submit">Submit</button>
</form>
With TwitterBootstrapMVC:
@using (var f = Html.Bootstrap().Begin(new Form()))
{
    @f.FormGroup().TextBoxFor(x => x.Email).Placeholder("Enter email")
    @f.FormGroup().PasswordFor(x => x.Password).Placeholder()
    @f.FormGroup().FileFor(x => x.SomeFile).HelpText("Example block-level help text here.")
    @f.FormGroup().CheckBoxFor(x => x.CheckMeOut)
    @Html.Bootstrap().SubmitButton()
}

Inline form

Html required by Bootstrap and ASP.NET MVC:
<form action="/Controller/Action" class="form-inline" method="post" novalidate="novalidate">
    <div class="form-group">
        <label class="sr-only control-label" for="Email">
            Email
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <input class="form-control" id="Email" name="Email" placeholder="Enter email" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <label class="sr-only control-label" for="Password">
            Password
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <input class="form-control" id="Password" name="Password" placeholder="Password" type="password">
        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <div class="control-label"></div>
        <div class="checkbox">
            <label for="RememberMe">
                <input id="RememberMe" name="RememberMe" type="checkbox" value="true">
                <input name="RememberMe" type="hidden" value="false">
                Remember Me
                <span class="required" style="visibility:hidden;">*</span>
                <span class="field-validation-valid" data-valmsg-for="RememberMe" data-valmsg-replace="true"></span>
            </label>
        </div>
    </div>
    <button class="btn-default  btn" type="submit">Sign in</button>
</form>
With TwitterBootstrapMVC:
@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Inline)))
{
    @:@f.FormGroup().TextBoxFor(x => x.Email).Placeholder("Enter email").Label().Class("sr-only")
    @:@f.FormGroup().PasswordFor(x => x.Password).Placeholder().Label().Class("sr-only")
    @:@f.FormGroup().CheckBoxFor(x => x.RememberMe)
    @Html.Bootstrap().SubmitButton().Text("Sign in")
}

Horizontal form

Html required by Bootstrap and ASP.NET MVC:
<form action="/Documentation" class="form-horizontal" method="post" novalidate="novalidate">
    <div class="form-group">
        <label class="control-label col-lg-2" for="Email">
            Email
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <div class="col-lg-10">
            <input class="form-control" id="Email" name="Email" placeholder="Email" type="text" value="">
            <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-2" for="Password">
            Password
            <span class="required" style="visibility:hidden;">*</span>
        </label>
        <div class="col-lg-10">
            <input class="form-control" id="Password" name="Password" placeholder="Password" type="password">
            <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-lg-2"></div>
        <div class="col-lg-10">
            <div class="checkbox">
                <label for="RememberMe">
                    <input id="RememberMe" name="RememberMe" type="checkbox" value="true">
                    <input name="RememberMe" type="hidden" value="false">
                    Remember Me
                    <span class="required" style="visibility:hidden;">*</span>
                    <span class="field-validation-valid" data-valmsg-for="RememberMe" data-valmsg-replace="true"></span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <span class="control-label col-lg-2"></span>
        <div class="col-lg-10">
            <button class="btn-default  btn" type="submit">Sign in</button>
        </div>
    </div>
</form>
With TwitterBootstrapMVC:
@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal)))
{
    @f.FormGroup().TextBox("Email").Placeholder()
    @f.FormGroup().Password("Password").Placeholder()
    @f.FormGroup().CheckBox("RememberMe")
    @f.FormGroup().CustomControls(Html.Bootstrap().SubmitButton().Text("Sign in"))
}

Controlling Column Widths

Often you will want to change default column widths of generated groups of inputs and labels.

By default when a horizontal form is created, its form groups will have the following widths: label - col-lg-2, inputs - col-lg-10. There are couple ways to change that.

1. Use extension methods on class Form.

When using Width extension methods on class Form, selected widths will be applied to all groups of inputs and labels of that form. The following methods are available:

.LabelWidthLg(4)
.LabelWidthMd(4)
.LabelWidthSm(4)
.LabelWidthXs(4)
Sets appropriate width on the label. Width of the input is calculated based on label's width so that the sum of two of them is 12.
.InputWidthLg(8)
.InputWidthMd(8)
.InputWidthSm(8)
.InputWidthXs(8)
Sets appropriate width of the input. Width of the label stays intact.

2. Use extension methods on FormGroup.

Use Width extension methods on each FormGroup to control widths individually.

.Label().WidthLg(4)
.Label().WidthMd(4)
.Label().WidthSm(4)
.Label().WidthXs(4)
Sets appropriate width on the label. Width of the input is calculated based on label's width so that the sum of two of them is 12.
.WidthLg(8)
.WidthMd(8)
.WidthSm(8)
.WidthXs(8)
Sets appropriate width of the input. Width of the label stays intact.

The example below would not render pretty, but it illustrates the use of extension methods.

@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal).LabelWidthLg(4)))
{
    @f.FormGroup().TextBox("Email").WidthMd(5)
    @f.FormGroup().Password("Password").Label().WidthMd(7)
}

Form & Partials

When you have a form element that contains a partial view with all inputs in it, you may need to get FormBuilder variable to build the inputs.

Lets say you have the following code in the parent view:

@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Inline).InputWidthSm(3)))
{
    @Html.Partial("_FormPartial")
}

In order for proper html structure and attributes be applied to all inputs, you need the f variable to exist in the partial. Here is how you can access it inside the _FormPartial view:

@model MyProject.Models.HomeModel
@{
    var f = Html.Bootstrap().Misc().GetFormBuilderFromViewData();
}
@f.FormGroup().TextBox("Email").Placeholder("Enter email").WidthSm(4).Label().Class("sr-only")
@f.FormGroup().Password("Password").Placeholder().Label().Class("sr-only")

Form, Partials & Ajax

When doing ajax calls use .Misc().GetBuilderFor(...) helper.

In contrast to the previous example, when doing an ajax request to populate form with inputs, ViewData object will not have information required to recreate a FormBuilder variable. You'll need to recreate FormBuilder:

@model MyProject.Models.HomeModel
@{
    var f = Html.Bootstrap().Misc().GetBuilderFor(new Form().Type(FormType.Inline).InputWidthSm(3));
}
@f.FormGroup().TextBox("Email").Placeholder("Enter email").WidthSm(4).Label().Class("sr-only")
@f.FormGroup().Password("Password").Placeholder().Label().Class("sr-only")
Important! Do not use Html.Bootstrap().Begin(new Form()) method to create FormBuilder because it will also create an opening <form> tag, which is not wanted in this case.

Form & EditorTemplates

Similar to the case with Partial View, get FormBuilder variable using .Misc().GetFormBuilderFromViewData() method:

Location class:

public class Location
{
    public decimal Latitude { get; set; }
    public decimal Longitude { get; set; }
}

Code in the parent View:

@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Inline).InputWidthSm(3)))
{
    @Html.EditorFor(m => m.Location)
}

Editor template Location.cshtml:

@model MyProject.Models.Location
@{
    var f = Html.Bootstrap().Misc().GetFormBuilderFromViewData();
}
@f.FormGroup().TextBoxFor(m => m.Longitude)
@f.FormGroup().TextBoxFor(m => m.Latitude)

All BMVC buttons and links have following common extension methods:

.AppendIcon("iconClass")
Appends an icon with specified class
You can also pass an instance of Icon class, which has more customization options: new Icon().
.PrependIcon("iconClass")
Save as .AppendIcon(), but it prepends an icon.
.Disabled()
Applies class "disabled" to the button
From Bootstrap's documentation: "this class is only for aesthetic; you must use custom JavaScript to disable links here."

Helpers ActionLinkButton, Button, and SubmitButton have the following common extension methods.

.Text("Click me")
Sets the text displayed on the button.
.Name("linkName")
Sets html attribute "name"
.Value("Red")
Sets html attribute "value" of the button.
.Size(ButtonSize.Large)
Sets the size of the button.
ButtonSize here is an enum with all available sizes.
.Style(ButtonStyle.Danger)
Sets style of the button.
ButtonStyle here is an enum with all available styles.
.ButtonBlock()
Stretches a button to the full width of the container.
.LoadingText("Please wait...")
Sets text that will be displayed after button is clicked.
.DropDownToggle()
Applies class "dropdown-toggle" to the button
Use this extension if the button is followed by a Drop Down Menu (@Html.Bootstrap.DropDownMenu()).
From Bootstrap's documentation: "You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;"
Best Practices: For Drop Down Menus use disposable method .Begin(new DropDown(...)).

Helpers ActionLinkButton and ActionLink have the following extension methods in common:

.Protocol("http")
Sets the protocol for the URL, such as "http", or "https"
.HostName("hostName")
Sets the Host Name of the URL
.Fragment("fragment")
Sets the URL fragment name (the anchor name).
.RouteName("routeName")
Sets route name.
.RouteValues(new { id = "1" })
Set route values by passing an object that contains the parameters for the route.
.Title("awesome button")
Sets html attribute "title" of the button.

ActionLinkButton

BMVC ActionLinkButton comes with 4 overloads used most often. With these overloads one can specify link text, action, and controller. Other properties are accessed using extension methods.

Basic Usage
@Html.Bootstrap().ActionLinkButton("Link Text", "action")
Html output
<a class="btn" href="/controller/action">Link Text</a>
End result Link Text
Extension Methods
Common extension methods are: .Id(), .Class(), .HtmlAttributes(), .Data(), .Tooltip()

Button / SubmitButton

Helpers Button and SubmitButton have all the same extension methods and render pretty much the same output. The only difference is that SubmitButton will render a button with type="submit". By default both render with text "Submit".

Basic Usage
@Html.Bootstrap().Button()
Html output
<button class="btn-default btn" type="button">Submit</button>
End result
Extension Methods
.WithCaret()
Renders a button with a triangle looking thing.
.TriggerModal("MyModal")
Specifies that clicking on that button will trigger a modal with a given id to show up.
Common extension methods are: .Id(), .Class(), .HtmlAttributes(), .Data(), .Tooltip()
Basic Usage
@Html.Bootstrap().ActionLink("Link Text", "action")
Html output
<a href="/controller/action">Link Text</a>
End result Link Text
Extension Methods
Common extension methods are: .Id(), .Class(), .HtmlAttributes(), .Data(), .Tooltip()
Basic Usage
@Html.Bootstrap().Link("awesome website", "http://www.personalitymatch.net")
Html output
<a href="http://www.personalitymatch.net">awesome website</a>
End result awesome website
Extension Methods
Common extension methods are: .Id(), .Class(), .HtmlAttributes(), .Data(), .Tooltip()

Use disposable method .Begin(new ButtonGroup()) to start a group of buttons.

For additional information about drop down menus please see documentation for Dropdowns.

Html required by Bootstrap:
<div class="btn-group">
    <a class="btn  btn-default" href="/Controller/Action">Link 1</a>
    <div class="btn-group">
        <a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
            Drop Down <span class="caret"></span>
        </a>
        <ul class="pull-right dropdown-menu">
            <li><a href="/Controller/Action1">Link 1</a></li>
            <li><a href="/Controller/Action2">Link 2</a></li>
        </ul>
    </div>
    <button class="btn-default  btn" type="button">Some Button</button>
</div>
With TwitterBootstrapMVC:
using (var g = Html.Bootstrap().Begin(new ButtonGroup()))
{
    @g.ActionLinkButton("Link 1", "Action")
    using (var dd = g.BeginDropDown(new DropDown("Drop Down").AlignTo("right")))
    {
        @dd.ActionLink("Link 1", "Action1")
        @dd.ActionLink("Link 2", "Action2")
    }
    @g.Button().Text("Some Button")
}

There are couple ways of creating a button with a drop down menu. The preferred way is to use a disposable method .Begin(new DropDown("...")):

Html required by Bootstrap:
<div class="dropdown">
    <a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
        Click me
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="dropdown-header">Some header</li>
        <li><a href="/Controller/action1">Line Text 1</a></li>
        <li class="divider"></li>
        <li><a href="/Controller/action2">Line Text 2</a></li>
    </ul>
</div>
With TwitterBootstrapMVC:
@using (var dd = Html.Bootstrap().Begin(new DropDown("Click me")))
{
    @dd.Header("Some header")
    @dd.ActionLink("Line Text 1", "action1")
    @dd.Divider()
    @dd.ActionLink("Line Text 2", "action2")
}

Class DropDown in the example above has the following extension methods:

.Style(ButtonStyle.Danger)
Sets the style for the button that triggers drop down menu to appear.
ButtonStyle here is an enum with all possible styles.
.AlignTo("right")
Sets position of the drop down menu.
Pass either "right" or "left".
.SetLinksActiveByController()
If this extension is used, links in the drop down menu that point to the controller that matches controller of the current page will be highlighted.
.SetLinksActiveByControllerAndAction()
If this extension is used, links in the drop down menu that point to the controller/action that matches controller/action of the current page will be highlighted.

This approach takes care of rendering a "container" div, a button that triggers a dropdown menu to appear and the drop down menu itself. If there is such a need, you may render only a drop down menu by itself as shown in the example below:


Html required by Bootstrap:
<ul class="dropdown-menu">
    <li><a tabindex="-1" href="/Controller/action1">Link 1</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="/Controller/action1">Link 1</a></li>
</ul>
With TwitterBootstrapMVC:
@Html.Bootstrap().DropDownMenu().MenuItems(m =>
{
    m.MenuItem(Html.ActionLink("Link 1", "action1"));
    m.Divider();
    m.MenuItem(Html.ActionLink("Link 1", "action1"));
})

Use disposable method .Begin(new Accordion("id")) to create Accordion.

This is the contents of first panel

This is the contents of second panel

Html required by Bootstrap:
<div class="panel-group" id="myAccordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#myAccordion" data-toggle="collapse" href="#myAccordion-1">Title 1</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="myAccordion-1" style="height: 0px;">
            <div class="panel-body">
                <p>This is the contents of first panel</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#myAccordion" data-toggle="collapse" href="#myAccordion-2">Title 2</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="myAccordion-2" style="height: auto;">
            <div class="panel-body">
                <p>This is the contents of second panel</p>
            </div>
        </div>
    </div>
</div>
With TwitterBootstrapMVC:
@using (var a =  Html.Bootstrap().Begin(new Accordion("myAccordion")))
{
    using (a.BeginPanel("Title 1"))
    {
        <p>This is the contents of first panel</p>
    }
    using (a.BeginPanel("Title 2"))
    {
        <p>This is the contents of second panel</p>
    }
}

Class Accordion in the example above has the following extension methods:

.ActivePanel(2)
Sets the panel that needs to be active when page rendered.

Use disposable method .Begin(new Panel()) to create Panel.

Panel has three main elements: header, body, and footer. Each of them can be either created via disposable method: .BeginHeader(), .BeginBody(), .BeginFooter() or via quick method .Header(), .Body(), and .Footer()

Besides these main elements, you can also easily integrate tables inside the panel using disposable method .BeginTable(new Table()).

Finally, you can also integrate list groups using disposable method .BeginListGroup(). See example below:

My cool header

Body

cell 1 cell 2
  • item1
  • item2
Html required by Bootstrap:
<div class="panel-default panel">
    <div class="panel-heading">My cool header</div>
    <div class="panel-body">
        <p>Body</p>
    </div>
    <table class="table">
        <tbody>
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
        </tbody>
    </table>
    <ul class="list-group">
        <li class="list-group-item">item1</li>
        <li class="list-group-item">item2</li>
    </ul>
    <div class="panel-footer">My cool footer</div>
</div>
With TwitterBootstrapMVC:
@using (var p = Html.Bootstrap().Begin(new Panel()))
{
    @p.Heading("My cool header")
    using (p.BeginBody())
    {
        <p>Body</p>
    }
    using (var t = p.BeginTable(new Table()))
    {
        using (var r = t.BeginRow())
        {
            @r.Cell("cell 1")
            @r.Cell("cell 2")
        }
    }
    using (var l = p.BeginListGroup())
    {
        @l.Item("item1")
        @l.Item("item2")
    }
    @p.Footer("My cool footer")
}

Class Panel in the example above has the following extension methods:

.Style(PanelStyle.Danger)
Sets the style of the panel.
PanelStyle here is an enum with all possible panel styles.

Use disposable method .Begin(new Nav()) to create nav.

Use this method for nav-pills and nav-list. For Tabs use separate disposable method .Begin(new Tabs()) (see docs for Tabs).

Html required by Bootstrap:
<ul class="nav nav-pills">
    <li><a href="/Account/action1">Link 1</a></li>
    <li><a href="/Account/action2">Link 2</a></li>
    <li><a href="#">External Link</a></li>
</ul>
With TwitterBootstrapMVC:
using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.Pills)))
{
    @nav.ActionLink("Link 1", "action1")
    @nav.ActionLink("Link 2", "action2")
    @nav.Link("External Link", "#")
}

Class Nav has following extension methods:

.Style(NavType.Pills)
Sets the style for the nav.
NavType here is an enum with all possible styles. Even though this enum contains style for Tabs, we recommend using separate disposable method .Begin(new Tabs()) for tabs.
.Stacked()
Makes elements of the nav be stacked vertically.
.SetLinksActiveByController()
If this extension is used, links in the nav that point to the controller that matches controller of the current page will be highlighted.
.SetLinksActiveByControllerAndAction()
If this extension is used, links in the nav that point to the controller/action that matches controller/action of the current page will be highlighted.
Common Extension Methods: .Id(), .Class(), .HtmlAttributes(), .Data()

You may also use disposable method .BeginDropDown() to generate a dropdown menu as a part of the nav:

using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.Pills)))
{
    using(var dd = nav.BeginDropDown(new DropDown("Dropdown actions")))
    {
        // see docs for Dropdowns for more details
    }
}

Also you may build sub navigations using disposable method .BeginSubNav():

using (var nav = Html.Bootstrap().Begin(new Nav()))
{
    using (var sm = nav.BeginSubNav(new SubNav("SubNav Text", "/SomeUrl")))
    {
        @sm.ActionLink("sublink", "sub")
    }
}

Use disposable method .Begin(new Tabs("tabId")) to create tabs.

Contents of tab 1

Contents of tab 2

Contents of tab 3

Html required by Bootstrap:
<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#TabsId-1">Tab 1</a></li>
        <li class=""><a data-toggle="tab" href="#TabsId-2">Tab 2</a></li>
        <li class=""><a data-toggle="tab" href="#TabsId-3">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="TabsId-1">
            <p>Contents of tab 1</p>
        </div>
        <div class="tab-pane" id="TabsId-2">
            <p>Contents of tab 2</p>
        </div>
        <div class="tab-pane" id="TabsId-3">
            <p>Contents of tab 3</p>
        </div>
    </div>
</div>
With TwitterBootstrapMVC:
using (var tabs = Html.Bootstrap().Begin(new Tabs("TabsId")))
{
    @tabs.Tab("Tab 1")
    @tabs.Tab("Tab 2")
    @tabs.Tab("Tab 3")
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 1</p>
    }
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 2</p>
    }
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 3</p>
    }
}

As shown in the example above, when creating tabs, first define tabs using method .Tab(), and then define contents for each of these tabs using disposable method .BeginPanel(). Number of tabs should be equal to the number of panels.

Note! Method .Tab("tab name") also has extension methods .PrependIcon() and .AppendIcon() in case you want to decorate tabs with icons.

Class Tabs has following extension methods:

.Style(NavType.Pills)
Sets the style for the tabs.
NavType here is an enum with all possible styles.
.ActiveTab(2)
Sets default active tab.

Use disposable method .Begin(new Modal("modalId")) to create a modal.

Potentially you can make any action/event (like click on the button) make modal to appear. However, for your convenience BMVC button has extension method .TriggerModal("modalId"). See example below:

Html required by Bootstrap:
<button class="btn-default  btn" data-target="#modalId" data-toggle="modal" type="button">
    This button will trigger modal
</button>
<div class="modal fade" id="modalId" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Header!</h4>
            </div>
            <div class="modal-body">
                <p>Body of the Modal.</p>
                <p>This could be any html markup.</p>
            </div>
            <div class="modal-footer">
                <button class="btn-default  btn" type="button">Submit</button>
            </div>
        </div>
    </div>
</div>
With TwitterBootstrapMVC:
@Html.Bootstrap().Button().Text("This button will trigger modal").TriggerModal("modalId")
using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalId")))
{
    @modal.Header("Modal Header!")
    using (modal.BeginBody())
    {
        <p>Body of the Modal.</p>
        <p>This could be any html markup.</p>
    }
    using (modal.BeginFooter())
    {
        @Html.Bootstrap().Button()
    }
}

In this example inline helper method @modal.Header("Modal Header") was used. However, if you need more complex html in the header, you can use disposable method .BeginHeader().

Class Modal has following extension methods:

.Closeable()
Renders a "close" button in the header of the modal.
.BackdropOff()
When used, assures that modal will not be closed when clicked anywhere but the "close" button.
.FadeOff()
When used, removes fade effect from the modal.
.KeyboardOff()
When used, modal will not be closeable when Esc is pressed.
.Remote("/path")
When used, content will be loaded via AJAX from the given path, and placed in the body of the modal.
.ShowOff()
When used, modal will not be shown when it's initialized.
Common Extension Methods: .Id(), .Class(), .HtmlAttributes(), .Data()

All BMVC inputs, buttons, links, and couple more elements have extension method .Tooltip().

Note: Tooltip requires some JavaScript for it to be initialized. This JavaScript is included in the TwitterBootstrapMvcJs.js file.

There are two overloads on this extension method. First is for a quick use (most common scenario). By default it renders tooltip to the right of the element:

With TwitterBootstrapMVC:
@Html.Bootstrap().Button().Text("Hover over me").Tooltip("Quick tooltip")

Second overload takes class new Tooltip() and it is used for detailed configuration:

With TwitterBootstrapMVC:
@Html.Bootstrap().Button().Text("Hover over me").Tooltip(new Tooltip("Detailed Tooltip"))

Class new Tooltip() can be extended with the following methods:

.Animation(false)
Specifies whether the tooltip has animation or not.
.Container("body")
Appends tooltip to a specified element.
.Delay(400)
Delays animation of the tooltip by the given amount of milliseconds.
.Html(true)
Sets whether tooltip contains html rather than just text.
.Placement("left")
Sets where tooltip should appear relatively to the element it's attached to.
Available options: "top", "bottom", "left", "right".
.Selector(".someId")
From TwitterBootstrap's documentation: "If a selector is provided, tooltip objects will be delegated to the specified targets."
.Trigger("click")
From TwitterBootstrap's documentation: "how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space separated, trigger types."

Coming Soon: Tooltips can be configured via Global variables.

BMVC icons have extension method .Popover().

Note: Popover requires some JavaScript for it to be initialized. This JavaScript is included in the TwitterBootstrapMvcJs.js file.

There are two overloads on this extension method. First is for a quick use (most common scenario). By default it renders popover to the right of the element:

Click on this icon:
With TwitterBootstrapMVC:
@Html.Bootstrap().Icon("glyphicon glyphicon-info-sign").Popover("Simple Popover", "Some fascinating facts about...")

Second overload takes class new Popover() and it is used for detailed configuration:

Click on this icon:
With TwitterBootstrapMVC:
@Html.Bootstrap().Icon(glyphicon glyphicon-info-sign).Popover(new Popover("Detailed Popover", "Some cool facts about..."))

Class new Popover() can be extended with all the same methods and class new Tooltip(). However, it has one more extension method:

.Closeable()
Renders "close" button in the header of the popover.

Coming Soon: Popovers can be configured via Global variables.

Use disposable method .Begin(new Carousel("carouselId")) to create a carousel.

Html required by Bootstrap:
<div style="width: 600px; height: 200px;">
    <div class="carousel slide" data-pause="hover" id="carousel-awesome">
        <div class="carousel-inner">
            <div class="active item">
                <img alt="img1" src="/Content/img/c1.jpg">
            </div>
            <div class="item">
                <img alt="img2" src="/Content/img/c2.gif">
            </div>
            <div class="item">
                <img alt="img3" src="/Content/img/c3.jpg">
                <div class="carousel-caption">
                    <p>Example of an image with a caption.</p>
                </div>
            </div>
            <div class="item">
                <div style="width: 600px; height: 200px;">
                    <div style="padding: 20px 20px 20px 80px;">
                        <h3>Custom carousel item</h3>
                        <p>This could be any html!</p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" data-slide="prev" href="#carousel-awesome">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" data-slide="next" href="#carousel-awesome">
            <span class="icon-next"></span>
        </a>
    </div>        
</div>
With TwitterBootstrapMVC:
<div style="width: 600px; height: 200px;">
    @using (var c = Html.Bootstrap().Begin(new Carousel("carousel-awesome").Pause()))
    {
        @c.Image(Links.Content.images.c1_jpg, "img1")
        @c.Image(Links.Content.images.c2_gif, "img2")
        using (c.ImageWithCaption(Links.Content.images.c3_jpg, "img3"))
        {
            <p>Example of an image with a caption.</p>
        }
        using (c.CustomItem())
        {
            <div style="width: 600px; height: 200px;">
                <div style="padding: 20px 20px 20px 80px;">
                    <h3>Custom carousel item</h3>
                    <p>This could be any html!</p>
                </div>
            </div>
        }
    }
</div>

This example shows multiple use cases. When you need to have just a single image as an item of the carousel, use method .Image(). When you need an image with a caption, use disposable method ImageWithCaption(). And finally you can use any html you want with method CustomItem().

In order to mark a carousel as animating starting at page load apply the following: new Carousel().Data(new { ride = "carousel" }).

Default styles

# First Name Last Name Username
1 Dmitry Efimenko @de
2 Ivan Petrov @petya
3 Olga Ivanova @iva
using (Html.Bootstrap().Begin(new Table()))
{
    <tr>
        <td>First Name</td>
        ...
    </tr>
}

Table Options

Striped

# First Name Last Name Username
1 Dmitry Efimenko @de
2 Ivan Petrov @petya
3 Olga Ivanova @iva
using (Html.Bootstrap().Begin(new Table().Striped()))
{
    
}

Bordered

# First Name Last Name Username
1 Dmitry Efimenko @de
Dmitry Efimenko @deMvc
2 Ivan Petrov @artu
3 Olga Ivanova @twitter
using (Html.Bootstrap().Begin(new Table().Bordered()))
{
    
}

Hover

# First Name Last Name Username
1 Dmitry Efimenko @de
2 Ivan Petrov @petya
3 Olga Ivanova @iva
using (Html.Bootstrap().Begin(new Table().Hover()))
{
    
}

Condensed

# First Name Last Name Username
1 Dmitry Efimenko @de
2 Ivan Petrov @petya
3 Olga Ivanova @iva
using (Html.Bootstrap().Begin(new Table().Condensed()))
{
    
}

Caption

Some cool description
# First Name Last Name Username
1 Dmitry Efimenko @de
2 Ivan Petrov @petya
3 Olga Ivanova @iva
using (Html.Bootstrap().Begin(new Table().Caption("Some cool description")))
{
    
}

Additional Table Extensions

    using (Html.Bootstrap().Begin(new Table()
        .Class("special-class")
        .Data(new { id = "table-5" })
        .HtmlAttributes(new { @readonly = "readonly" })))
    {
        ...
    }
Will result in:
    <table class="table special-class" data-id="table-5" readonly="readonly">
        ...
    </table>

Support for Typeahead was dropped in Bootstrap 3. However, nothing prevents us from re-adding it again! Follow these steps to do so:

Besides support for the specification, provided by Bootstrap 2, BMVC provides additional way of specifying data source through the use of extension methods .Action(), .Controller(), or .ActionResult().

If you choose to use one of these methods, be sure to have TwitterBootstrapMvcJs-*.js file included as it is required for this approach to work.

Basic Usage
@Html.Bootstrap().TextBoxFor(x => x.State).TypeAhead(new TypeAhead().Action("GetStates"))
Html output
<input 
    autocomplete="off" 
    class="form-control" 
    data-provide="typeahead" 
    data-url="/Controller/GetStates" 
    id="State" name="State" 
    type="text" value="">
End result
Extension Methods of class TypeAhead
.Action("GetStates")
Sets the action of the source of the data.
if controller is not set, it will use the controller of the current page by default.
.Controller("Controller")
Sets the controller of the source of the data.
.ActionResult(MVC.SomeController.GetStates())
Ability to set source of the data via ActionResult
.Source("otherSource")
From Bootstrap's docs: The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
.Highlighter("highlighter")
From Bootstrap's docs: Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.
.Items(8)
From Bootstrap's docs: The max number of items to display in the dropdown.
.Matcher("matcher")
From Bootstrap's docs: The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
.MinLength(1)
From Bootstrap's docs: The minimum character length needed before triggering autocomplete suggestions
.Sorter("sorter")
From Bootstrap's docs: Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
.Updater("updater")
From Bootstrap's docs: The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.

However you choose to specify data source, you will need a controller action to return results. An example of such action is below:

[HttpGet]
public virtual JsonResult GetStates(string term)
{
    var list = new List<string>
    {
        "Alabama","Alaska","Arizona","Arkansas","California",...
    };
    var results = list.Where(n => n.ToLower().Contains(term.ToLower()));
    return new JsonResult()
    {
        Data = results.ToArray(),
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

When appending, prepending, or rendering an icon, you always have an option to pass a new Icon() object which has extension methods of its own allowing for full customization of the icon.

Basic Usage
@Html.Bootstrap().Icon(new Icon("glyphicon glyphicon-briefcase"))
Html output
<i class="glyphicon glyphicon-briefcase"></i>
End result
Extension Methods of class Icon
.Popover("Popover Title", "Content")
Attaches a Popover windows to the icon.
There is also an overload that takes a class new Popover(), which allows for further customization of that popover.
.Tooltip("tooltip text")
Attaches a Tooltip to the icon.
There is also an overload that takes a class new Tooltip(), which allows for further customization of that tooltip.
.White()
Specifies to use white variation of the icons.
Common Extension Methods: .Id(), .Class(), .HtmlAttributes(), .Data()

There are two ways BMVC allows to render an alert.

First option - using an inline helper:

@Html.Bootstrap().Alert("Alert text (or html) here")

Second option is to use a disposable helper .Begin(...):

using (Html.Bootstrap().Begin(new Alert()))
{
    <p>Alert Html here</p>
}

The end result would be:

Alert text (or html) here

In both cases Alert has following extension methods:

.Closeable()
Adds "close" button to the top right corner of the alert.
.IsLongMessage()
Use this method when alert message is long. It will add some spacing to the alert improving readability.
.Style(AlertColor.Error)
Specifies the style of the alert.
AlertColor here is an enum that contains all styles for the alert.
Common Extension Methods: .Id(), .Class(), .HtmlAttributes(), .Data()