Angular Global CSS styles Issue

Question

I created a an Angular project and I cannot set properly the Bootstrap downloaded css styles. Even if I followed some instructions: https://www.tektutorialshub.com/angular/angular-global-css-styles/

Styles downloaded from: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/

It was supposed to look like a nav-bar:

Have you tried putting styles in the same dir as the angular.json and seeing whether just style.css works? — Rob Evans
– Rob Evans, Commented May 17, 2020 at 1:00
@RobEvans well style.css works well, only that the styles from assets folder don't. Tho this isn't a big issue as long as style.css works. Thank you for your suggestion:) — Victoria
– Victoria, Commented May 17, 2020 at 1:13
How about something like: "assets": [ "src/assets" ], "styles": [ "src/assets/css/bootstrap.css" ], Seems like the assets list has src/assets but perhaps you're trying to include src/style.css and its out of scope? — Rob Evans
– Rob Evans, Commented May 17, 2020 at 1:20
"../src/assets/css/style.css" yes I added it in angular.json. src/style.css isn't out of space. What do you think, might it be related to the fact that in index.html I cannot run the project with the added "<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">" elements fro src/assets/vendors? — Victoria
– Victoria, Commented May 17, 2020 at 1:40

Marc · Accepted Answer · 2020-05-17 06:54:16Z

1

Please try to put the bootstrap stuff (js, base and theme css) in the header of your 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="assets/js/main.js"></script>
    <link rel="stylesheet" href="assets/css/style.css">
</header>

answered May 17, 2020 at 6:54

Marc

1,8961 gold badge11 silver badges16 bronze badges

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

1 Comment

Victoria Over a year ago

Hi Marc, I added mentioned script tags and it worked perfectly! Thank you very much for your help :)

Collectives™ on Stack Overflow

Angular Global CSS styles Issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related