Throughout this tutorial, we’ll learn how to use bootstrap 4 with Angular 12 (and any previous versions such as Angular 11/10) to make your Angular app responsive.
We’ll learn how to install (and uninstall) bootstrap in Angular from npm, cdn or using the ng add schematic, and add bootstrap to the styles/scripts arrays of the angular.json file. Next, we’ll learn how to build user interfaces with various components such as navigation bars, grid, date and time pickers, tooltips, carousels, modals, tabs, dropdowns, and forms.
We’ll also see the advantages of Angular implementations for Bootstrap — ng-bootstrap vs ngx-bootstrap vs mdbootstrap. And see some popular Angular Bootstrap templates that you can use with Angular to quickly create your layouts.
3+ Ways to Add Bootstrap 4 to Angular 12
In this section, we will see how to use Bootstrap to style apps built using Angular 12.
We’ll see how to integrate Angular with Bootstrap, in various ways including using
We’ll be using Angular CLI 12 for generating a brand new project.
What is Bootstrap
Bootstrap is the most popular HTML and CSS framework for building responsive layouts with ease and without having a deep knowledge of CSS (Still custom CSS is required to customize your design and make it different from the other Bootstrap-styled websites unless you are using a BS theme developed specifically for your requirements.
Bootstrap 4 is the latest version of Bootstrap which brings many new and powerful features to the framework most importantly Flexbox which is now the default display system for the Bootstrap grid layout (one of the most important features of Bootstrap).
3+ Ways to Include Bootstrap 4 In Your Angular 12 Project
You can include Bootstrap in your Angular 12 project in multiple ways:
<head>section of the
index.htmlfile of your Angular 12 project with a
- Importing the Bootstrap CSS file in the global
styles.cssfile of your Angular project with an
scriptsarrays of the
angular.jsonfile of your project
Step 1 — Installing Angular CLI v12
Let’s get started by installing Angular CLI v12 if it is not yet installed on your machine.
Head over to a new command-line interface and run the following command to install the latest version of the Angular CLI:
$ npm install -g @angular/cli@next
Note: This will install the Angular CLI globally on your system so depending on your npm configuration you may need to add
sudo(for superuser access) in macOS and Linux or use a command prompt with admin access in Windows.
After the installation, you’ll have at your disposal the ng utility. Let’s use it to generate a new Angular 12 project as follows:
$ ng new angular-bootstrap-examples
You will be prompted for a couple of questions:
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
Most importantly, choose CSS as the stylesheet format because we’ll use the CSS version of Bootstrap in our tutorial.
The command will generate the directory structure and necessary files for the project and will install the required dependencies.
Next, navigate inside the root folder of your project:
$ cd angular-bootstrap-examples
You can then serve your Angular 12 application using the
ng serve command as follows:
$ ng serve
Your app will be served from
Step 2 — Installing Bootstrap 4 in Your Angular 12 Project
In the next step, we’ll proceed to add Bootstrap 4 to our Angular 12 application.
You can read the full tutorial in Techiediaries.