I’m a big fan of Twitter’s Bootstrap html/css/javascript framework, and use it on practically all new web projects that I work on. It makes it super easy to quickly knock up a slick-looking web application, and since it’s built on less it’s really easy to customize the look of each site.

That said, the markup is complex enough that when developing sites I typically have the docs open in another tab at all times as a reference point, which lead me to start building little HtmlHelper extensions to create the more complicated elements, such as navbars, forms, etc. These extensions have been bounced around from project to project, and have ended up a little scrappy as they’ve been built as-and-when with no real planning, but they have been hugely useful, so I decided it was finally time to look at rewriting them. Check out the Bootstrap Extensions repo over on GitHub, or have a browse through the documentation (design somewhat inspired by the original bootstrap docs!).

The library is by no means complete, as of writing this I’ve only implemented lists, buttons, button groups + toolbars, navbars and progress bars; but it’s a start, and I intend to cover the majority of the more involved elements. I’ll also look at fine tuning the API to make development as pleasurable as possible.

Update: This project has been included on The Big Badass List of Twitter Bootstrap Resources. Check it out, there’s some brilliant useful stuff on there
Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

4 thoughts on “Bootstrap Extensions

  1. I’m trying to add target = _blank for the following:
    x.Link(“Name”, Url.Action(“https://xxxxx.com”));

    How would I accomplish this.

    Your help would be appreciated.

    • Hey there, sorry it’s taken a few days to get back to you, but I’ve just committed some code adding an overload to the Link() method to allow passing in an htmlAttributes object. You can use it like this: x.Link("Name", Url.Action("https://xxxx.com"), new { target = "_blank" });. It might be worth taking a look at the commit to see how I added it, so you can make changes like this yourself in the future if you need to. I’m always grateful for pull requests :)

  2. No worries, as I can see in you picture you really have your hands full. God Bless.
    Thank you for your response.
    That worked beautifully.
    I will be telling others about this and will be following your projects

    Thanks again.

  3. I am curious to find out what blog system you happen to be using? I’m having some small security problems with my latest website and I would like to find something more risk-free. Do you have any solutions?


Leave a reply to Dwight DePass Cancel reply


<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>