Bootstrap with Angular is a topic that has been hotly contested and debated during the past decade.
In this article, we will introduce these two frameworks, and also, we will discuss ways to combine Bootstrap with Angular to style up apps UI.
When it comes to App development Angular is one of the most popular platforms and frameworks to develop single-page applications with standard structure.
Similarly, Bootstrap is also a very popular framework for front-end development which helps in designing intuitive responsive UI without banging your head in CSS.
Bootstrap is the best framework that can go with Node Js, Angular, and many more frameworks. Before discussing how to install Bootstrap with Angular and leverage their features to develop the coolest app in the world let’s get familiar with both frameworks briefly.
Contents
What is Bootstrap?
Bootstrap is the most popular HTML and CSS front-end development framework that is free and open source. It helps in building websites and apps quickly without much effort in front-end development.
It is the world’s most popular framework for building responsive, mobile-first app on the web. Bootstrap saves time from writing a lot of CSS code and gives us more time to spend on designing web pages.
Bootstrap 5, released on June 16, 2020, is the latest version of Bootstrap which brings many new and powerful features to the framework like vanilla JavaScript, Color Palette, etc.
We will discuss more going forward but before that let’s get aware of Angular.
What is Angular?
Angular is an open-source free Application framework based on TypeScript and led by an enormous number of community members and a dedicated team at Google.
Its primary purpose is to develop single-page applications with the standard structure for developers to work with.
Installing Angular
Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately. Open a command line and run the below command to install the latest version of Angular CLI using the npm package manager –
npm install -g @angular/cli For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub.
To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:
ng new my-first-project
cd my-first-project
ng serve While configuring, choose CSS as the stylesheet format because we’ll mostly use the CSS version of Bootstrap in this article.
After generating the directory structure and necessary files, install the required dependencies and start localhost.
Installing Bootstrap in your projects-
There are various ways that you can use to install Bootstrap in the project:
- Installing Bootstrap from npm using the npm install command,
- Downloading Bootstrap files and adding them to the src/assets folder of your Angular project,
- Using Bootstrap from a CDN
Installing Bootstrap from npm using the npm install command
Let’s install Bootstrap using the npm install command. Go back to your command-line interface and install Bootstrap via npm as follows:
npm install bootstrap This will also add the bootstrap package to package.json and the latest bootstrap will be installed.
The Bootstrap assets will be installed in the node_modules/bootstrap folder. You’ll need to tell Angular where to look for them.
Why Bootstrap with Angular?
Bootstrapping an application in Angular can easily reduce your efforts by all means. Bootstrap will save all your CSS adjustment times which can be utilized in designing your pages and building the UI logic.
Another major benefit of Bootstrapping is that bootstrap is a functional component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application.
How to add Bootstrap with Angular?
1. Adding Bootstrap to Angular Using Index.html
You can include Bootstrap files from node_modules/bootstrap using the index.html file. Open the src/index.html file and add the following tags:
• A <link> tag for adding the bootstrap.css file in the <head> section,
• A <script> tag for adding the jquery.js file before the closing </body> tag,
• A <script> tag for adding the bootstrap.js file before the </body> tag.
You can use this below HTML code as an example for your reference-
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap with Angular Article</title> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="moracun.ico">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<app-root></app-root>
<script src="../node_modules/jquery/dist/jquery.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
2. Integrating Bootstrap with Angular Using styles.css
We can also use the styles.css file to add the CSS file of Bootstrap to our project.
Open the src/styles.css file of your Angular project and import the bootstrap.css file as follows:
@import "~bootstrap/dist/css/bootstrap.css" 3. Integrating Bootstrap with Angular Using angular.json
Open the angular.json file from your project directory and include:
• node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array,
• node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,
• node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,
As follows:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular-bootstrap-examples": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/angular-bootstrap-examples", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.js" ] }, 4. Adding Bootstrap to Angular Using Schematics
You have a new simpler and easier way to add Bootstrap with the help of the ng add command
You can simply run the following command to add ng-bootstrap:
ng add @ng-bootstrap/schematics That’s it. You now have support for Bootstrap components and styles without any extra configurations. You also don’t need jQuery since we are using ng-bootstrap.
Styling an Angular App with Bootstrap new features of 2021
1- CSS custom properties
In bootstrap5, we can customize the CSS properties, and in Bootstrap 4, we depend on just root variables for color and fonts. E.g., in Bootstrap5, the component will use local variables to style the element. We must add bs- to all our custom properties to avoid any CSS conflicts.
Thus, we are not totally dependent on the SASS variables for this. This is one of the significant features of bootstrap5.
2- Vanilla JavaScript introduced except for jQuery
Since the beginning when bootstrap was created, people start imagining jQuery as its backbone.
Yet, some developers did not like this forced dependency on jQuery. They wanted to use bootstrap with modern JavaScript frameworks like vue.js and react.
You can add jQuery if your project requires it, otherwise, there will not be any need for adding jQuery and JavaScript will rescue your needs.
3- Responsive Font Size (RFS)
For a responsive UI, as the viewport gets smaller, the font size also needs to get smaller, accordingly.
Implementing this feature with the old version of bootstrap was difficult. But, this tedious task is made easy with bootstrap 5 by offering Responsive font size (RFS).
4- Better form controls
In bootstrap 5, there is no need for a custom class. By default, it comes with the radio button and checkbox.
Bootstrap 4 includes custom-control-label, custom-control-input, and custom-control, but with the latest bootstrap version, we don’t need any of these.
Bootstrap 5 includes custom-designed Form Controls. Because of its custom design, the form controls will provide a more consistent look and feel across browsers.
