If you are a Front-End Web Developer, one of the first frameworks you might have come across is Bootstrap. Bootstrap offers a quick and responsive way to style your web pages, whether you’re just a beginner or have experience in building large-scale applications for a long term.
In this blog, we will walk you through what Bootstrap is and how you can use it in an Angular Project. So let’s get started!
Table of Contents
What is Bootstrap?
Let us understand the meaning of Bootstrap precisely. Bootstrap is a framework based on HTML, CSS, and JavaScript. It is used majorly for developing websites that are highly responsive and mobile-friendly. It is a front-end framework that enables a faster web development process. The design templates used by Bootstrap are all based on HTML and CSS. These templates are used for typography, image carousels, buttons, tables, navigation, modals, etc. Bootstrap also makes use of JavaScript plug-ins to create responsive designs.
Key Features of Bootstrap
Some of the key features of Bootstrap include the following:
- Responsive Grid System: It allows you to structure layouts easily for multiple screen sizes.
- Predefined Components: It includes a range of UI components, which include alerts, modals, and tooltips.
- Customizable: Bootstrap can be customized by using SCSS variables and utility classes.
- Cross-Browser Compatibility: It works well in all modern browsers.
- Built-in JavaScript Plugins: Bootstrap also consists of built-in JavaScript plugins. This helps in interactivity without depending on additional libraries.
Angular Bootstrap
Angular Bootstrap is a component that initiates or starts the Angular application. It basically controls the initialization process of the application. The function used to start the application is angular.bootstrap(). The syntax is given by:
angular.bootstrap(element, [modules], [config])<br>
In the above syntax, the “element” denotes the DOM element. It can be a document, file, etc., basically something that forms the root of the Angular application.
Next is the “modules” that denote the array of modules, if any, to be loaded.
Lastly, “config” denotes the configuration options.
Angular Bootstrap takes the following steps to initiate the Angular application :
- Firstly, the loading of Index.html
- Next is the loading of Angular, third-party libraries, and applications
- Main.ts the application entry point
- Root module
- Root component
- Template
What is Bootstrap and How to Embed Bootstrap into Angular?
We have already discussed what Bootstrap is. Now, let us quickly dive into the process of embedding Bootstrap into Angular.
There are two ways in which you can embed Bootstrap into your application. The two ways are mentioned below:
-
- Embedding Angular Bootstrap via CDN
- Embedding Angular Bootstrap via NPM
We will discuss more about these two ways to embed Bootstrap later in this blog.
How to Create an Angular Bootstrap?
Angular Bootstrap means using the Bootstrap framework in an Angular application, which helps to style your interface. Bootstrap provides you with readymade design elements like buttons, forms, and layouts. These look good on all screen sizes. By combining it with Angular, you can build clean, responsive, modern-looking web pages using less custom CSS.
There are 2 ways to integrate Bootstrap with Angular. They are as follows
-
- By using Plain Bootstrap (via CDN or npm)
-
- By using ng-bootstrap (Angular-powered bootstrap components).
In this section, we will cover both ways.
Step 1: Create a new Angular Project
At first, you have to install Angular CLI. This can be done by typing the following command:
npm install -g @angular/cli
After that, you have to create a New Angular Project. This can be done by running the following command:
ng new angular-bootstrap-app
cd angular-bootstrap-app
This command helps you create a new folder named angular-bootstrap-app. Inside this folder, all the necessary files and folders for your Angular application are set up by Angular CLI. During this process, you might also encounter questions like:
-
- Would you like to add Angular routing? (yes/no)
- Which stylesheet format do you prefer? (CSS, SCSS, etc.)
If you are using the extended features of Bootstrap, like theming, it is preferred to use SCSS.
Step 2: Install Bootstrap
Once you have created your Angular Project and you’re inside your project folder, you have to add Bootstrap in your next step. For doing this, you can use its built-in styles like buttons, forms, and grids.
You can include Bootstrap in your Angular project by following these 2 options:
Option 1: Install Bootstrap via npm
This is the preferred way to include Bootstrap in your Angular project, especially for production. For this, you have to run the installation command first in your terminal.
npm install bootstrap
-
- The above command is used for installing Bootstrap and saving it in the node_modules folder of your project.
- It is also used to update your package. json so that others get to know you are using Bootstrap.
After this step, you need to link Bootstrap to your project. You have to tell Angular to use Bootstrap’s CSS. To do this:
-
- Open the file named angular.json from your project folder.
- Then look for the styles array inside the build options.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
-
- The above JSON code tells Angular to load Bootstrap’s styles first, and then your custom styles (in styles.css).
- Save the file.
Benefits of using npm:
-
- You don’t need an internet connection to use Bootstrap.
- For updating Bootstrap, just run the command npm update.
- It is easier to manage in large-scale Angular applications.
Option 2: Add Bootstrap via CDN
If you want to test Bootstrap quickly, this is a faster way.
Step 1: Open index.html
-
- Look for the index.html file in the src folder.
- This is the base HTML file, which is used by Angular to bootstrap your application.
Step 2: Add the below-mentioned link in the <head> section
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
When the app runs, it will load the Bootstrap styles from the internet.
Limitations of using CDN:
-
- You should be connected to the internet for the styles to load.
- It is not suitable for production apps.
- There is no easy way to customize Bootstrap.
Step 3: Using Bootstrap Classes in Components
Since Bootstrap is now integrated, you can use its classes directly in your HTML files.
Example: app.component.html
<div class="container mt-5">
<h2 class="text-center text-primary">Angular + Bootstrap</h2>
<div class="card p-3 mt-4">
<form>
<div class="mb-3">
<label for="course" class="form-label">Course Name</label>
<input type="text" class="form-control" id="course" placeholder="Enter course name"/>
</div>
<button class="btn btn-success">Submit</button>
</form>
</div>
</div>
The above code is used to create a simple, styled form by using Bootstrap and Angular. It consists of a centered heading, a card container, a labeled text input for entering a course name, and a green “Submit” button. The Bootstrap classes like container, card, form-control, and btn btn-success are used for structuring and styling the form elements. This helps to provide a clean and responsive layout.
Using Angular-Specific Bootstrap Components
If you want Angular-native Bootstrap components (like modals, date pickers, and accordions), you can use ng-bootstrap.
Install ng-bootstrap and Bootstrap:
You can install ng-bootstrap and Bootstrap by using the command given below:
ng add @ng-bootstrap/ng-bootstrap
This command automatically installs Bootstrap and also helps in integrating the NgbModule into your app.
Example: Using NgbAlert
You can use the given command in the app.component.html file.
<ngb-alert [dismissible]="true" type="success">
This is a success alert — check it out!
</ngb-alert>
The above code is used to display a dismissible success alert. It uses the ngb-alert component of NgBootstrap. The color of the alert is set up by type=”success”, and for closing the color [dismissible]=”true” is used. The message displayed inside the alert is: “This is a success alert- check it out!”
Now, for app.module.ts you can add the following code:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgbModule],
bootstrap: [AppComponent]
})
export class AppModule {}
The above code is used to import NgBootstrap (NgbModule) into your Angular application. The main component (AppComponent) declares the @NgModule decorator and then adds both BrowserModule and NgbModule to the imports array. This enables the use of NgBootstrap components like ngb-alert. After that, it bootstraps the app with AppComponent.
Step 4: Run the Application
For viewing your Angular app in action, run the following command:
ng serve
This will redirect you to your application in your browser at http://localhost:4200.
History of Bootstrap
The history of Bootstrap dates back to August 2011. It was developed by Mark Otto and Jacob Thornton during a project at Twitter. Bootstrap was released as an open-source product in August 2011 on GitHub. Almost three years later, Bootstrap was announced as the top GitHub project.
Why Use Bootstrap?
Now the question arises, why to use Bootstrap. The following reasons list why it is beneficial to use Bootstrap:
- The first reason definitely has to be the ease of using Bootstrap. Anyone who has a basic knowledge and understanding of HTML and CSS can use Bootstrap.
- Bootstrap is easily compatible with almost all browsers such as Chrome, Internet Explorer, Safari, Firefox etc.
- Bootstrap adopts a mobile-first approach, i.e., everything is stored in a library instead of separate files.
- Bootstrap’s design is very responsive as it easily adjusts to all devices, desktop, tablet, or mobile.
- Bootstrap is an open-source framework.
- The built-in components offered by Bootstrap make it a preferred choice. Not only this, these components can be customized, which is an added advantage
- Bootstrap offers web-based customization options, which is one of the most important features of the framework.
What is a Responsive Website?
For the above-mentioned reasons, the responsiveness of the Bootstrap framework was discussed at one point. Hence, a responsive website is one that can automatically adjust itself as per the requirements of all kinds of devices such as tablets, smartphones, desktops, etc. It is because of the responsiveness of the website that it looks different on a desktop as compared to on a smartphone.
What Does a Bootstrap Package Contain?
As already discussed above, Bootstrap is a framework based on HTML, CSS, and JavaScript, which is used in developing highly responsive and mobile-friendly websites.
A Bootstrap package consists of the following features:
- Scaffolding: This refers to the basic structure that is offered by Bootstrap. The structure we are talking about includes the grid system, link styles, and background.
- CSS: Bootstrap offers one of the most useful features for developing responsive websites wherein fundamental HTML elements are styled and enhanced with extensible classes and an advanced grid system.
- Components: Bootstrap consists of almost more than a dozen reusable components. These components are reusable and built to provide iconography, dropdowns, navigation, alerts, pop-overs, etc.
- JavaScript Plug-ins: Bootstrap contains more than a dozen customizable jQuery plug-ins.
- Customize: The customize feature lets us customize Bootstrap’s components, fewer variables, and jQuery to create our own personalized version.
What is Bootstrap 4?
Bootstrap 4 is the latest version of Bootstrap, having all the important and advanced features of the framework. It is also the most popular HTML, CSS, and JavaScript framework used to develop responsive and highly mobile websites.
What is Bootstrap 5?
Bootstrap 5 is the latest version of Bootstrap and was launched in mid of June in the year 2020 This version has new components and is much more responsive than the previous Bootstrap versions. All the latest and stable releases of web browsers, except Internet Explorer 11 and below are supported by Bootstrap 5.
Also new classes have been added to Bootstrap 5, some of which are:
- gx-* (This class controls the horizontal/column gutter width)
- gy-* (It has been added to effectively control the vertical/row gutter width)
- g-* (This class controls the horizontal & vertical gutter width)
- Rows-cols-auto
Some other updated functionalities of Bootstrap 5 include easy modification of API utilities, which was absent in Bootstrap 4 and other previous versions.
Embedding Bootstrap into Angular
Even though we have discussed embedding Bootstrap into Angular before in this blog, let us dig deeper into understanding how it is done.
Angular Bootstrap via CDN
We can load Angular Bootstrap via CDN by Bootstrap CDN, which is a public content delivery network. The CSS and JavaScript files need to be remotely loaded from the servers. To enable this, copy the CSS and JavaScript code, and paste them in the index.html file of the Angular application.
Consider the following image and the code below as a reference:
<!doctype html><br>
<html lang="en"><br>
<head><br>
<meta charset="utf-8"><br>
<title>Demo Components</title>
<!-- Sets base URL for the app --><br>
<base href="/">
<!-- Responsive design settings --><br>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon icon --><br>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Bootstrap 4 CSS --><br>
<link<br>
rel="stylesheet"<br>
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"<br>
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"<br>
crossorigin="anonymous"<br>
><br>
</head><br>
<body>
<!-- Angular root component --><br>
<app-root></app-root>
<!-- jQuery, Popper.js, and Bootstrap 4 JavaScript --><br>
<script<br>
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"<br>
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"<br>
crossorigin="anonymous"<br>
></script><br>
<script<br>
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"<br>
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"<br>
crossorigin="anonymous"<br>
></script><br>
<script<br>
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"<br>
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"<br>
crossorigin="anonymous"<br>
></script><br>
</body><br>
</html>
Angular Bootstrap via NPM
NPM stands for the node package manager. This is another way of embedding Bootstrap in an Angular application. For this, install Bootstrap in the project using NPM.
The following are the two commands that can be given to install Bootstrap and jQuery libraries:
npm install bootstrap
npm install jquery
The files installed using the above commands will be loaded in the node_modules file.
node_modules/jquery/dist/jquery.min.js<br>
node_modules/bootstrap/dist/css/bootstrap.min.css<br>
node_modules/bootstrap/dist/js/bootstrap.min.js<br>
Now, copy and paste the relative paths to the loaded files in the angular.json file in the build section.
"build": {<br>
"builder": "@angular-devkit/build-angular:browser",<br>
"options": {<br>
"outputPath": "dist/democomponents",<br>
"index": "src/index.html",<br>
"main": "src/main.ts",<br>
"polyfills": "src/polyfills.ts",<br>
"tsConfig": "tsconfig.app.json",<br>
"aot": true,<br>
"assets": [<br>
"src/favicon.ico",<br>
"src/assets"<br>
],<br>
"styles": [<br>
"src/styles.css",<br>
"node_modules/bootstrap/dist/css/bootstrap.min.css<br>
],<br>
"scripts": [<br>
"node_modules/bootstrap/dist/js/bootstrap.min.js",<br>
"node_modules/jquery/dist/jquery.min.js"<br>
]<br>
},<br>
Conclusion
Angular has been dominating the world of open-source web application development platforms since it first came into the market. Considering all the amazing features and files and the high-level web development support that it provides, one can be easily mistaken into thinking that Angular must be hard to learn and use. Contrary to that, Angular is not that hard to learn and use. It makes working with applications fun and interesting. No wonder Angular has such a huge community and support.