Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

Examples

Two basic options, along with two more specific variations.

Single button group

Wrap a list of Button() elements in Html.ButtonGroup().

@Html.ButtonGroup(
    Html.Button("Left"),
    Html.Button("Middle"),
    Html.Button("Right")
)

Multiple button groups

Combine sets of ButtonGroup() into a Toolbar() for more complex components.

@Html.Toolbar(
    Html.ButtonGroup(Html.Button("1"), Html.Button("2"), Html.Button("3"), Html.Button("4")),
    Html.ButtonGroup(Html.Button("5"), Html.Button("6"), Html.Button("7")),
    Html.ButtonGroup(Html.Button("8"))
)

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally by setting vertical to true in one of the overloads.

@Html.ButtonGroup(true, ... )

Examples and markup

Basic

Default progress bar with a vertical gradient.

@Html.ProgressBar(60)

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

@Html.ProgressBar(20).Striped()

Animated

Add .Animated() to animate the stripes right to left. Not available in all versions of IE.

@Html.ProgressBar(40).Animated()

Stacked

Define multiple bars in the same ProgressBar to stack them.

@Html.ProgressBar(b =>
{
    b.Bar(35).Success();
    b.Bar(20).Warning();
    b.Bar(10).Danger();
})

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

@Html.ProgressBar(20).Info()
@Html.ProgressBar(40).Success()
@Html.ProgressBar(60).Warning()
@Html.ProgressBar(80).Danger()

Striped bars

Similar to the solid colors, we have varied striped progress bars.

@Html.ProgressBar(20).Info().Striped()
@Html.ProgressBar(40).Success().Striped()
@Html.ProgressBar(60).Warning().Striped()
@Html.ProgressBar(80).Danger().Striped()

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.