Adding Bootstrap to an Angular application can significantly enhance the project’s design and responsiveness and can save you time by providing utility classes that you don’t need to write yourself. In this blog post, we’ll walk through the steps to integrate Bootstrap CSS into a sample Angular project.
Prerequisites
Before we start, ensure you have the following installed:
Step 1: Create a New Angular Application
First, create a new Angular application using the Angular CLI. We’ll use this application in a bit to add a small sample of Bootstrap code to show that the technique here is working correctly.
$ ng new angular-bootstrap-app
You’ll be prompted to add Server Side Rendering and Static Site Generation. For this demo, you can select No
as we’re not using those features. Next you’ll be asked which stylesheet format you wish to use. Again, its not that important for this demo, so select the default of CSS
.
Step 2: Install Bootstrap
Navigate to your project directory and install Bootstrap via npm:
$ cd angular-bootstrap-app
$ npm install bootstrap
This will install the latest version of Bootstrap into the project. At the time of writing, this is version 5.2.3
Step 3: Configure Angular to Use Bootstrap
To include Bootstrap in the project, you need to update the angular.json
file. This file provides the Angular configuration options for the project that are used at build time and by the Angular CLI.
Add the Bootstrap CSS file to the styles
array and the Bootstrap JavaScript file to the scripts
array (if you’re not sure of the names of these files, you can navigate through the node_modules
folder and locate the files you wish to select):
{
"projects": {
"angular-bootstrap-app": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
}
}
}
}
}
}
These styles
and scripts
sections of the angular.json
file define any additional CSS and JavaScript that can be used within the application. You’ll probably notice that the styles
section already has one entry in it src/styles.css
which is the default application style sheet for the project.
These entries require a css
or js
file relative to the root of the project — in this case, that starts with the node_modules
directory.
Step 4: Use Bootstrap in Your Components
Now that Bootstrap is integrated, you can use its classes within Angular components. To show an example of this, change the contents of the src/app/app.component.html
to include the following sample Bootstrap code:
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#helloWorld"
>
Click Me!
</button>
<div
class="modal fade"
id="helloWorld"
tabindex="-1"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="helloWorldTitle">Hello, World !</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" style="min-height: 200px">
<p>Here's a demo of using Bootstrap in an Angular project.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
This code adds a Button onto the application’s home page, which, when pressed, displays a Modal Dialog Box.
Step 5: Run Your Application
Finally, run the application to see Bootstrap in action:
$ ng serve -o
This command will package the Angular application (including Bootstrap) and open the default browser to view the application (by default, this will be http://localhost:4200
.)
Conclusion
Integrating Bootstrap into an Angular application is straightforward and can be used to greatly enhance a project’s UI and imcrease your speed of development.
Happy coding!