CODEWITHSUNDEEP
angularbootstrap-4angular7
Thomas Kim
Thomas Kim

Reputation: 513

Only let bootstrap css work in one module

I have been stuck on this problem for hours. Not much online resource that I could find meet the problem facing right now. :( In my situation, I have two modules, home, and admin.

My home page is depended on the bootstrap CSS to work. So I add the cdn or min.css in index.html in order to work. The home page work okay. But the admin page which is in another module is affected by the bootstrap CSS too.

I have tried using ng-bootstrap, and only import NgBModule in my home.module.ts. But now home module still didn't get the bootstrap CSS.

I have tried index.html linking

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

or

<link href="assets/home-style/css/bootstrap.min.css" rel="stylesheet">

both work, but will affect all page and module CSS

I have tried using @ng-bootstrap/[email protected] too, but using this, my home page did not even bootstrap styled. Maybe I use this npm package wrongly.

home.module.ts

  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    NgbModule
  ],

Example of home page trying to use bootstrap

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a pageScroll class="navbar-brand page-scroll" href="#page-top">ilovou</a>
    </div>
  </div>
</nav>

Upvotes: 3

Views: 781

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86790

Instead of adding bootstrap css styles file into index.html file you can import directly into the component(s) CSS/SCSS file on the top like this -

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

Upvotes: 2

Related Questions