You can load Bootstrap from a link tag in the index.html file directly from a CDN in this way:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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:
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
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.