Bootstrap with Angular
Bootstrap is one of the most popular CSS frameworks that helps you build responsive and modern web applications easily.
Here is how to add Bootstrap to your Angular project in a few simple steps
Here is how to add Bootstrap to your Angular project in a few simple steps
Step 1: Create a New Angular Project
First, open Command Prompt (Windows) or Terminal (macOS/Linux).
Use Angular CLI to create a new app
This will create a new folder called myFirstWebApp containing your Angular project.
First, open Command Prompt (Windows) or Terminal (macOS/Linux).
Use Angular CLI to create a new app
ng new myFirstWebAppThis will create a new folder called myFirstWebApp containing your Angular project.
Step 2: Install Bootstrap
Navigate into your new project folder
Now, install Bootstrap using npm (Node Package Manager)
This command downloads Bootstrap and saves it in your projects dependencies.
Navigate into your new project folder
cd myFirstWebApp
Now, install Bootstrap using npm (Node Package Manager)
npm install bootstrap
This command downloads Bootstrap and saves it in your projects dependencies.
Step 3: Import Bootstrap Styles
To actually use Bootstraps styles in your app, you need to import them.
Open the file
At the very top of this file, add
This tells Angular to include Bootstraps CSS when building your app.
To actually use Bootstraps styles in your app, you need to import them.
Open the file
src/styles.css
At the very top of this file, add
@import '~bootstrap/dist/css/bootstrap.css';This tells Angular to include Bootstraps CSS when building your app.
Step 4: Run Your Angular App
Now, lets see if everything works. In your project folder, type
Angular CLI will compile your app and start a local server.
Open your web browser and visit
Your app should now load, and you can start using Bootstrap classes to style your pages.
Now, lets see if everything works. In your project folder, type
ng serve
Angular CLI will compile your app and start a local server.
Open your web browser and visit
http://localhost:4200
Your app should now load, and you can start using Bootstrap classes to style your pages.
Tip: How to Use Bootstrap in Angular
Once added, you can use Bootstraps classes directly in your HTML. For example, to create a blue button
Once added, you can use Bootstraps classes directly in your HTML. For example, to create a blue button
<button class="btn btn-primary">Click Me</button>