Effective Use of Bootstrap With ASP.Net

The number one project on GitHub is Twitter Bootstrap, a free styling framework with components for web applications. In Visual Studio 2013, the Bootstrap NuGet package is included with the ASP.NET project templates, including WebForms and MVC. It's a great way to ensure new web projects have great, mobile-first styling out of the box, but you can use it much more effectively with just a few tweaks.

Less is better

The Bootstrap NuGet package comes with the bootstrap.css file, that was built using Less source files. Less is a powerful CSS pre-processor, extending the CSS language to include features such as variables, mixins and functions. I'll demonstrate a few tricks you can use with Bootstrap's Less files, but it's a good idea to bookmark Less's extensive and complete documentation.

Step 1: Enhance Visual Studio to support Less

Install Web Essentials 2013 using Extensions and Updates or the Visual Studio Gallery.

Web Essentials adds features to Visual Studio supporting a myriad of web technologies. Its settings are available in the standard Options dialog, but the defaults are fine for now.

Step 2: Remove included bootstrap package

To avoid conflicting updates, it's best to remove the original bootstrap package.

Right-click the References node in Solution Explorer and click choose Manage NuGet Packages. Choose Installed packages and find "bootstrap". Click its Uninstall button. Alternatively, uninstall it from the Package Manager Console using the command Uninstall-Package bootstrap.

Note: if you are using WebForms, another package has a dependency on bootstrap. It shouldn't hurt to leave it there, just don't use the CSS files and let the next package overwrite the script files.

Step 3: Install Bootstrap Less Source

Choose the Online menu then search for "Bootstrap Less Source" and install the result. Alternatively, you can install it from the Package Manager Console with the command Install-Package Twitter.Bootstrap.Less.

Step 4: Trim the Bundle

Open App_Start/BundleConfig.cs. In a brand new project, there should be several script bundles and one style bundle. Remove bootstrap.css from the style bundle.

Step 5: Unleash Less

This is where things get interesting.

Open the Content folder and rename Site.css to Site.less. Open it. Web Essentials displays the Less code, which was your CSS code, in the left panel. The right panel is a preview of the generated CSS. Right now, both sides are the same. The Less language is actually a superset of CSS, meaning CSS is valid Less and will compile to itself.

Since the site is no longer using the bootstrap CSS file, it would be prudent to import bootstrap into the Site.less file. Place the following code at the top of the file.

@import 'bootstrap/bootstrap';

This instructs the Less engine to import a file in the bootstrap folder with the name bootstrap.less (the extension is optional). When you save the file, Web Essentials generates a new Site.css with the standard bootstrap CSS included.

A couple of tricks

Your new Site.less file, powered with the Bootstrap framework, provides a wealth of tricks to make style creation easier.

Theming

Forget about the bootstrap theme generator, you now have complete control of the theming process and most of it is defined in bootstrap/variables.less.

Don't change the variables.less file. Less uses the last-defined value for a variable, so the ideal place to make a change is in your Site.less. If you change the bootstrap files directly, NuGet will skip those files when the applying a package update.

To see how this works, paste the brand color variables below the import directive in Site.less.

@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;

Change any of the values, save the file and you will see the new value take its place throughout the generated CSS.

The original CSS in Site.less could use consistency with the rest of the site. Replace all the #b94a48 values with @brand-danger.

Mixins

With Less, all class and id selectors are available as mixins, which means the values from the original selector can be mixed into another selector. Just type the selector name followed by parentheses inside the target selector.

.body-padding {
    padding-top: 50px;
    padding-bottom: 20px;
}

body {
    .body-padding();
}

// Generates
.body-padding {
    padding-top: 50px;
    padding-bottom: 20px;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

Place parentheses after the mixin's name if you do not want it to generate a CSS selector. You can also define parameters inside the parentheses.

The bootstrap/mixins folder contains pure mixins used by Bootstrap and they're available inside your Site. less file. Here's a simple but useful mixin for setting the width and height to the same value.

.thumbnail {
    .square(100px);
}

// Generates
.thumbnail {
    width: 100px;
    height: 100px;
}

Conclusion

You can't harness the full power of Bootstrap in your projects with the CSS file. By using Bootstrap's Less source code in your web project, your site will be easier to style than ever before.