CSS

This section explains functionality related to existing standard HTML elements like tables and forms but with additional styling and capabilities. FluentBootstrap implements all CSS support from Bootstrap. For more information see the Bootstrap documentation.

Containers

Create a page container using .Container(). To make the container fluid, use .SetFluid().

@using(var container = Html.Bootstrap().Container().SetFluid().Begin())
{
    ...
}

Grids

Create a grid using .GridRow(), then use .GridColumn() to create the columns. The .GridColumn() method can optionally take an Md width of the column (for more sophisticated grid layouts see the next section). You can add content to the grid columns by using them as a disposable and putting content inside, or by using the .AddContent() method. As with all FluentBootstrap components, you can also use HTML directly and rely on the Css static class to provide the appropriate CSS class names. Each of these options is demonstrated below.

Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 1
Md 8
Md 4
Md 4
Md 4
Md 4
Md 6
Md 6
@using (var row = Html.Bootstrap().GridRow().Begin())
{
    for (int c = 0; c < 12; c++)
    {
        @row.GridColumn(1).AddContent("Md 1")
    }
}
@using (var row = Html.Bootstrap().GridRow().Begin())
{
    using (row.GridColumn(8).Begin())
    {
        <text>Md 8</text>
    }
    using (row.GridColumn(4).Begin())
    {
        <text>Md 4</text>
    }
}
@using (var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn(4).AddContent("Md 4")
    @row.GridColumn(4).AddContent("Md 4")
    @row.GridColumn(4).AddContent("Md 4")
}
@using (var row = Html.Bootstrap().GridRow().Begin())
{
    <div class="@Css.ColMd6">Md 6</div>
    <div class="@Css.ColMd6">Md 6</div>
}

Column Widths

For simple grids, just pass the number of columns to the .GridColumn() method. This will result in corresponding .col-md- CSS classes to be generated. For more complex grid layouts, you can use the .SetXs(), .SetSm(), .SetMd(), and .SetLg() methods. You can use more than one of these at a time to create sophisticated column schemes that change with the window size.

Md8 Xs12
Md4 Xs6
Md4 Xs6
Md4 Xs6
Md4 Xs6
Xs6
Xs6
@using(var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn(8).SetXs(12).AddContent("Md8 Xs12")
    @row.GridColumn(4).SetXs(6).AddContent("Md4 Xs6")
}
@using(var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn().SetMd(4).SetXs(6).AddContent("Md4 Xs6")
    @row.GridColumn().SetMd(4).SetXs(6).AddContent("Md4 Xs6")
    @row.GridColumn().SetMd(4).SetXs(6).AddContent("Md4 Xs6")
}
@using(var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn().SetXs(6).AddContent("Xs6")
    @row.GridColumn().SetXs(6).AddContent("Xs6")
}

Column Offsets and Ordering

You can also further customize the grid by using .SetMdOffset(), .SetMdPush(), and .SetMdPull() methods (or their corresponding Xs, Sm, and Lg counterparts, all of which can be used together).

Md4
Md4 MdOffset4
Md3 MdOffset3
Md3 MdOffset3
Md6 MdOffset3
Md9 MdPush3
Md3 MdPull9
@using(var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn(4).AddContent("Md4")
    @row.GridColumn(4).SetMdOffset(4).AddContent("Md4 MdOffset4")
}
@using(var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn(3).SetMdOffset(3).AddContent("Md3 MdOffset3")
    @row.GridColumn(3).SetMdOffset(3).AddContent("Md3 MdOffset3")
}
@using(var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn(6).SetMdOffset(3).AddContent("Md6 MdOffset3")
}
@using (var row = Html.Bootstrap().GridRow().Begin())
{
    @row.GridColumn(9).SetMdPush(3).AddContent("Md9 MdPush3")
    @row.GridColumn(3).SetMdPull(9).AddContent("Md3 MdPull9")
}

Headings

Use .PageHeader() for large headings with an underline. Use .Heading1() through .Heading6() for different size headings. Each of these methods optionally accepts a string for the heading text (or you can use .AddContent() or use the heading as a disposable object). You can also use .SetSmallText() to add some secondary text to the heading.

Heading 1. Bootstrap Heading

Heading 2. Bootstrap Heading Secondary text

Heading 3. Bootstrap Heading

Heading 4. Bootstrap Heading Secondary text

Heading 5. Bootstrap Heading
Heading 6. Bootstrap Heading Secondary text
@Html.Bootstrap().PageHeader("Page Header")
@Html.Bootstrap().Heading1("Heading 1. Bootstrap Heading")
@Html.Bootstrap().Heading2("Heading 2. Bootstrap Heading").SetSmallText("Secondary text")
@Html.Bootstrap().Heading3("Heading 3. Bootstrap Heading")
@using(var heading = Html.Bootstrap().Heading4("Heading 4. Bootstrap Heading").Begin())
{
    @heading.Small("Secondary text")
}
@Html.Bootstrap().Heading5("Heading 5. Bootstrap Heading")
@Html.Bootstrap().Heading6("Heading 6. Bootstrap Heading").WithChild().Small("Secondary text")

Leads

You can make text stand out, or "lead", with the .Lead() method.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

@Html.Bootstrap().Lead("Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.")
@using(Html.Bootstrap().Lead().Begin())
{
    <text>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</text>
}

Alignment

You can use the .SetAlignment() method to specify text alignment for most other components.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

@Html.Bootstrap().Paragraph("Left aligned text.").SetAlignment(TextAlignment.Left)
@Html.Bootstrap().Paragraph("Center aligned text.").SetAlignment(TextAlignment.Center)
@Html.Bootstrap().Paragraph("Right aligned text.").SetAlignment(TextAlignment.Right)
@Html.Bootstrap().Paragraph("Justified text.").SetAlignment(TextAlignment.Justify)
@Html.Bootstrap().Paragraph("No wrap text.").SetAlignment(TextAlignment.Nowrap)

Transformations

You can use .SetTransformation() to apply text transformations to most other components.

Lowercased text.

Uppercased text.

Capitalized text.

@Html.Bootstrap().Paragraph("Lowercased text.").SetTransformation(TextTransformation.Lowercase)
@Html.Bootstrap().Paragraph("Uppercased text.").SetTransformation(TextTransformation.Uppercase)
@Html.Bootstrap().Paragraph("Capitalized text.").SetTransformation(TextTransformation.Capitalize)

Abbreviations

Use .Abbreviation() to create abbreviations and acronyms. You can also use .SetInitialism() to give the abbreviation a slightly smaller font size.

An abbreviation of the word attribute is attr.

HTML is the best thing since sliced bread.

<p>An abbreviation of the word attribute is @Html.Bootstrap().Abbreviation("attribute", "attr").</p>
<p>@Html.Bootstrap().Abbreviation("HyperText Markup Language", "HTML").SetInitialism() is the best thing since sliced bread.</p>

Addresses

Wrap addresses with .Address().

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
@using(Html.Bootstrap().Address().Begin())
{
    <text>
        <strong>Twitter, Inc.</strong><br>
        795 Folsom Ave, Suite 600<br>
        San Francisco, CA 94107<br>
        @Html.Bootstrap().Abbreviation("Phone", "P:") (123) 456-7890
    </text>
}
@using (Html.Bootstrap().Address().Begin())
{
    <strong>Full Name</strong><br>
    @Html.Bootstrap().Link("first.last@example.com", "mailto:")
}

Blockquotes

Use .Blockquote() for creating blockquotes. You can also use .SetReverse() to make the content right-aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
@Html.Bootstrap().Blockquote("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.")
@Html.Bootstrap().Blockquote("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.", "Someone famous in Source Title")
@Html.Bootstrap().Blockquote("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.", "Someone famous in Source Title").SetReverse()
@using(Html.Bootstrap().Blockquote().Begin())
{
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in @Html.Bootstrap().Cite("Source Title", "Source Title")</footer>
}

Use .List() to create different styles of lists. This method takes an optional ListType enumeration that indicates the style of list to create. By default the list is unstyled if no ListType is supplied. You don't need to worry about ul vs. ol and which CSS styles to apply. Within the list use .ListItem() to create individual list items. This method takes an optional string that contains the content for the item. You can also nest lists just as you would in HTML.

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Aenean sit amet erat nunc
@using(var list = Html.Bootstrap().List(ListType.Unordered).Begin())
{
    @list.ListItem("Lorem ipsum dolor sit amet")
    @list.ListItem("Consectetur adipiscing elit")
    @list.ListItem("Integer molestie lorem at massa")
    using (var innerList = Html.Bootstrap().List(ListType.Unordered).Begin())
    {
        @innerList.ListItem("Phasellus iaculis neque")
        @innerList.ListItem("Vestibulum laoreet porttitor sem")
    }
    @list.ListItem("Aenean sit amet erat nunc")
}

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
    1. Phasellus iaculis neque
    2. Vestibulum laoreet porttitor sem
  4. Aenean sit amet erat nunc
@using(var list = Html.Bootstrap().List(ListType.Ordered).Begin())
{
    @list.ListItem("Lorem ipsum dolor sit amet")
    @list.ListItem("Consectetur adipiscing elit")
    @list.ListItem("Integer molestie lorem at massa")
    using (var innerList = Html.Bootstrap().List(ListType.Ordered).Begin())
    {
        @innerList.ListItem("Phasellus iaculis neque")
        @innerList.ListItem("Vestibulum laoreet porttitor sem")
    }
    @list.ListItem("Aenean sit amet erat nunc")
}

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Aenean sit amet erat nunc
@using(var list = Html.Bootstrap().List(ListType.Unstyled).Begin())
{
    @list.ListItem("Lorem ipsum dolor sit amet")
    @list.ListItem("Consectetur adipiscing elit")
    @list.ListItem("Integer molestie lorem at massa")
    using (var innerList = Html.Bootstrap().List(ListType.Unordered).Begin())
    {
        @innerList.ListItem("Phasellus iaculis neque")
        @innerList.ListItem("Vestibulum laoreet porttitor sem")
    }
    @list.ListItem("Aenean sit amet erat nunc")
}

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
@using(var list = Html.Bootstrap().List(ListType.Inline).Begin())
{
    @list.ListItem("Lorem ipsum dolor sit amet")
    @list.ListItem("Phasellus iaculis")
    @list.ListItem("Nulla volutpat")
}

Descriptions

To create a description list, use .DescriptionList(). Then alternate between terms and descriptions with .DescriptionTerm() and .Description().

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
@using(var list = Html.Bootstrap().DescriptionList().Begin())
{
    @list.DescriptionTerm("Description lists")
    @list.Description("A description list is perfect for defining terms.")
    @list.DescriptionTerm("Euismod")
    @list.Description("Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.")
    @list.DescriptionTerm("Malesuada porta")
    @list.Description("Etiam porta sem malesuada magna mollis euismod.")
}

Horizontal Descriptions

You can also make description lists horizontal by using .SetHorizontal().

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
@using(var list = Html.Bootstrap().DescriptionList().SetHorizontal().Begin())
{
    @list.DescriptionTerm("Description lists")
    @list.Description("A description list is perfect for defining terms.")
    @list.DescriptionTerm("Euismod")
    @list.Description("Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.")
    @list.DescriptionTerm("Malesuada porta")
    @list.Description("Etiam porta sem malesuada magna mollis euismod.")
}

Data Binding

If you are using ASP.NET MVC you can easily generate a list from a model using the .ListFor() method. In addition to the ListType, this method takes a function to get a sequence of items from the model and a function to get content from each item in the sequence.

  • One
  • Two
  • Three
/*
Assume the following model:
{
    PropA = "A",
    PropB = 2,
    PropC = new Dictionary<int, string>()
    {
        { 1, "One"},
        { 2, "Two"},
        { 3, "Three"}
    }
}
*/

@Html.Bootstrap().ListFor(x => x.PropC, x => x.Value, ListType.Unordered)

FluentBootstrap has many methods designed to make it easy to build tables with a minimum amount of code. Start a table with the .Table() method. Add rows to the table using .TableRow(), which is only needed if you want direct control (table rows will be automatically added when needed). Add cells using either .TableHeader() or .TableData(), both of which accept optional content. By default, .TableHeader() will create a th and automatically put it inside a tr in a thead section. Likewise, .TableData() will create a td inside a tr and tbody section. Alternativly, you can explicitly create table sections using .TableHeadSection(), .TableBodySection(), and .TableFootSection(). If you have an array of content or can specify it all at once you can further simplify your code by using .TableHeaderRow() and .TableDataRow() to create entire rows of cells at once.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
@using(var table = Html.Bootstrap().Table().Begin())
{
    @table.TableHeaderRow("#", "First Name", "Last Name", "Username")
    using(var row = table.TableRow().Begin())
    {
        @row.TableData("1")
        @row.TableData("Mark")
        @row.TableData("Otto")
        @row.TableData("@mdo")
    }
    @table.TableDataRow("2", "Jacob", "Thornton", "@fat")
}

Striped

Use .SetStyle() to specify style options for the table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
@using(var table = Html.Bootstrap().Table().SetStyle(TableStyle.Striped).Begin())
{
    @table.TableHeaderRow("#", "First Name", "Last Name", "Username")
    @table.TableDataRow("1", "Mark", "Otto", "@mdo")
    @table.TableDataRow("2", "Jacob", "Thornton", "@fat")
}

Bordered

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry The Bird @twitter
@using (var table = Html.Bootstrap().Table().SetStyle(TableStyle.Bordered).Begin())
{
    @table.TableHeaderRow("#", "First Name", "Last Name", "Username")
    using(table.TableDataRow().Begin())
    {
        @table.TableData("1").RowSpan(2)
        @table.TableData("Mark")
        @table.TableData("Otto")
        @table.TableData("@mdo")
    }
    using(table.TableDataRow().Begin())
    {
        @table.TableData("Mark")
        @table.TableData("Otto")
        @table.TableData("@TwBootstrap")
    }
    @table.TableDataRow("2", "Jacob", "Thornton", "@fat")
    using (table.TableDataRow().Begin())
    {
        @table.TableData("3")
        @table.TableData("Larry The Bird").ColSpan(2)
        @table.TableData("@twitter")
    }
}

Hover

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry The Bird @twitter
@using (var table = Html.Bootstrap().Table().SetStyle(TableStyle.Hover).Begin())
{
    @table.TableHeaderRow("#", "First Name", "Last Name", "Username")
    @table.TableDataRow("1", "Mark", "Otto", "@mdo")
    @table.TableDataRow("2", "Jacob", "Thornton", "@fat")
    using (table.TableDataRow().Begin())
    {
        @table.TableData("3")
        @table.TableData("Larry The Bird").ColSpan(2)
        @table.TableData("@twitter")
    }
}

Condensed

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry The Bird @twitter
@using (var table = Html.Bootstrap().Table().SetStyle(TableStyle.Condensed).Begin())
{
    @table.TableHeaderRow("#", "First Name", "Last Name", "Username")
    @table.TableDataRow("1", "Mark", "Otto", "@mdo")
    @table.TableDataRow("2", "Jacob", "Thornton", "@fat")
    using (table.TableDataRow().Begin())
    {
        @table.TableData("3")
        @table.TableData("Larry The Bird").ColSpan(2)
        @table.TableData("@twitter")
    }
}

Contextual States

Use .SetState() on rows or cells to specify a state (which generally changes the color of the row or cell).

# Heading Heading Heading
1 Content Content Content
2 Content Content Content
3 Content Content Content
4 Content Content Content
5 Content Content Content
6 Content Content Content
7 Content Content Content
8 Content Content Content
9 Content Content Content
@using (var table = Html.Bootstrap().Table().Begin())
{
    @table.TableHeaderRow("#", "Heading", "Heading", "Heading")
    @table.TableDataRow("1", "Content", "Content", "Content")
    @table.TableDataRow("2", "Content", "Content", "Content").SetState(TableState.Active)
    @table.TableDataRow("3", "Content", "Content", "Content").SetState(TableState.Success)
    @table.TableDataRow("4", "Content", "Content", "Content").SetState(TableState.Info)
    @table.TableDataRow("5", "Content", "Content", "Content").SetState(TableState.Warning)
    @table.TableDataRow("6", "Content", "Content", "Content").SetState(TableState.Danger)
    @table.TableDataRow("7", "Content", "Content", "Content").SetState(TableState.Default)
    using(var row = table.TableDataRow().Begin())
    {
        @row.TableData("8")
        @row.TableData("Content").SetState(TableState.Active)
        @row.TableData("Content").SetState(TableState.Success)
        @row.TableData("Content").SetState(TableState.Info)
    }
    using (var row = table.TableDataRow().Begin())
    {
        @row.TableData("9")
        @row.TableData("Content").SetState(TableState.Warning)
        @row.TableData("Content").SetState(TableState.Danger)
        @row.TableData("Content").SetState(TableState.Default)
    }
}

Responsive Tables

Use .SetResponsive() to indicate that the table should scroll horizontally on small devices (you don't need to worry about a wrapping element as in Bootstrap).

# Heading Heading Heading Heading Heading Heading
1 Content Content Content Content Content Content
2 Content Content Content Content Content Content
3 Content Content Content Content Content Content
@using (var table = Html.Bootstrap().Table().SetStyle(TableStyle.Bordered | TableStyle.Striped).SetResponsive().Begin())
{
    @table.TableHeaderRow("#", "Heading", "Heading", "Heading", "Heading", "Heading", "Heading")
    @table.TableDataRow("1", "Content", "Content", "Content", "Content", "Content", "Content")
    @table.TableDataRow("2", "Content", "Content", "Content", "Content", "Content", "Content")
    @table.TableDataRow("3", "Content", "Content", "Content", "Content", "Content", "Content")
}

FluentBootstrap supports the full set of form styles from Bootstrap and helps abstract some of the noise in specifying them via HTML (such as wrapping from controls with form-group divs). FluentBootstrap also includes advanced model binding support explained below.

To create a form, use .Form() which optionally accepts an action (URL) and/or method (POST, GET, etc). If using FluentBootstrap.Mvc you can specify an action and controller. If using FluentBootstrap.Mvc.T4MVC you can specify a T4MVC ActionResult.

@using(var form = Html.Bootstrap().Form().Begin())
{
    @form.Input("name", "Your Name")
    @form.CheckBox("check", "Check me out")
    @form.Submit()
}

Inline

Use .SetInline() to make the form inline. This will automatically make the necessary changes to markup for any form controls inside the form (including in partial views, etc).

@using(var form = Html.Bootstrap().Form().SetInline().Begin())
{
    @form.Input("name", "Your Name")
    @form.CheckBox("check", "Check me out")
    @form.Submit()
}

Horizontal

Use .SetHorizontal() to make the form labels appear next to the controls. This method optionally accepts a label width that specifies how many grid columns the labels in the form should take (by default this is 4). This will automatically make the necessary changes to markup for any form controls inside the form (including in partial views, etc).

@using(var form = Html.Bootstrap().Form().SetHorizontal(6).Begin())
{
    @form.Input("name", "Your Name")
    @form.CheckBox("check", "Check me out")
    @form.Submit()
}

You can turn horizontal support off for specific form controls by explicitly specifying the form group (more on form groups below) and using .SetHorizontal(false). You can further customize the column widths by explicitly specifying the form group, using .SetAutoColumns(false), and then applying the same column extensions you use for grids such as .SetMd(), .SetMdOffset(), etc. to control labels and form controls.

@using (var form = Html.Bootstrap().Form().SetHorizontal(6).Begin())
{
    using (form.FormGroup("Your Name").SetHorizontal(false).Begin())
    {
        @form.Input("name")
    }
    using (form.FormGroup().SetAutoColumns(false).Begin())
    {
        @form.ControlLabel("Your Email").SetMd(9)
        @form.Input("email").SetMd(3)
    }
    @form.CheckBox("check", "Check me out")
    @form.Submit()
}

Form Groups

Bootstrap provides styling to form controls by wrapping them and their labels in elements with the CSS class form-group. FluentBootstrap handles the creation of these form-group wrapper elements transparently so that you don't need to worry about them, but there may be times when you want a little more control (for example, to add additional content inside the form group for a given form control). You can explicitly create a form group with .FormGroup(). Doing so turns off the automatic form group creation for any form control contained within. You can also turn off form group creation by using .EnsureFormGroup(false) for any form control, which won't generate any wrapping element for that form control. As demonstrated above, use .SetHorizontal() to control whether an individual form group should be styled horizontally and .SetAutoColumns() to control whether a form group should automatically generate the appropriate grid column wrappers that are necessary for horizontal forms to look right (for example, turn off auto columns if you want to manually control the grid layout of a horizontal form).

Hidden Inputs

Create hidden inputs with .Hidden(). You can specify a name and value in the .Hidden() call or use .SetName() and .SetValue().

Inputs

Use .Input() to create form inputs. This method optionally takes a name, label, value, and value format. It also accepts a FormInputType to specify the type of input control. If you specify a label or use .SetControlLabel() to set a label, a label HTML element will be automatically generated for the input and placed in the appropriate form group (with grid wrappers for horizontal forms if necessary). Use .SetPlaceholder() to set placeholder text for the input. Use .SetReadonly() to make the input readonly. Use .SetFeedback() to apply an icon to the input. Use .SetValue() to set the value for the input. Note that many of these extensions are also available for other form controls.

Note that on older browsers and IE certain form input types will just appear as text inputs.
@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.Input("name", "Your Name")
    @form.Input("password", "Your Password", inputType: FormInputType.Password).SetPlaceholder("Enter your password")
    @form.Input("readonly", "Readonly").SetValue("Some readonly content.").SetReadonly()
    @form.Input("color", inputType: FormInputType.Color).SetControlLabel("Favorite Color")
    @form.Input(inputType: FormInputType.DateTime).SetHelp("Note that on older browsers and IE certain form input types will just appear as text inputs.")
    @form.Submit()
}

Text Areas

Create a text area with .TextArea(). Use .SetRows() to set the number of rows.

@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.TextArea("a", "Area A")
    @form.TextArea("b", "Area B", rows: 5)
    @form.TextArea("c", "Area C").SetRows(5).SetPlaceholder("Type your stuff here.")
    @form.Submit()
}

Checkboxes and Radios

Create checkboxes with .CheckBox() and radios with .Radio(). Use .SetDescription() to specify an extra description to appear next to the control (in addition to the label). Use .SetChecked() to specify if the control should be checked. Use .SetInline() to make the control inline.

Normal Form






Horizontal Form



@Html.Bootstrap().Heading4("Normal Form")
@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.CheckBox("a", "A", "Option A")
    @form.CheckBox("b", null, "Option B")
    @form.CheckBox("c", "C")
    <hr />
    @form.Radio("d", "D1", "Option D1")
    @form.Radio("d", null, "Option D2")
    @form.Radio("d", "D3")
    <hr />
    using(form.FormGroup().Begin())
    {
        @form.CheckBox("a", "A", "Option A").SetInline()
        @form.CheckBox("b", null, "Option B").SetInline()
        @form.CheckBox("c", "C").SetInline()
    }
    <hr />
    using (form.FormGroup().Begin())
    {
        @form.Radio("e", "E1", "Option E1").SetInline()
        @form.Radio("e", null, "Option E2").SetInline()
        @form.Radio("e", "E3").SetInline()
    }
    <hr />
    @form.Submit()
}
<hr />
@Html.Bootstrap().Heading4("Horizontal Form")
@using (var form = Html.Bootstrap().Form().SetHorizontal().Begin())
{
    @form.Radio("d", "D1", "Option D1")
    @form.Radio("d", null, "Option D2")
    @form.Radio("d", "D3")
    <hr />
    using(form.FormGroup().Begin())
    {
        @form.CheckBox("a", "A", "Option A").SetInline()
        @form.CheckBox("b", null, "Option B").SetInline()
        @form.CheckBox("c", "C").SetInline()
    }
    <hr />
    @form.Submit()
}

Selects

Create a select control with .Select(). You can set it to a multiple select with .SetMultiple(). You can add options in the .Select() call or by using .AddOption() or .AddOptions().

@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.Select("color", "Color", "Red", "Green", "Blue")
    @form.Select("letter", "Letter").SetMultiple().AddOptions("a", "b", "c")
    var select = form.Select("number", "Number");
    for(int c = 1 ; c < 4 ; c++)
    {
        select.AddOption(c.ToString());
    }
    @select
    @form.Submit()
}

Static Text

Create static text within a form using .Static().

email@example.com

@using (var form = Html.Bootstrap().Form().SetHorizontal().Begin())
{
    @form.Static("Email", "email@example.com")
    @form.Input("password", "Password")
    @form.Submit()
}

Form Buttons

To create a submit button use .Submit(). To create a reset button use .Reset(). You can override the text on both the submit and reset button by supplying it or by using .SetText(). You can also manually create a button with .FormButton() or .InputButton() depending on if you want a button or input HTML element.

@using (var form = Html.Bootstrap().Form().SetHorizontal().Begin())
{
    @form.Input("name", "Name")
    using(form.FormGroup().Begin())
    {
        @form.Submit()
        @form.Reset("Clear Everything")
        @form.FormButton("Do Something Else")
    }
}

Validation States

To add validation styles to form controls, use .SetState() which takes a ValidationState that determines the style of the control.

@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.Input("success", "Input With Success").SetState(ValidationState.Success)
    @form.Input("warning", "Input With Warning").SetState(ValidationState.Warning)
    @form.Input("error", "Input With Error").SetState(ValidationState.Error)
    @form.CheckBox("check", null, "Checkbox with warning").SetState(ValidationState.Warning)
    @form.TextArea("textarea", "Textarea with error").SetState(ValidationState.Error)
    @form.Select("select", "Select with success", "A", "B", "C").SetState(ValidationState.Success)
    @form.Submit()
}

Control Sizing

You can change the size of form controls with .SetSize() which takes a InputSize enum.

@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.Input("large", "Large input").SetSize(InputSize.Lg)
    @form.Input("small", "Small input").SetSize(InputSize.Sm)
    @form.Select("large", "Large select", "A", "B", "C").SetSize(InputSize.Lg)
    @form.Select("small", "Small select", "A", "B", "C").SetSize(InputSize.Sm)
    @form.Submit()
}

Help Text

Use .SetHelp() to output help text for a form control.

Please enter your full first and last name.
@using (var form = Html.Bootstrap().Form().Begin())
{
    @form.Input("name", "Name").SetHelp("Please enter your full first and last name.")
    @form.Submit()
}

Data Binding

If you're using FluentBootstrap.Mvc then a lot of data binding and other MVC functionality is available.

Validation Summaries

ASP.NET MVC automatically generates a validation summary for forms when there are errors in the ModelState. FluentBootstrap automatically generates the appropriate form attributes to ensure correct association with the controller and formats the validation summary if one is available. You can hide the validation summary with .HideValidationSummary(). By default, FluentBootstrap places the validation summary at the end of the form. You can place it in an alternate location by using .ValidationSummary() which will render it where requested and not at the end of the form. When using .ValidationSummary() you can opt to include or exclude individual property errors with .IncludePropertyErrors().

Individual form controls can also contain validation data. FluentBootstrap handles individual validation errors, renders them next to the control for the model-bound property in question, and styles the control and validation text with the MVC validation CSS class (specifically, HtmlHelper.ValidationInputCssClassName).

Note that the CSS classes applied to validation errors are normal MVC validation classes and not the Bootstrap has-error class. This is to ensure consistency across forms and to support other MVC components and plugins that look for these standard CSS classes (such as the MVC jQuery validation library). If you want the validation errors to match your Bootstrap appearance you should style the CSS classes input-validation-error, field-validation-error, and validation-summary-errors.

Editor and Display Templates

You can render editor or display templates for any model property by using .EditorFor() and .DisplayFor(). The advantage of using the FluentBootstrap versions of these methods is that it renders the appropriate template via ASP.NET MVC and then adds additional wrapping elements, styling, etc. as needed to make the templates match the Bootstrap form styling.

You can also render a sequence of editor or display templates by using .DisplayListFor() or .EditorListFor(). These work similar to .EditorFor() and .DisplayFor() except that they render an entire sequence of data.

You can also output an editor or a display template for a given model property depending on a condition by using .EditorOrDisplayFor(). This is useful in cases such as checking if a user has specific permissions and then showing them an editor or just displaying the data depending on the result (instead of having to wrap everything in a condition).

You can create a variety of different buttons. Use .Button() to create standard button HTML elements (and use .FormButton(), .Submit(), or .Reset() to create button elements within a form to automatically generate the extra form wrapping elements). Use .LinkButton() to create buttons based on a HTML elements. As discussed above, you can also use .InputButton() to create buttons based on input HTML elements. All three button types share common styling and behavior extensions.

Link
@Html.Bootstrap().Button("Button")
@Html.Bootstrap().LinkButton("Link")
@Html.Bootstrap().InputButton("Input")
@Html.Bootstrap().InputButton("Submit", buttonType: ButtonType.Submit)            
@Html.Bootstrap().Submit("Another Submit")

States

Use .SetState(), which takes a ButtonState enum, to change the state of the button (which generally means changing it's color). ButtonState.Link is a special state that makes the button look like a link.

Success
@Html.Bootstrap().Button("Primary").SetState(ButtonState.Primary)
@Html.Bootstrap().LinkButton("Success").SetState(ButtonState.Success)
@Html.Bootstrap().InputButton("Info").SetState(ButtonState.Info)
@Html.Bootstrap().InputButton("Warning", buttonType: ButtonType.Submit).SetState(ButtonState.Warning)
@Html.Bootstrap().Submit("Danger").SetState(ButtonState.Danger)
@Html.Bootstrap().Button("Link").SetState(ButtonState.Link)

Sizes

Use .SetSize(), which takes a ButtonSize enum, to change the size of a button.

@Html.Bootstrap().Button("Xs").SetSize(ButtonSize.Xs)
@Html.Bootstrap().Button("Sm").SetSize(ButtonSize.Sm)
@Html.Bootstrap().Button("Default").SetSize(ButtonSize.Default)
@Html.Bootstrap().Button("Lg").SetSize(ButtonSize.Lg)

Use .SetBlock() to make the button block-level.

@Html.Bootstrap().Button("Xs").SetSize(ButtonSize.Xs).SetBlock()
@Html.Bootstrap().Button("Default").SetBlock()

Disabled

Use .IsDisabled() for buttons and input buttons and .SetDisabled() for link buttons to make the buttons appear disabled (the different method names are to avoid ambiguous name resolution problems in the compiler).

Link
@Html.Bootstrap().Button("Button").IsDisabled()
@Html.Bootstrap().LinkButton("Link").SetDisabled()
@Html.Bootstrap().InputButton("Input").IsDisabled()

Create an image using .Image(). You can specify that the image is a link by using .SetHref().

Placeholder Image
@Html.Bootstrap().Image("http://placehold.it/350x150", "Placeholder Image")

Responsive Images

Make your image responsive so that it scales to the parent element by using .SetResponsive().

Placeholder Image
@Html.Bootstrap().Image("http://placehold.it/3000x500", "Placeholder Image").SetResponsive()

Image Shapes

You can apply a variety of shapes to your image using .SetStyle() which takes a ImageStyle enum.

Rounded Image Circle Image Thumbnail Image
@Html.Bootstrap().Image("http://placehold.it/140x140", "Rounded Image").SetStyle(ImageStyle.Rounded)
@Html.Bootstrap().Image("http://placehold.it/140x140", "Circle Image").SetStyle(ImageStyle.Circle)
@Html.Bootstrap().Image("http://placehold.it/140x140", "Thumbnail Image").SetStyle(ImageStyle.Thumbnail)

Contextual Colors

You can change the state of text for any component using .SetState() which takes a TextState enum.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
@Html.Bootstrap().Paragraph("Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.").SetState(TextState.Muted)
@Html.Bootstrap().Span("Nullam id dolor id nibh ultricies vehicula ut id elit.").SetState(TextState.Primary)
@Html.Bootstrap().Div("Duis mollis, est non commodo luctus, nisi erat porttitor ligula.").SetState(TextState.Success)
@Html.Bootstrap().Paragraph("Maecenas sed diam eget risus varius blandit sit amet non magna.").SetState(TextState.Info)
@Html.Bootstrap().Span("Etiam porta sem malesuada magna mollis euismod.").SetState(TextState.Warning)
@Html.Bootstrap().Div("Donec ullamcorper nulla non metus auctor fringilla.").SetState(TextState.Danger)

Contextual Backgrounds

Similar to contextual colors, you can also change the background of any component with .SetBackgroundState() which takes a BackgroundState enum.

Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
@Html.Bootstrap().Paragraph("Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.").SetState(TextState.Muted)
@Html.Bootstrap().Span("Nullam id dolor id nibh ultricies vehicula ut id elit.").SetState(TextState.Primary)
@Html.Bootstrap().Div("Duis mollis, est non commodo luctus, nisi erat porttitor ligula.").SetState(TextState.Success)
@Html.Bootstrap().Paragraph("Maecenas sed diam eget risus varius blandit sit amet non magna.").SetState(TextState.Info)
@Html.Bootstrap().Span("Etiam porta sem malesuada magna mollis euismod.").SetState(TextState.Warning)
@Html.Bootstrap().Div("Donec ullamcorper nulla non metus auctor fringilla.").SetState(TextState.Danger)

Close Buttons

Use .Close() to create a close button.

@Html.Bootstrap().Close()

Carets

Use .Caret() to create a caret.

@Html.Bootstrap().Caret()

Element Positioning

Use .SetPullLeft() and .SetPullRight() to easily float any component to the left or right. You can also create floated containers with .PullLeft() and .PullRight(). Use .SetCenterBlock() to center any component and .CenterBlock() to create a centered container. Use .Clearfix() to easily clear floats.

Floated right.

Floated left.

Center block.
@Html.Bootstrap().Paragraph("Floated right.").SetBackgroundState(BackgroundState.Primary).SetPullRight()
@using(Html.Bootstrap().PullLeft().Begin())
{
    @Html.Bootstrap().Paragraph("Floated left.").SetBackgroundState(BackgroundState.Success)
}
@Html.Bootstrap().Clearfix()
@Html.Bootstrap().Span("Center block.").SetBackgroundState(BackgroundState.Info).SetCenterBlock()

Element Visibility

Use .SetVisibility() to adjust the visibility of any component. This method takes a Visibility flags enum that includes normal visibility toggles like Visibility.Show and Visibility.Hidden (which show and hide content respectively) as well as responsive visibility flags such as Visibility.VisibleXsBlock, Visibility.VisibleXsInline and Visibility.VisibleXsInlineBlock. See this Bootstrap documentation for more information on responsive element visibility.

The best way to get help is to post a question on StackOverflow with the FluentBootstrap tag. If you find a bug, open an issue on GitHub. You can also tweet or follow @daveaglick with questions or for announcements.


FluentBootstrap is crafted by Dave Glick. Code on GitHub.