Bootstrap not taking effect

Question

I've created a new Angular 6 project that I can't get the bootstrap styling to work with.

I installed ng-bootstrap into it via npm and then I added these lines to the index.html:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
        integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
        crossorigin="anonymous"></script>

None of the bootstrap styling is taking effect though, so clearly I've missed a piece here. Help?

You need to read the getting started guide of ng-bootstrap. It's the bare minimum you can do. It tells you that you MUST NOT use jquery, popper and boostrap's JS, since its goal is precisely to replace it, and that you MUST use the bootstrap CSS, since all the styling relies on it. You've done exactly the opposite. Why don't you read the documentation? ng-bootstrap.github.io/#/getting-started — JB Nizet
– JB Nizet, Commented Jul 18, 2018 at 18:31

Alex · Accepted Answer · 2018-07-18 18:41:46Z

1

The best way to do this is to install bootstrap through npm (if you have it enabled).

Run this command in your angular project root:

npm install bootstrap@latest

This will install the necessary CSS files and import them into your project for you.

answered Jul 18, 2018 at 18:41

Alex

75212 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Le · Accepted Answer · 2018-07-18 19:23:47Z

0

Duplicate of many questions, including some of my own perhaps: Like commenter JB said--NG-bootstrap is for moving away from the JS dependencies that Bootstrap requires.

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

So this guide that you were probably(?) referencing states that you can get Bootstrap4 working by importing those scripts, however THE preferred method is to use NgBootstrap to move away from that. Make sure all the dependencies are installed (all 1 of them (bootstrap 4)) and then follow the remaining portion of the guide to get NgBootstrap functional.

You can also look into NgxBootstrap, tutorial located a little further down on that same page.

answered Jul 18, 2018 at 19:23

Justin Le

6931 gold badge8 silver badges25 bronze badges

1 Comment

Justin Le Over a year ago

However, if you DO wish to use Bootstrap 4, and the previous libraries--you can include them like so in your index.html:  <script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/…>  <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/…>  <script src="maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/…>`

Collectives™ on Stack Overflow

Bootstrap not taking effect

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related