Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
Below is some advantages of using Bootstrap
- Fewer Cross-browser bugs.
- Lightweight and customizable.
- Responsive structures and styles.
Let look at how we can add Bootstrap in an angular project. First we are going to create an Angular project.
Creating an Angular project Using Angular CLI
ng new add-bootstrap
# Would you like to add Angular routing?
# Select n and Hit Enter.
Get inside the project folder:
cd add-bootstrap
Now that our project has been created, let look at how we can add bootstrap in our project in 5 simple steps.
Step 1: Adding Bootstrap 4 to Angular Using index.html
We can add Bootstrap to our angular project by adding the Bootstrap CDN in our index.html file as a link. Open index.html in our project.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ChatApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
*<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">*
</head>
<body>
<app-root></app-root>
*https://code.jquery.com/jquery-3.4.1.slim.min.js
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js*
</body>
</html>
Step 2: Installing Bootstrap 4 in your Angular project using NPM
We can add Bootstrap in our project by installation.
Run the command below:
cd add-bootstrap
npm install bootstrap
We first navigate to our project in the command prompt before running the command for the installation.
Step 3: Adding Bootstrap 4 to Angular Using Style.css
We can add Bootstrap in our project by Importing bootstrap in our style.css file.
@import "~bootstrap/dist/css/bootstrap.min.css";
Step 4: Adding Bootstrap 4 to Angular Using angular.json
We can add the file paths to the styles and scripts array in file .angular-cli.json:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Step 5: Using Bootstrap ng-bootstrap and ngx-bootstrap
Bootstrap depends on jQuery and Popper.js libraries, and if you don't include them in your project, any Bootstrap components that rely on JavaScript will not work.
And can be added to your Angular project is the following way.
First by installing ng-bootstrap and ngx-bootstrap:
npm install --save @ng-bootstrap/ng-bootstrap
npm install --save ngx-bootstrap
Second by import @ng-bootstrap.
After the installation of both dependence, we can now import it in our app.module.ts
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Now that we have added bootstrap in our project using the above steps, let now write some code to test if it works.
Now let’s code
We are going to create a simple Homepage for texting. Open app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand pl-5" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-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 ml-auto pr-5">
<li class="nav-item active pl-3 pr-3">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item pl-3 pr-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown pl-3 pr-3">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid hero-page">
<div class="container">
<div class="row align-items-center" style="height: 60vh;">
<div class="col-6">
<h1>Showcase your app with Small Apps</h1>
<p>
Besides its beautiful design. Bootstrap is an incredibly rich core
framework for you to showcase your App.
</p>
</div>
</div>
</div>
</div>
<div class="container mt-5 pt-5 pb-5 mb-5">
<div
class="row align-items-center justify-content-around"
style="height: 60vh;"
>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark" style="min-height: 10vh;">
<div
class="row justify-content-center align-items-center p-0 m-0"
style="min-height: 10vh;"
>
<div class="col-12 text-center">
<p style="color: #fff;">Copyright © 2020</p>
</div>
</div>
</footer>
Open app.component.scss and add the code.
.hero-page {
background: linear-gradient(rgba(0, 0, 0, 0.548), rgba(0, 0, 0, 0.548)),
url("../../assets/story-slider-01.jpg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 80vh;
color: white;
font-size: 20px;
}
.hero-page h1 {
font-size: 50px;
font-weight: bolder;
margin-bottom: 30px;
line-height: 65px;
}
nav ul li a:hover {
color: #02225b;
}
nav a {
font-size: 20px;
font-weight: bolder;
}
nav a:hover {
color: #02225b;
}
The result can be seen below:
We have seen different ways of including Bootstrap 4 in an Angular 9 apps.
Top comments (0)