Bootstrap for ASP.NET MVC Review

Starts off with a good introduction to using Bootstrap in your ASP.NET applications.  It covers the default “File | New” experience, manually added files and my favorite, NuGet. The author then continues with introducing the Bootstrap element styles in a logical order, starting with the grid and ending with form validation.  Next the author introduces the JavaScript components of Bootstrap.

In the next part of the book the author does what I have not seen in other books on Bootstrap, the author explains how to create helper methods, which is good but there already is a well used package for that in which the author has a chapter on on at the end of the book.

The author goes on to give suggestions are to how to work with and convert sites that do not have bootstrap.

I’m not sure why but the author included a whole chapter using the jQuery DataTables plugin with some of it’s extensions with Bootstrap.

Overall, the book was easy to read, the author was clear and logical in his explanations of Bootstrap. I would recommend this book to someone just starting to learn Bootstrap and working on ASP.NET applications.

jQuery Twitter Bootstrap Flickr Carousel

A few months ago I built a jQuery plugin that uses the Twitter Bootstrap Carousel to cycle through images on Flickr. In order to use this plugin you need to get an Api Key from Flickr and have the following software:

  • jQuery (v1.8 or higher)
  • Twitter Bootstrap (v3.0 or higher)
  • Twitter Bootstrap components (v3.0 or higher)
  • twbsPagination (optional)

Sample Usage

Download the plugin from GitHub at: https://github.com/jguadagno/twbs-flickrCarousel

See an example of usage at: http://mvp2014.mvpsummitevents.info/flickr

Bootstrap Theme Switcher jQuery plugin

A few months ago a published an article on a Bootstrap Theme Switcher. I’ve since approved this post and the JavaScript and turned it into a jQuery plugin. This plugin works with the Bootswatch API to provide the user the following:

  • Loads a list of available themes from the API into a SELECT or a UL,
  • Dynamically change the site theme to the selected theme
  • Manually change the theme
  • Save the selected theme to a cookie, requires the jQuery Cookie plugin,
  • Loads the selected theme from a cookie, requires the jQuery Cookie plugin,

The plugin also allows you to load of list of local themes in case you to note want to use the Bootswatch site.

Let me know what you think.

Downloads

jQuery Plugin page
http://plugins.jquery.com/bootstrapThemeSwitcher/
GitHub Repository
http://github.com/jguadagno/bootstrapThemeSwitcher
Demo site
http://introtobootstrap.azurewebsites.net/

Next steps

  • NuGet Package
  • NPM module
  • Bower module

Bootstrap Theme Switcher

While creating a Proof of Concept design for a website I was working on I thought it would be cool to demonstrate the power of themes in Twitter Bootstrap by providing an option in the Proof of Concept to switch to some of the themes that are on Bootswatch.  It was a remarkably easy solution, that involved jQuery, jQuery.cookie plugin, Twitter Bootstrap Navbar and the themes from Bootswatch.

This sample assumes that you are using a CDN for the Twitter Bootstrap and jQuery files and that you downloaded the themes from Bootswatch and copied them to the path of /css/themes. The example could easily be modified to use the themes on the Bootstrap CDN.

First, let’s start with a basic template for Twitter Bootstrap

Next, we’ll add the navbar to the theme selector menu.

Then, the JavaScript

Now you are done. But how does it work?

In the head section of the template, you should notice that one of the stylesheets an id of ‘bootstrapTheme‘. This link will be modified by the setTheme function in the JavaScript file to dynamically change the theme and save the theme preference to a cookie to load in the future. In the jQuery ready function, we check for the presence of the cookie ‘themeName‘, if present, a call is made to setTheme to load the theme. The theme is changed by clicking on one of theme menu items which, in turn, calls setTheme.

Twitter Bootstrap Resources

Over the past few months, I have built quite a few sites using Twitter Bootstrap. I think it is an awesome framework for styling websites and abstracts away a lot of the differences in CSS between modern browsers.  I say Twitter Bootstrap did for CSS what jquery did for JavaScript. I typically say that if you use both frameworks on the same site, your site will work pretty consistent against all modern browsers.

Anyway, the purpose of this post was to list all of the Twitter Bootstrap resources that use or find helpful.

Content Delivery Networks | Resource Guides | Tutorials | Themes | Layout Helpers | Visual Studio NuGet Packages | UI Components

Content Delivery Networks (CDN)

Bootstrap CDNhttp://www.bootstrapcdn.com
Microsoft Ajax CDNhttp://www.asp.net/ajaxlibrary/cdn.ashx#Bootstrap_Releases_on_the_CDN_14

Resource Guides

The Big Bad Ass List of Twitter Bootstrap Resourceshttp://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Tutorials

Bootstrap Tutorial: A Guide for Beginnershttps://blog.udemy.com/bootstrap-tutorial-a-guide-for-beginners/

Themes

Bootswatchhttp://bootswatch.com/
Themes for Bootstraphttp://www.themesforbootstrap.com/
jquery-ui for Bootstraphttps://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/
Style Bootstraphttp://stylebootstrap.info/
PaintStraphttp://paintstrap.com/

Layout Helpers

Bootplyhttp://www.bootply.com
BootUIhttp://www.bootui.com/
Layoutithttp://www.layoutit.com/build

Visual Studio NuGet Packages

As of ASP.NET MVC 5, the File | New templates are already wired for Twitter Bootstrap, just in case, here are a few packages to get you started.

Bootstraphttp://www.nuget.org/packages/bootstrap/
AngularJS UI Bootstraphttp://www.nuget.org/packages/Angular.UI.Bootstrap/
Bootstrap for MVC 5http://www.nuget.org/packages/Twitter.Bootstrap.MVC/
Paged List for ASP.NET (Bootstrap)http://www.nuget.org/packages/PagedListExt/
Font Awesomehttp://www.nuget.org/packages/FontAwesome/

UI Widgets

General Libraries | Buttons | Fonts | Input Widgets | Notification Helpers

General Libraries

Bootstrap Components (for ASP.NET MVC)http://bootstrapcomponents.apphb.com/
Fuel UXhttp://exacttarget.github.io/fuelux/#

Buttons

Button Builderhttp://bootsnipp.com/buttons

Fonts

Font Awesomehttp://fontawesome.io/
Font Customhttp://fontcustom.com/

Input Widgets

Bootstrap Form Helpershttp://bootstrapformhelpers.com/
Bootstrap Acknowledge Inputshttp://averagemarcus.github.com/Bootstrap-AcknowledgeInputs/
Bootstrap Wysiwyg Editorhttp://mindmup.github.io/bootstrap-wysiwyg/
Bootstrap Validation Helpershttp://reactiveraven.github.io/jqBootstrapValidation/
Date Pickerhttp://www.eyecon.ro/bootstrap-datepicker/
Time Pickerhttps://github.com/jdewit/bootstrap-timepicker

Notification Helpers

PNotifyhttp://sciactive.com/pnotify/