0

I want to use bootstrap in my Angular project. For this purpose I installed Bootstrap with this command: npm install bootstrap and I added this reference:

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

in styles property in angular.json file.

After that I try to run my application, but on the component I don't see that Bootstrap is applied on template:

<div>
  <!-- Actual search box -->
  <div class="form-group has-search">
    <span class="fa fa-search form-control-feedback"></span>
    <input type="text" class="form-control" placeholder="Search">
  </div>
</div>

Any idea why is Bootstrap not applied on template?

Jojoes
  • 180
  • 2
  • 9
Michael
  • 13,950
  • 57
  • 145
  • 288

3 Answers3

0

You use the css from the bootstrap

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

You don't use the bootstrap JavaScript, you install ngx-bootstrap

https://valor-software.com/ngx-bootstrap/

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • Adrian thanks for post.What if I dont need bootstrap javascript I only need the style, no animation or stuff like that. – Michael Jul 29 '20 at 13:10
  • Just import the styles from a CDN. Put this line in the header of your index.html https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css – Adrian Brand Jul 29 '20 at 22:24
0

When installing bootstrap npm install --save bootstrap , use --save, Otherwise it will work only in your local machine. Because it will not save in the package.json.

In angular.json file and add bootstrap path:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
varman
  • 8,704
  • 5
  • 19
  • 53
0

If you want to use bootstrap in Angular project, there 2 lib you can choose from:

ng-bootstrap or ngx-bootstrap

They are two different projects by two different project teams that are trying to accomplish more or less the same thing - allowing you to use Bootstrap in Angular (2+) without the use of jQuery.

They are both rebuilding the Bootstrap components using only Angular (no jQuery).The main differences are around which version of Bootstrap they support.

ngx-bootstrap supports Bootstrap 3 and 4. ng-bootstrap supports Bootstrap 4 and requires Angular 5+.

Please refer to this thread for more detail: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

huan feng
  • 7,307
  • 2
  • 32
  • 56
  • Hi, I need to use only the styling I don't need animation. Any idea why it doesn't work in my way? – Michael Jul 30 '20 at 00:08
  • Where did you get this issue? Because i tried it on my local, it works perfectly. I try to create a stackblitz, it have to install jquery as peer dependency although i do not need it. If i do not install jquery, the bootstrap cannot be installed correctly. I think it should be an issue with stackblitz. Because i can easily add bootstrap with no issue on my local, and your code works perfectly on local. – huan feng Jul 30 '20 at 02:51