In Angular you can load the Bootstrap CSS in the index.html


I have bootstrap installed in a angular project with angular-cli and I need to load the bootstrap.min.css file from the index.html file with the LINK tag.

When running the application the file boostrap.css is not loaded in the browser but it launches a 404 Not Found . The route I give is node_modules/bootstrap/dist/css/bootstrap.min.css .

Can someone tell me if you can upload CSS files that are inside a module (In this case: node_modules/bootstrap ) from within the index.html with the label LINK or you must necessarily reference them from styles.css or .angular-cli.json->apps->styles ? .

asked by Vallin Plasencia 19.07.2017 в 17:39

3 answers


In the angular-cli.json file add:

"styles": [
answered by 20.07.2017 в 17:03

You can load Bootstrap from a link tag in the index.html file directly from a CDN in this way:

<link href="" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

This has the advantage that the amount of data that is sent from your server to the client will be less. Translated, shorter download time. As an extra, being so common that the pages use Bootstrap, it is likely that the user may already have cached this file. The main disadvantage for not doing it, is that during the development you will be able to suffer load time increases. Bringing information from the internet is slower than bringing local information.

In any case, if you want to serve it from your server, it is better to install Bootstrap within your project so that Angular is responsible for minifying it with all your styles.

To do this; You can open a terminal from the folder where your project is located and execute npm install bootstrap --save . And then do what you said, put inside "styles" within the angular-cli.json file:


Another similar option would be using ng2-bootstrap .

If you want to serve your own Bootstrap file from your server because it has been modified, this is a bad practice. Since when you want to regenerate your project from the dependencies, it will be regenerated using the original version of bootstrap, losing all the styles that you modified in that file. If you want to modify some bootstrap, it is better to step on their styles in the CSS files of your components, or in your global styles.

If anyway, you want to serve your modified version of Bootstrap from your project, you can do it as you said, importing it into your global styles:

@import '~/bootstrap/dist/css/bootstrap.min.css';

As long as you have it installed on your project.

As last, and worst option; yes you can reference in a link your local bootstrap file. You have to keep in mind that in this way you will be exposing the structure of your server to the public. Something that represents a possible great security failure. However, even understanding the risks and the null advantages of doing so, it would be like I think you tried:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />

What you have to keep in mind here is that this depends on the structure of your project. Therefore, the number of folders you must upload to find the folder node_modules (Quantity of ../ in the href ), will depend on the location of your file index.html . Breaking your project every time you decide to change the route of it.

In case you are giving 404 errors, it may be because you are not correctly referencing your Bootstrap file.

answered by 31.07.2017 в 10:22

You can use the CDN of bootstrap between the HEAD tags, add the following link :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

With this you can now use bootstrap on your site CDN .

The other option is to install bootstrap in your project, with the npm install bootstrap command inside the folder of your project run it from the console, in the folder node_modules You will see that the bootstrap folder is already there, and in the angular-cli.json file add the reference in styles "styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css" ]

and you can use bootstrap on your site.

answered by 31.07.2017 в 16:22