Effective Use of Bootstrap With ASP.NET
Hi everyone in this blog, I’m explaining about 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.
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.
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.
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
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
Step 3: Install Bootstrap
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
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
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
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.
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
Forget about the bootstrap theme generator,
you now have complete control of the theming process and most of it is defined
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.
Change any of the values, save
the file and you will see the new value take its place throughout the generated
The original CSS in Site.less
could use consistency with the rest of the site. Replace all the #b94a48 values
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.
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.
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
in my next post i'll explain about CSS Pseudo-Class