CODEWITHSUNDEEP
angularbootstrap-4angular-clisingle-page-application
Nick the Community Scientist
Nick the Community Scientist

Reputation: 1801

Adding Bootstrap only to Specific Components in Angular (version 13)

My problem is that I have a project in Angular 13 (current latest) and I need to add the Bootstrap framework only to a specific set of components in this project.

Is there any chance I can link it on a per component basis?

Expected Question

Why don't I add Bootstrap to the whole project?

This project is a migration of an existing no frameworks or libraries website only using plain HTML-CSS-JS of small-medium scale. The time for migration is very limited (so little time in fact that I have plain JavaScript in my component.ts files). I also am not familiar with Angular, first time starting such sized project with any front-end web framework in fact.

Chosen Answer Initially, I did choose to add bootstrap per component and referencing it from my assets' folder. However, after the input of a fellow user about view encapsulation leading to terrible performance consequences, I did manage to update the given CSS code to be compatible with a global integration of the Bootstrap 5 framework. I recommend others just fix compatibility if possible as well due to the performance issues. I used the package from NPM if anyone is curious ng add bootstrap. I can confirm that also the CDN from Bootstrap also works.

Upvotes: 1

Views: 3882

Answers (3)

Pieterjan
Pieterjan

Reputation: 3581

Importing bootstrap.css in each component that needs to be styled will cause the entire bootstrap css file to be replicated in the bundle for each component, while encapsulating the styles.

On the other hand, you could for example import the card.scss in your custom CardComponent. But when you have a component that must consist of multiple components working together (for example navbar which consists of navbar-items and navbar-dropdowns, you'll end up in a situation as such:

.navbar[ng_scope1] {
    /* Expected style for the navbar */
}

.navbar[ng_scope2] .navbar-dropdown[ng_scope2] {
    /* Expected style for the navbar-dropdown */
}

.navbar[ng_scope3] .navbar-dropdown[ng_scope3] .navbar-item[ng_scope3] {
    /* Expected style for the navbar-item */
}

Since your html is something like

<bs-navbar>
    <div class="navbar" ng_scope1>
        <bs-navbar-dropdown>
            <ul class="navbar-dropdown" ng_scope2>
                <bs-navbar-item>
                    <li class="navbar-item" ng_scope3>Login</li>
                </bs-navbar-item>
            </ul>
        </bs-navbar-dropdown>
    </div>
</bs-navbar>

No style at all will be applied, unless you disable view encapsulation. Furthermore, the navbar css will be produced 3 times still...

So ATM as far as I know, you'd be better off having the entire bootstrap.css once in your application, through your angular.json preferrably, (which can't be tree-shaken) than any of the above solutions...

As of your question about the replication of the bootstrap.css file, I created a blank angular app, installed bootstrap, and

@import '~bootstrap/scss/bootstrap';

in the app.component.scss

Bundles after importing bootstrap in app.component.scss

Then I generated another component, placed it on the appcomponent, and imported the entire bootstrap stylesheet here as well:

Bundles after importing bootstrap in 2 components

  • (I would like to have a good solution for this too...)
  • Don't accept this as answer pls.

Upvotes: 0

Danilo K&#246;rber
Danilo K&#246;rber

Reputation: 910

Download the bootstrap css file and save it in your assets folder. Then include it in the styleUrls array of your component:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [
     './test.component.scss',
     '/assets/bootstrap.min.css'
  ],
})
export class TestComponent implements OnInit {}

Upvotes: 1

Pinaki
Pinaki

Reputation: 1030

Save Bootstrap css file in assets folder and add the path in component styleUrls.

My folder structure is -

my-app/
├─ node_modules/
├─ src/
│  ├─ app
│  ├─ assets

Include CSS path in component -

@Component({
selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [
     './test.component.css',
     '../../assets/bootstrap.min.css'
  ],
})

Upvotes: 1

Related Questions