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)
.AddWhiteIcon(bootstrap-icon)
.AddWhiteIcon(fontawesome-icon) 
.AddWhiteIcon(fontawesome-icon, fontawesome-icon-size)
  

Button styled hyperlinks

Markup

@Html.Hyperlink("Take me to google", "http://www.google.com")
  .AddWhiteIcon(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