FluentBootstrap provides extensions, helper classes, model binding, and other goodies to help you use the Bootstrap CSS framework from .NET code.

Free & Open Source Forever

Current and future versions will always be free and open source.

Developed in the open on GitHub.

Fork, contribute, discuss.

Designed For The Server

Focus on your code and not complex markup.

Deep integration with ASP.NET MVC.

Model binding, routing support, automatic navigation generation*, and more.

* Coming soon :)

Production Ready

Well over 100 tests and counting.

In production use on large-scale applications.

Supports a variety of different frameworks.

Developer Friendly

Bring your own Bootstrap: CSS, LESS, Sass, it's up to you.

Well documented.

Easily extensible.

The Bootstrap CSS framework is great. It provides a whole lot of useful components that can be leveraged on any web page. However, as with any complex CSS framework it requires you to specify particular CSS classes on specific HTML elements. FluentBootstrap abstracts most of this detail behind code so that you can think about what you want to present rather than how to present it.

Put simply, FluentBootstrap lets you output this HTML:

<nav class="navbar-static-top navbar-default navbar" 
 id="navbar" role="navigation">
 <div class="container-fluid">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">FluentBootstrap</a>
   <button class="collapsed navbar-toggle" data-target="#navbar-collapse"
    data-toggle="collapse" type="button">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  <div class="collapse navbar-collapse" id="navbar-collapse">
   <div class="navbar-left navbar-nav nav">
    <li><a href="/">Introduction</a></li>
    <li><a href="/Installation">Installation</a></li>
    <li><a href="/Usage">Usage</a></li>
    <li><a href="/Development">Development</a></li>

By writing this code instead:

@using (var navbar = Html.Bootstrap().Navbar("FluentBootstrap")
    @navbar.NavbarLink("Introduction", "/")
    @navbar.NavbarLink("Installation", "/Installation")
    @navbar.NavbarLink("Usage", "/Usage")
    @navbar.NavbarLink("Development", "/Development")

"Better" is such a subjective term. FluentBootstrap may not be for you if you prefer writing raw HTML or need the control the markup gives you. However, FluentBootstrap does offer the following advantages that may make generating Bootstrap HTML code easier in many situations:

The Bootstrap library follows SemVer which generally uses three version numbers to represent major, minor, and patch versions. Since a given version of FluentBootstrap works in tandem with a specific version of Bootstrap, FluentBootstrap uses four version numbers. The first three numbers track the version of Bootstrap that the library was developed against (that's not to say it won't work with other similar versions of Bootstrap, but there may be problems). The fourth version number is a build number that gets incremented on every build of FluentBootstrap (and is reset for each new Bootstrap version). All the FluentBootstrap libraries get updated at the same time for consistency, even if there weren't any changes. This helps ensure that the core FluentBootstrap library is always matched to the version of the extension libraries (like FluentBootstrap.Mvc).

Release Notes

Right now, the entire set of standard Bootstrap components are implemented, but none of the JavaScript ones are (such as modals). There are also a number of other near-term goals:

FluentBootstrap started from a need for a Bootstrap 3 compatible wrapper for the Bootstrap framework within a large enterprise line of business application. We had a lot of view code and maintaining it during Bootstrap upgrades was getting cumbersome. This was especially true when dealing with sections that included Bootstrap styled HTML for model-bound data. The initial internal versions of FluentBootstrap were designed to provide strongly-typed wrappers around HTML form elements to style model-bound data with the appropriate elements and CSS. From there it grew to encompass the entire Bootstrap framework (with the JavaScript components coming soon). It's been in production use internally for over a year and I'm happy to release it to the public now that it's shown to be stable.

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.