Bootstrap is a popular front-end framework that helps in designing responsive and mobile-first web pages quickly and efficiently. Integrating Bootstrap into an Angular application can significantly enhance the visual appeal and usability of your application. This guide will walk you through the steps to set up Bootstrap in your Angular app.
Prerequisites
Before you begin, ensure you have the following installed:
- Node.js and npm (Node Package Manager)
- Angular CLI
If not, you can download and install Node.js from here and install Angular CLI using npm:
npm install -g @angular/cli
Step 1: Create a New Angular Project
First, create a new Angular project using Angular CLI. Open your terminal and run:
ng new my-angular-app
cd my-angular-app
Step 2: Install Bootstrap & Popper
Next, install Bootstrap and Popper via npm. Run the following command in your project directory:
npm install bootstrap @popperjs/core
Step 3: Configure Angular to Use Bootstrap & Popper
To use Bootstrap styles in your Angular project, you need to import the Bootstrap CSS and Popper JS into your project. Open the angular.json file and find the styles array. Add the Bootstrap CSS file path to this array:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Next find the scripts array and add the Bootstrap JS and Popper JS file paths to this array:
"scripts": [
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"mode_modules/bootstrap/dist/js/bootstrap.min.js"
]
At this point bootstrap should be set up so let’s test it out.
Step 4: Verify Bootstrap Installation
To verify that Bootstrap is correctly installed, you can use some Bootstrap classes in your application. Open src/app/app.component.html and add some Bootstrap elements:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Run the application
ng serve
Open your browser and navigate to http://localhost:4200. You should see the Bootstrap-styled elements on your page.