Search code examples
javascriptjqueryangulartwitter-bootstrapbootstrap-5

Bootstrap 5 in Angular Application


Since version 5 Bootstrap framework has removed jQuery as a requirement.

I want to know how this change affects the Angular application?

Can we use all provided Bootstrap functionalities in Angular (for example dropdowns)?

I know that Angular shouldn't be combined with JQuery - in earlier versions of Bootstrap, JQuery was recommened to import if we want to use all bootstrap functionalities and it was bad.

But Bootstrap 5 doesn't rely on JQuery anymore so is it safe to use it with my Angular applications?

As for now I don't want to use bootstrap alternatives like ng-bootstrap, that is why I'm asking is it okay and safe to use Bootstrap 5 in Angular?


Solution

  • Yes, you can use it now. You can use it by installing with npm as well as by including the CDN links in your project.

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    

    You can also check the implementation of the bootstrap 5 in angular 11 here. - https://www.c-sharpcorner.com/article/add-bootstrap-5-in-angular-11/