How to integrate Bootstrap with Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Integrating Bootstrap with Angular provides ready-to-use responsive components and utility classes for rapid UI development. As the creator of CoreUI, a widely used open-source UI library, I’ve integrated Bootstrap into Angular projects throughout my 11 years of frontend development. The most reliable approach is installing Bootstrap via npm and configuring it in angular.json for global availability. This method ensures proper loading order, maintains TypeScript compatibility, and enables all Bootstrap features including JavaScript components.
Install bootstrap and @popperjs/core packages, then add Bootstrap CSS and JS to angular.json configuration.
npm install bootstrap @popperjs/core
{
"projects": {
"your-app": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
}
}
}
}
}
<!-- Example usage in component template -->
<div class='container'>
<div class='row'>
<div class='col-md-6'>
<button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#exampleModal'>
Launch Modal
</button>
</div>
</div>
</div>
<div class='modal fade' id='exampleModal' tabindex='-1'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>Modal Title</h5>
<button type='button' class='btn-close' data-bs-dismiss='modal'></button>
</div>
<div class='modal-body'>
Modal content goes here
</div>
</div>
</div>
</div>
Here npm installs both Bootstrap and its Popper.js dependency for tooltip and popover positioning. The angular.json configuration adds Bootstrap CSS to the styles array for global styling availability. The scripts array includes Popper.js first, then Bootstrap JavaScript for interactive components like modals, dropdowns, and tooltips. The example template demonstrates Bootstrap’s responsive grid system and modal component usage. All Bootstrap utility classes and components work immediately after configuration without additional imports.
Best Practice Note:
This is the Bootstrap integration approach we recommend for Angular projects before transitioning to CoreUI for enterprise-grade component libraries. Consider using ng-bootstrap for native Angular implementations of Bootstrap components with better TypeScript support, avoid mixing Bootstrap JavaScript with Angular’s change detection by preferring Angular component libraries, and explore CoreUI for Angular as a professional alternative with advanced components built specifically for Angular.
