Icon

Markup

@Html.Icon(EBootstrapIcon.Ok)
@Html.Icon(EFontAwesomeIcon.Ok)
@Html.Icon(EFontAwesomeIcon.Ok, EFontAwesomeIconSize.Large)
  

Output

Adding Icons to existing elements

Markup

@Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EBootstrapIcon.Ok)
  

Output

All available extensions

// Note that the 'Icon' can be a default Bootstrap Icon or a Font Awesome Icon
.AddIcon(bootstrap-Icon)                
.AddIcon(fontawesome-Icon)
.AddIcon(fontawesome-Icon, fontawesome-Icon-size)
  

As of Bootstrap v3.0 all icons/glyphicons are font based. Therefore, you can control the coloring of the icons using basic CSS styling.
As such if you try to use the AddWhiteIcon() extension you will get an InvalidOperationException.

Button styled hyperlinks

Markup

@Html.Hyperlink("Take me to google", "http://www.google.com")
  .AddIcon(EBootstrapIcon.Ok)
  .AsButton(EBootstrapButton.Info) 
  

Output

All available extensions

// Note that this extension can only be used for hyperlinks and button elements 
.AsButton(type) 
  

Navbar

Markup

@{
  // You can use Hyperlink elements or a HtmlList element to render a navbar
  Hyperlink link1 = new Hyperlink("Link 1", "#");
  Hyperlink link2 = new Hyperlink("Link 2", "#");
  Hyperlink link3 = new Hyperlink("Link 3", "#");
  Hyperlink link4 = new Hyperlink("Brand", "#", new { @class = "brand" });
        
  HtmlListItem item3 = new HtmlListItem(string.Empty);
  item3.Append(link3);        

  HtmlList list = new HtmlList(EList.Unordered, new HtmlListItem[] { item3 });    
}      

@Html.Navbar(EBootstrapNavbar.Normal, list)

// Use appropriate navbar type to get all bootstrap effects
@Html.Navbar(EBootstrapNavbar.Normal, link1, link2, link3, link4).AsInverse()  // Creates an inverse styled navbar
  

Output

Progress Bars

Markup

@Html.ProgressBar(EBootstrapProgressBar.Default, 10)
@Html.ProgressBar(EBootstrapProgressBar.Success, 25)
@Html.ProgressBar(EBootstrapProgressBar.Warning, 50).AsStriped()
@Html.ProgressBar(EBootstrapProgressBar.Danger, 75).AsAnimated()
  

Output

Striped and Animated progress bar CSS effects are not supported in Internet Explorer 9 and below and on Opera 12

Tooltips

Markup

@Html.TooltipFor(f => f.SomeProperty, "This is a tooltip")
@Html.TooltipFor(f => f.SomeProperty2)
  

Output

All available extensions

// Tooltip text retrieved from the System.ComponentModel.DescriptionAttribute added to the view model property
@Html.TooltipFor(propertySelector)
@Html.TooltipFor(propertySelector, placement, trigger)

// Tooltip text retrieved from the function parameter passed in
@Html.TooltipFor(propertySelector, tooltipText)
@Html.TooltipFor(propertySelector, tooltipText, placement, trigger)
  

Action messages

WebExtras provides a way to add action messages to denote status of action to notify a user. For e.g. you may want to add a message to the user when he is moved to a different page on a form submit or on a particular action

Usage

// In the controller
using WebExtras.MVC.Bootstrap.Core

public class HomeController : ControllerBase
{
  public ActionResult SomeAction()
  {
    SomeModel model = new SomeModel();
    return this.View("myview", model, "Your action was successful");
  }

  public ActionResult SomeOtherAction()
  {
    SomeModel model = new SomeModel();
    return this.RedirectToAction(myActionResult, "Your action failed", EActionMessage.Error);
  }
}

// In the view
@Html.GetLastActionMessage()
  

Output