Learn To Integrate Bootstrap 4 With Angular 5

Integrate Bootstrap

Bootstrap 4 is a popular CSS and HTML framework for building a responsive website. Bootstrap 4 is the latest version of bootstrap which comes with new features for the framework.

In this tutorial, we are going to learn how to use Bootstrap 4 with the latest version of Angular, Angular 5. We will integrate Bootstrap in Angular 5 by using NPM as this will help you better understand how to integrate Bootstrap in Angular 5.

To set up your angular project, you first need to download NodeJS, as this is required to install some packages in your app. You can download and install NodeJS from https://nodejs.org/en/.

Now, you’ll also need to download and install code visual studio from https://code.visualstudio.com/download which is used for code editing.

After the NodeJS installation is complete, install Angular on your system from https://cli.angular.io/ and install the global Angular CLI by using NPM. The CLI gives us a fresh installation of the Angular Project.

Now, create a new angular project using the command below. We are using the SASS preprocessor by using command –style = scss

You should have created a angular project with name mdbs as shown below:

name mdbs

Go to mdbs folder and install 4 different packages – Angular Bootstrap MD, Chart.JS, Font Awesome and HammerJS using npm. To install the packages, run the following command.

• Angular bootstrap md- this package is used for the Angular project. This is Mdbootstrap
• Chart.js- this is a charting library which is used for creating charts
• font-awesome- this is for designing icons and will use Mdbootstrap.
• Hammerjs – this is used for enabling touch for elements on devices of such as mobiles or tablets.

The above command will create these four packages in your node module folder
Open “app.module.ts”, which is located on the C:\new\mdbs\src\app folder.

In this file, import the NO-ERRORS_SCHEMA from the Angular core library and import the MDBBootstrap module from angular-bootstrap-md. Check app.module.ts file as shown below.

Now, open the angular-cli.json file and add the scripts and styles. In styles include the font-awesome.scss file, the bootstrap.scss file, and the mdb-free.scss file which is available in the Node module folder.

In the script, also include the Chart.js, hammer.min.js files from the node module folder:

In the ts.config file, on the bottom include the angular-bootstrap-md file from the node module folder. See the code show below:

Now, go to the console and run the “ng server –open” code to run the Angular project. You will see your project open in the browser on the localhost:4200

ng server –open

Open the app.component.html file and add the navbar code which you can take from here – https://getbootstrap.com/docs/4.0/components/navbar/
and add CSS. See the code below:

Now, go to localhost:4200 and you will see Bootstrap 4 has integrated within your Angular 5.

Hello -world

In this tutorial, you learned how to integrate Bootstrap 4 with Angular 5, while creating an entire application.


Please enter your comment!
Please enter your name here