Angular · Angular2 · Node · Visual Studio Code

Customizing Bootstrap 3 in Angular 2

You can download the code here.

We all love Bootstrap, and we use that as a starting point for our web applications design. To add bootstrap to your Angular 2 project in vscode you can include the “bootstrap”: “^3.3.6” in you dependencies in package.json. and then add a reference to that in you index.html:

<script src="node_modules/bootstrap/dist/css/bootstrap.min.css">script>

Now, what if you want to customize bootstrap with only changing some colors and fonts? In this application I don’t want to add a theme to bootstrap, because my application will only have one look, and I will not do any changes to the javascript either. I am only looking for tweaking the colors and fonts in Bootstrap to fit my brand. I am not going to show automation by using grunt or some other tool, and not doing minify of css either, but simply showing a really easy way to get started.

So here is a superfast 3 step guide to doing just that:

1. You need to get less compiler installed on your system, if you don’t have that. You do that by opening a cmd prompt and type: npm install -g less

2. Create a styles.less in you project and include the styles.css in your index.html file.


Now in your styles.less file you need to import the bootstrap.less so we can build bootstrap into your styles.css.

//** Pull in Bootstrap
 @import "../../node_modules/bootstrap/less/bootstrap.less";

3. Set up a task configuration in Visual Studio Code. Open Command Palette by clicking Ctrl+Shift+P and search for Configure Task Runner and select “other”. This will create a tasks.json in your .vscode folder. Add the following code:

    "version": "0.1.0",
    "command": "lessc",
    "isShellCommand": true,
    "args": ["app/styles/styles.less","app/styles/styles.css"]


Now, in you vscode application press: Ctrl+Shift+B. This will compile/transpile your less file to css.

Now, go ahead and tweak bootstrap:



Thanks for reading.