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

Question

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.

Pinaki · Accepted Answer · 2022-01-31 15:14:45Z

1

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'
  ],
})

answered Jan 31, 2022 at 15:14

Pinaki

1,07010 silver badges21 bronze badges

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

2 Comments

Nick the Community Scientist Over a year ago

It worked. I got the minified CSS Bootstrap file from here getbootstrap.com/docs/5.1/getting-started/download. Nicely done.

Pieterjan Over a year ago

Problem with this approach is that this will replicate the entire bootstrap css framework for each component you're importing the css file in (while encapsulating the styles).

Danilo Körber · Accepted Answer · 2022-01-31 16:47:37Z

1

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 {}

edited Jan 31, 2022 at 16:47

answered Jan 31, 2022 at 11:57

Danilo Körber

9402 gold badges9 silver badges32 bronze badges

4 Comments

Nick the Community Scientist Over a year ago

Sounds great. I will give it a go shortly and see if it works.

Pinaki Over a year ago

cdn url not working -

Failed to compile. HostResourceResolver: could not resolve https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css in context of path to component.ts)

Nick the Community Scientist Over a year ago

Yeah, it seems the CDN link is not recognized for me either.

Danilo Körber Over a year ago

Then you should download the css file, save it in your assets folder and point the component to that file. I updated my response.

Pieterjan · Accepted Answer · 2022-02-04 20:12:36Z

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

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

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

Are you sure about the fact: "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." You got any resource you can show me for this? I am new so I cant confirm or deny.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Related