
## Table of Contents

1. [Introduction](#introduction)
2. [Install Bootstrap Sass via NuGet](#install-bootstrap-sass-via-nuget)
3. [Install Web Compiler](#install-web-compiler)
4. [Conclusion](#conclusion)

## Introduction

How can you use Bootstrap Sass in Visual Studio? There are many ways to achieve this, but you can simply use NuGet with Visual Studio along with the Web Compiler extension.

## Install Bootstrap Sass via NuGet

Use NuGet to download the Sass Bootstrap package to your web application.

Twitter.Bootstrap.Sass

`PM> Install-Package Twitter.Bootstrap.Sass`

![](https://d1p0mp3f1fx0hz.cloudfront.net/_jzluib1ec.png)

## Install Web Compiler

Once you have installed the Bootstrap files in your application, you can install
the following Visual Studio plugin to compile the Sass to CSS.

Web Compiler

This web compiler will compile the Sass into a CSS file for you.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_662y1ulxw.png)

## Conclusion

Using NuGet to install Bootstrap Sass and the Web Compiler extension to compile it is the simplest approach in Visual Studio 2015. If you want to customize Bootstrap further, the easiest way is to use a tool like http://bootstrap-live-customizer.com/ to get the `variables.less` and `bootstrap.css`. Avoid using only the customized `bootstrap.min.css`, as it will be hard to maintain what has been customized.


How to use Bootstrap Sass at Visual Studio using NuGet and Web Compiler.

How to Use Bootstrap SCSS at Visual Studio 2015


## Table of Contents

1. [Introduction](#introduction)
2. [WebEssentials](#webessentials)
3. [Related Tools](#related-tools)
4. [Conclusion](#conclusion)

## Introduction

I wanted to compile Bootstrap Sass, so I searched online and on the
Bootstrap website. The site mentions that Bootstrap supports Sass but doesn't provide details on how to
compile it. That makes sense because there are so
many tools that can compile Sass into CSS. I know that Visual Studio 2015's
compiler plugin makes it very easy to compile Bootstrap Sass into CSS. But
since I'm in Visual Studio 2013 and I like using npm (Node.js package management
system), I wondered if npm had some Sass compiler. So I found
the following — it could work but requires a Grunt file setup and also needs Ruby and
Compass.

That's a lot of work...

```
grunt-contrib-sass
```

So, what I ended up with...

## WebEssentials

WebEssentials is a web tools extension for Visual Studio. First, I ran NuGet to get the Sass
version of Bootstrap.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_5u3gicubz.png)

Then I just created another file called bootstrap.scss and copied the code from
_bootstrap.scss to my bootstrap.scss.

Save, and that causes WebEssentials to compile the SCSS to CSS for me.
Sweet!

![](https://d1p0mp3f1fx0hz.cloudfront.net/_l271mtigm.png)

Now, you can start changing the variables inside the Bootstrap SCSS to use the
real power of Bootstrap.

## Related Tools

  - Web Essentials 2013.5

    - If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript, or LESS,
then you will find many useful features that make your life as a developer
easier. This is for all web developers using Visual Studio.

  - NSass

    - NSass is a .NET wrapper around the libsass library. All information about
libsass itself can be found in the readme file under the NSass.LibSass
directory.

## Conclusion

Using WebEssentials in Visual Studio 2013 is the simplest way to compile Bootstrap Sass into CSS. Just install the NuGet Sass version of Bootstrap, create a `.scss` file, and WebEssentials will automatically compile it to CSS on save.


How to compile Bootstrap Sass to CSS in Visual Studio 2013 using WebEssentials.

How to Compile Bootstrap Sass in Visual Studio 2013


## Table of Contents

1. [The Problem](#the-problem)
2. [The Solution](#the-solution)

## Introduction

If you are getting 404 errors on Bootstrap font files in ASP.NET, this post shows how to resolve the issue by adding static content MIME types to your Web.config.

## The Problem

If you are getting 404 errors on the following files in ASP.NET, which are font files for Bootstrap, you can try the following way to resolve this issue.

- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2

## The Solution

Add static content MIME types to your Web.config:

```

adding static content mime type to web.config.











```

## Conclusion

Adding the correct MIME type mappings for Bootstrap font files in your Web.config resolves the 404 errors on IIS. This is a common issue when deploying ASP.NET applications that use Bootstrap's Glyphicons.


Fix 404 errors when requesting Bootstrap font files on ASP.NET and IIS.

Fix 404 Issues to Load Bootstrap Icons on IIS


## Table of Contents

- [Introduction](#introduction)
- [Tools](#tools)
- [Articles](#articles)
- [Conclusion](#conclusion)

## Introduction

You start using Bootstrap and notice you want to customize it. This blog shows a few tips and information about how to customize Bootstrap.

## Tools

1. http://getbootstrap.com/customize/
   Not flexible, not good to maintain.

2. http://bootstrap-live-customizer.com/
   Very simple to use as an online service to customize.

3. http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
   Same as the above bootstrap-live-customizer.com.

4. Edit the bootstrap.css directly (bad)
   Don't do this.

5. Modify the Bootstrap project, Less files, and have your own version of the Bootstrap source code.
   This is a good choice. You can customize the Bootstrap Less variables yourself and have version control of it. Whenever a new Bootstrap version comes out, you can merge the latest changes and build your own Bootstrap CSS.

## Articles

http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/

## Conclusion

Among the various approaches to customizing Bootstrap, maintaining your own fork of the Bootstrap source with customized Less variables offers the best balance of flexibility and maintainability. Avoid editing bootstrap.css directly, as your changes will be lost during upgrades.


A few useful tips and information about how to customize Bootstrap.

Few Useful Links About How to Customize Bootstrap


## Table of Contents

1. [Introduction](#introduction)
2. [Change the Screen Size Variable](#change-the-screen-size-variable)
3. [Use Bootstrap Live Customizer](#use-bootstrap-live-customizer)
4. [Conclusion](#conclusion)

## Introduction

The default Bootstrap nav breakpoint to show the hamburger icon is 760px. If you want to change it, following
is the setting you can use to customize Bootstrap. The following screen
example shows how to show or hide the nav icon at 1024px.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_0f86i7ab8.png)

## Change the Screen Size Variable

Just change the `@screen-sm` size.

## Use Bootstrap Live Customizer

If you want to customize Bootstrap, the easiest way is to go to
http://bootstrap-live-customizer.com/ and get the `variables.less`
and `bootstrap.css`.

Because if you just get the customized `bootstrap.min.css`, it will be hard to
maintain what has been customized.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_yebgxayux.png)

## Conclusion

Customizing the Bootstrap nav breakpoint is as simple as changing the `@screen-sm` variable. Using a live customizer tool makes it easy to preview and export your changes while keeping them maintainable.


How to customize the Bootstrap breakpoint for showing or hiding the nav icon, for example at 1024px instead of the default 760px.

Bootstrap

How to Use Bootstrap SCSS at Visual Studio 2015

How to Compile Bootstrap Sass in Visual Studio 2013

Fix 404 Issues to Load Bootstrap Icons on IIS

Few Useful Links About How to Customize Bootstrap

Customize Bootstrap Breakpoint for Show/Hide Nav Icon