The ASP.NET Developer's guide to Bootstrap
March 24, 2015
Twitter Bootstrap is one of the most widely used CSS frameworks at the moment and there is a massive supporting ecosystem in themes, components, tutorials and the likes. Since Visual Studio 2013, the standard ASP.NET project template has also been based on Twitter Bootstrap. Now, along with the popularity of Bootstrap there has also been the inevitable backlash from people complaining that also website now look the same. The framework itself has also grown quite large over time and inevitably contains a lot of excess CSS classes which you do not use in your applications.
The thing is however, that Bootstrap makes it easy for non-designer types like me to build websites which look semi-decent. Add to that the massive ecosystem built up around it, you can get many themes and components to use in your applications which allow you to have a consistent look through out.
This blog post serves as an overview to some Bootstrap resources for ASP.NET developers to help you get started with Bootstrap and get the most out of it. This is not meant as an exhaustive list of all the Bootstrap resources out there, but rather to try and give a few quality resources which will help you get the most from Bootstrap in your application.
Get started using Bootstrap
\fonts) and the default bundles in the
BundleConfig class is set up to include these.
If the size of the default Bootstrap package is not to your liking, and you would like a little bit more control over what to include, you can opt to rather install the Bootstrap Less Source Nuget package. This will install the LESS source for Bootstrap, and you can then create your own LESS file to include only the parts of Bootstrap you want, and use Web Essentials’ LESS compiler to create a CSS file for you. And also, because it you have the LESS source you can also more easily override the variables for some of the standards color options.
If you have embraced the new web development tools such as Bower, then you may choose to rather install the Bower package:
bower install bootstrap
Of course you can also do it manually by going to the Bootstrap website, downloading it and copying the files into your project folder structure. The Bootstrap website also has a feature which allows you to customize the parts you want to download.
Actually, you do not even have to have a local copy of Bootstrap. You can simply reference it from the Bootstrap CDN. It would perhaps be best to use the CDN in combination with the ASP.NET bundling and minification features. There is an article on the ASP.NET website which explains how to do it (look for the “Using a CDN” section).
OK, now that you have included Bootstrap in your project it is time to start understanding how to use it. The Bootstrap website itself contains a wealth of information and samples, so that would be a good starting point. For the most part going through the documentation and examples is enough, so make that your starting point.
Learning the grid
The Bootstrap grid is especially powerful and allow web developers to easily develop responsive websites, so it is really important to understand how it works. There are two very good tutorials I can point to. The first is Bootstrap 3 Grid Introduction from Erik Flowers, and the second is Exploring the Bootstrap 3.0 Grid System from Fearless Flyer.
There are a wide range of video tutorials available on Youtube. If you look at the playlists by CodersGuide you will notice a number of different series of tutorials by them. There is also a full Code a Responsive Website with Twitter Bootstrap course available from Brad Hussey.
Make it pretty
So once you have installed Bootstrap and learned how to use it, you will most probably want to make your side a little bit prettier and try and get rid of the stock Bootstrap look-and-feel. The easiest way is probably to head over to Bootswatch and download one of the many swatches (or themes) which are available. These are not complete themes or templates, but mostly consist of different color schemes and perhaps different fonts. If you are not sure how to integrate this with your ASP.NET MVC project, here is a StackOverflow question with detailed instructions.
Quality free themes
There are some really good quality free themes available on the internet which can give your application a professional look without costing you a cent. You can look at either Drunken Parrot UI Kit (don’t let the name fool you), or Designmodo’s Flat UI.
In terms of paid options, I have always been a fan of the quality of templates available on Themeforest. They have a wide range of themes for many platforms (WordPress, Tumblr, Ghost, etc), but they also have a massive selection of plain HTML themes. Most of the themes nowadays are based on Bootstrap, and when you look at the details for a particular theme they will indicate clearly whether the theme is based on Bootstrap, and for which version(s).
Here is a screenshot from the Canvas theme as an example:
You can also just search for the term “bootstrap” in the HTML (Site Templates) category:
Another option is to look at Themeforest’s sister site Codecanyon in the Bootstrap Skins category. These are not full blown themes like with Themeforest, but more “lightweight” skins, similar to what Bootswatch have got.
The last section I want to cover is a set of tools which will allow you to develop Bootstrap websites faster.
Both Jetstrap and Brix are visual editors which allow you to create website layouts by dragging Bootstrap components onto a canvas. Once you are happy with the design it is a simple matter of exporting the HTML. Brix even has a number of pre-made templates which you can choose from to customise.
If find Bootsnipp a very useful website when I am looking for pre-build components. Looking for some examples of login forms? Simply search for the term “login” and you will find a number of layouts for login forms for which you can easily copy and paste the HTML into your own application.
Chameleon Forms is a .NET library which aims to make building forms in ASP.NET MVC a much more powerful and easier experience. It allows you to build forms in a declarative way and get rid of a lot of the boilerplate HTML code you normally have to add when creating forms, and comes with support for Bootstrap 3 built it.
I hope this post introduced you to a few resources which you were not familiar with before. Feel free to share your favourite Bootstrap resources in the comments below.