Components

This section explains components that are provided by the Bootstrap framework. FluentBootstrap implements all components from Bootstrap. For more information see the Bootstrap documentation.

FluentBootstrap has full support for all Glyphicons shipped with Bootstrap. They can be accessed through the Icon enum wherever appropriate. You can create a standalone icon with .Icon().

This Is A Heading



@Html.Bootstrap().Icon(Icon.Star)
@Html.Bootstrap().Icon(Icon.Asterisk).SetState(TextState.Danger)
@using(Html.Bootstrap().Heading2().Begin())
{
    <text>@Html.Bootstrap().Icon(Icon.ArrowRight) This Is A Heading</text>
}
@Html.Bootstrap().Button(Html.Bootstrap().Icon(Icon.RemoveCircle).ToString() + " Delete Something")
<br /><br />
@using(Html.Bootstrap().Alert(AlertState.Warning).Begin())
{
    <text>@Html.Bootstrap().Icon(Icon.ExclamationSign) Oh, no! Something went wrong...</text>
}

Some components such as buttons also support directly specifying an icon with .SetIcon().

@Html.Bootstrap().Button("Favorite").SetIcon(Icon.Star)

Create dropdowns using .Dropdown(). Use .DropdownLink to create link items, .DropdownHeader() to create headers, and .DropdownDivider() to create dividers. Additionally, if you're using FluentBootstrap.Mvc or FluentBootstrap.Mvc.T4MVC you can use .DropdownLink() to specify dropdown links with an action and controller or with a ActionResult. You can also disable a dropdown link with .SetDisabled().

@using(var dropdown = Html.Bootstrap().Dropdown("My Dropdown").Begin())
{
    @dropdown.DropdownLink("Action", "/Action")
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownLink("Another Action", "/AnotherAction").SetState(TextState.Primary)
    @dropdown.DropdownLink("Disabled Link", "/Disabled").SetDisabled()
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("Google", "http://www.google.com")
}

Create a button group with .ButtonGroup().

Right
@group.Button("Left")
@group.Button("Middle")
@group.LinkButton("Right", "http://www.getbootstrap.com")

Button Toolbars

You can create button toolbars, which are a container for button groups, with .ButtonToolbar().

@using(var toolbar = Html.Bootstrap().ButtonToolbar().Begin())
{
    using(var group = toolbar.ButtonGroup().Begin())
    {
        @group.Button("1")
        @group.Button("2")
        @group.Button("3")
    }
    using (var group = toolbar.ButtonGroup().Begin())
    {
        @group.LinkButton("4", "http://www.getbootstrap.com")
    }
    using (var group = toolbar.ButtonGroup().Begin())
    {
        @group.Button("5")
        @group.Button("6")
    }
}

Sizing

Size all of the buttons in a group with .SetSize().

L
L
L
@using (var group = Html.Bootstrap().ButtonGroup().SetSize(ButtonGroupSize.Lg).Begin())
{
        @group.LinkButton("L")
        @group.Button("A")
        @group.Button("B").SetIcon(Icon.Pencil)
}
@using (var group = Html.Bootstrap().ButtonGroup().SetSize(ButtonGroupSize.Sm).Begin())
{
    @group.Button("C")
    @group.LinkButton("L").SetIcon(Icon.Phone)
    @group.Button("D")
}
@using (var group = Html.Bootstrap().ButtonGroup().SetSize(ButtonGroupSize.Xs).Begin())
{
    @group.Button("E").SetIcon(Icon.Tags)
    @group.Button("F")
    @group.LinkButton("L")
}

Group Dropdowns

You can create dropdowns inside of a button group with .Dropdown().

L
@using (var group = Html.Bootstrap().ButtonGroup().Begin())
{
    @group.Button("A")
    @group.LinkButton("L")
    using (var dropdown = group.Dropdown("Dropdown").Begin())
    {
        @dropdown.DropdownLink("B")
        @dropdown.DropdownLink("C")
    }
    using (var dropdown = group.Dropdown("Styled").SetState(ButtonState.Danger).Begin())
    {
        @dropdown.DropdownLink("D")
        @dropdown.DropdownLink("E")
    }
}

Vertical Button Groups

You can make your button group vertical by using .SetVertical().

L
@using (var group = Html.Bootstrap().ButtonGroup().SetVertical().Begin())
{
    @group.Button("A")
    @group.LinkButton("L")
    using (var dropdown = group.Dropdown("Dropdown").Begin())
    {
        @dropdown.DropdownLink("B")
        @dropdown.DropdownLink("C")
    }
    using (var dropdown = group.Dropdown("Styled").SetState(ButtonState.Danger).Begin())
    {
        @dropdown.DropdownLink("D")
        @dropdown.DropdownLink("E")
    }
}

Justified Button Groups

You can make a button group span the entire width of it's parent by using .SetJustified().

A
Long Link Text
@using (var group = Html.Bootstrap().ButtonGroup().SetJustified().Begin())
{
    @group.LinkButton("A")
    @group.Button("B")
    @group.LinkButton("Long Link Text")
    using (var dropdown = group.Dropdown("Dropdown").Begin())
    {
        @dropdown.DropdownLink("C")
        @dropdown.DropdownLink("D")
    }
}

You can make dropdowns based on button elements with .ButtonDropdown(). Any extensions you would apply to a button can also be applied to the button dropdown.

@using (var dropdown = Html.Bootstrap().ButtonDropdown("Default").Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}
@using (var dropdown = Html.Bootstrap().ButtonDropdown("Primary").SetState(ButtonState.Primary).Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}

Split Button Dropdowns

Use .SetSplit() to split the button and the dropdown.

@using (var dropdown = Html.Bootstrap().ButtonDropdown("Default").SetSplit().Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}
@using (var dropdown = Html.Bootstrap().ButtonDropdown("Primary").SetSplit().SetState(ButtonState.Primary).Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}

Button Dropdown Sizes

As with normal buttons, use .SetSize() to set the size of the dropdown button.

@using (var dropdown = Html.Bootstrap().ButtonDropdown("Large").SetSize(ButtonSize.Lg).Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}
@using (var dropdown = Html.Bootstrap().ButtonDropdown("Small").SetSplit().SetState(ButtonState.Primary).SetSize(ButtonSize.Sm).Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}
@using (var dropdown = Html.Bootstrap().ButtonDropdown("Extra Small").SetSplit().SetSize(ButtonSize.Xs).Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}

Dropup Buttons

You can make the menu appear above the button by using .SetDropup().

@using (var dropdown = Html.Bootstrap().ButtonDropdown("Dropup").SetDropup().Begin())
{
    @dropdown.DropdownHeader("Header")
    @dropdown.DropdownDivider()
    @dropdown.DropdownLink("A")
    @dropdown.DropdownLink("B", "http://www.google.com")
}

Input groups allow you to add text or buttons before or after any form input. You can create input groups by wrapping your form controls with .InputGroup(). Then, use .InputGroupAddon() to add text to the left or right of the input control.

@

.00

$ .00
@using (var form = Html.Bootstrap().Form().Begin())
{
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.InputGroupAddon("@")
        @inputGroup.Input().SetPlaceholder("Username")
    }
    <br />
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.Input()
        @inputGroup.InputGroupAddon(".00")
    }
    <br />
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.InputGroupAddon("$")
        @inputGroup.Input()
        @inputGroup.InputGroupAddon(".00")
    }
}

Input Group Sizing

You can change the size of the input group with .SetSize().

@

.00
@using (var form = Html.Bootstrap().Form().Begin())
{
    using (var inputGroup = form.InputGroup().SetSize(InputGroupSize.Lg).Begin())
    {
        @inputGroup.InputGroupAddon("@")
        @inputGroup.Input().SetPlaceholder("Username")
    }
    <br />
    using (var inputGroup = form.InputGroup().SetSize(InputGroupSize.Sm).Begin())
    {
        @inputGroup.Input()
        @inputGroup.InputGroupAddon(".00")
    }
}

Checkboxes and Radios

Add checkboxes and radios to your input groups by adding .CheckBox() and .Radio() as children of .InputGroupAddon().


@using (var form = Html.Bootstrap().Form().Begin())
{
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.InputGroupAddon().AddChild(x => x.CheckBox())
        @inputGroup.Input().SetPlaceholder("Username")
    }
    <br />
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.Input()
        @inputGroup.InputGroupAddon().AddChild(x => x.Radio())
    }
}

Buttons

Add buttons to your input groups by adding .Button() as a child of .InputGroupButton() (as opposed to of .InputGroupAddon()).


@using (var form = Html.Bootstrap().Form().Begin())
{
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.InputGroupButton().AddChild(x => x.Button("Action"))
        @inputGroup.Input().SetPlaceholder("Username")
    }
    <br />
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.Input()
        @inputGroup.InputGroupButton().AddChild(x => x.Button("Action")).AddChild(x => x.Button("Another"))
    }
}

Dropdowns

Add dropdowns to your input groups by adding .Dropdown() as a child of .InputGroupButton().


@using (var form = Html.Bootstrap().Form().Begin())
{
    using (var inputGroup = form.InputGroup().Begin())
    {
        using (var button = inputGroup.InputGroupButton().Begin())
        {
            using (var dropdown = button.Dropdown("Dropdown").Begin())
            {
                @dropdown.DropdownLink("A")
                @dropdown.DropdownLink("B")
            }
        }
        @inputGroup.Input().SetPlaceholder("Username")
    }
    <br />
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.Input()
        using (var button = inputGroup.InputGroupButton().Begin())
        {
            using (var dropdown = button.Dropdown("Dropdown").Begin())
            {
                @dropdown.DropdownLink("A")
                @dropdown.DropdownLink("B")
            }
        }
    }
}

Split Dropdowns

Add split dropdowns to your input groups by adding seperate .Button() and .Dropdown() elements as children of .InputGroupButton().


@using (var form = Html.Bootstrap().Form().Begin())
{
    using (var inputGroup = form.InputGroup().Begin())
    {
        using (var button = inputGroup.InputGroupButton().Begin())
        {
            @button.Button("Action")
            using (var dropdown = button.Dropdown().Begin())
            {
                @dropdown.DropdownLink("A")
                @dropdown.DropdownLink("B")
            }
        }
        @inputGroup.Input().SetPlaceholder("Username")
    }
    <br />
    using (var inputGroup = form.InputGroup().Begin())
    {
        @inputGroup.Input()
        using (var button = inputGroup.InputGroupButton().Begin())
        {
            @button.Button("Action")
            using (var dropdown = button.Dropdown().Begin())
            {
                @dropdown.DropdownLink("A")
                @dropdown.DropdownLink("B")
            }
        }
    }
}

Tabs

Create tabbed navigation with .Tabs(). Set the active tab with .SetActive().

using(var tabs = Html.Bootstrap().Tabs().Begin())
{
    @tabs.Tab("Home").SetActive()
    @tabs.Tab("Profile", "http://www.google.com")
    @tabs.Tab("Messages")
}

Pills

Create pill navigation with .Pills(). Set the active pill with .SetActive().

@using (var pills = Html.Bootstrap().Pills().Begin())
{
    @pills.Pill("Home").SetActive()
    @pills.Pill("Profile", "http://www.google.com")
    @pills.Pill("Messages")
}

You can also orient pill navigation vertically with .SetStacked().

@using (var pills = Html.Bootstrap().Pills().SetStacked().Begin())
{
    @pills.Pill("Home").SetActive()
    @pills.Pill("Profile", "http://www.google.com")
    @pills.Pill("Messages")
}

Justified

You can justify tabs or pills with .SetJustified().

@using (var tabs = Html.Bootstrap().Tabs().SetJustified().Begin())
{
    @tabs.Tab("Home").SetActive()
    @tabs.Tab("Profile", "http://www.google.com")
    @tabs.Tab("Messages")
}
<br />
@using (var pills = Html.Bootstrap().Pills().SetJustified().Begin())
{
    @pills.Pill("Home").SetActive()
    @pills.Pill("Profile", "http://www.google.com")
    @pills.Pill("Messages")
}

Disabled

Make any nav item disabled with .SetDisabled().

@using (var tabs = Html.Bootstrap().Tabs().Begin())
{
    @tabs.Tab("Home").SetActive()
    @tabs.Tab("Profile", "http://www.google.com")
    @tabs.Tab("Messages").SetDisabled()
}
<br />
@using (var pills = Html.Bootstrap().Pills().Begin())
{
    @pills.Pill("Home").SetActive()
    @pills.Pill("Profile", "http://www.google.com")
    @pills.Pill("Messages").SetDisabled()
}

Dropdowns

Add dropdowns to any nav with .Dropdown().

@using (var tabs = Html.Bootstrap().Tabs().Begin())
{
    @tabs.Tab("Home").SetActive()
    @tabs.Tab("Profile", "http://www.google.com")
    using (var dropdown = tabs.Dropdown("Dropdown").Begin())
    {
        @dropdown.DropdownLink("Item 1")
        @dropdown.DropdownDivider()
        @dropdown.DropdownLink("Item 2")
    }
}
<br />
@using (var pills = Html.Bootstrap().Pills().Begin())
{
    @pills.Pill("Home").SetActive()
    @pills.Pill("Profile", "http://www.google.com")
    using (var dropdown = pills.Dropdown("Dropdown").Begin())
    {
        @dropdown.DropdownLink("Item 1")
        @dropdown.DropdownDivider()
        @dropdown.DropdownLink("Item 2")
    }
}

Create a simple navbar with .Navbar(). You can control whether the navbar is fluid (takes up the entire screen) with .SetFluid(). You can use .SetPosition() to determine the position of the navbar relative to the rest of the page. Use .SetInverse() to use an inverted color scheme for the navbar.

By default the navbar creates a brand section (with optionally specified link or the root of the site) and a mobile-ready navigation toggle for you. You can add links with .NavbarLink(), dropdowns with .Dropdown(), and inline forms with .NavbarForm().

@using (var navbar = Html.Bootstrap().Navbar("MyApp").Begin())
{
    @navbar.NavbarLink("A")
    @navbar.NavbarLink("B")
    using(var dropdown = navbar.Dropdown("Dropdown").Begin())
    {
        @dropdown.DropdownLink("A")
        @dropdown.DropdownLink("B")   
    }
    using(var form = navbar.NavbarForm().Begin())
    {
        @form.Input("search").SetPlaceholder("Search")
        @form.Submit()
    }
}

If you need more control, you can specify the entire layout of the navbar including the brand and mobile navigation toggle (or lack thereof).

@using (var navbar = Html.Bootstrap().Navbar().SetId("nav6").Begin())
{
    using (var navbarHeader = navbar.NavbarHeader().Begin())
    {
        @navbarHeader.Brand("MyApp")
        @navbarHeader.NavbarToggle()
    }
    using (var navbarCollapse = navbar.NavbarCollapse().Begin())
    {
        using (var nav = navbarCollapse.NavbarNav().Begin())
        {
            @nav.NavbarLink("A")
            using (var dropdown = nav.Dropdown("B").Begin())
            {
                @dropdown.DropdownLink("C")
                @dropdown.DropdownLink("D")
            }
        }
        using (var form = navbarCollapse.NavbarForm().Begin())
        {
            @form.Input("Search").SetPlaceholder("Search")
            @form.Submit("Submit")
        }
        using (var nav = navbarCollapse.NavbarNav().Begin())
        {
            @nav.NavbarLink("B")
        }
        @navbarCollapse.NavbarButton("Warn").SetState(ButtonState.Warning)
        using (navbarCollapse.NavbarText().SetRight().Begin())
        {
            <text>Logged in as @Html.Bootstrap().Link("Dave")</text>
        }
        using (var nav = navbarCollapse.NavbarNav().SetRight().Begin())
        {
            @nav.NavbarLink("R")
        }
    }
}

Create a breadcrumb with .Breadcrumb(). Add crumbs to it with .Crumb(). Set the active crumb with .SetActive().

@using (var breadcrumb = Html.Bootstrap().Breadcrumb().Begin())
{
    @breadcrumb.Crumb("First")
    @breadcrumb.Crumb("Second")
    @breadcrumb.Crumb("Third").SetActive()
}

Create a pagination with .Pagination() and add pages with .PageNum(). Use .SetActive() to indicate the active page and .SetDisabled() to indicate a disabled page.

@using (var pagination = Html.Bootstrap().Pagination().Begin())
{
    @pagination.PageNum("1", "http://google.com")
    @pagination.PageNum("2").SetActive()
    @pagination.PageNum("3").SetDisabled()
    @pagination.PageNum("4")
}

You can also fluently add pages, previous, and next items with .AddPage(), .AddPrevious(), and .AddNext(). You can use method arguments to indicate if a page should be active or disabled and to specify the link.

@Html.Bootstrap().Pagination().AddPrevious().AddPage("http://google.com").AddPage(active: true).AddPage(disabled: true).AddPage().AddNext()

Sizes

Adjust the size of a pagination with .SetSize().

@using (var pagination = Html.Bootstrap().Pagination().SetSize(PaginationSize.Lg).Begin())
{
    @pagination.PageNum("1", "http://google.com")
    @pagination.PageNum("2").SetActive()
    @pagination.PageNum("3").SetDisabled()
    @pagination.PageNum("4")
}
@Html.Bootstrap().Pagination().AddPrevious().AddPage("http://google.com").AddPage(active: true).AddPage(disabled: true).AddPage().AddNext().SetSize(PaginationSize.Sm)

Create a pager with .Pager(). Add pagers to it with .Page(). Use .SetActive() to indicate the active page and .SetDisabled() to indicate a disabled page. Similar to paginations, you can also create a pager using fluent methods.

@using (var pager = Html.Bootstrap().Pager().Begin())
{
    @pager.Page("Older", "http://google.com")
    @pager.Page("Archive").SetDisabled()
    @pager.Page("Newer")
}
@Html.Bootstrap().Pager().AddPrevious("Oldest").AddPrevious("Old", disabled: true).AddPage("Archive").AddNext("Newer")

Documentation for additional Bootstrap components is coming soon.

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.