What To expect
In this angular tutorial, we will see how we can integrate bootstrap with angular to build a beautiful experience
Bootstrap
World most famous front-end component library to Build responsive, mobile-first projects on the web It is a free and open-source CSS framework. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components
Setting Up An Angular Project With Angular CLI
First, let's start by creating a new Angular project. The easiest way to do so is to use the Angular Command Line Interface (CLI) to generate a new project. First, you need to make sure that Angular CLI is installed on your system. As Angular CLI comes as an NPM package the installation can be done by using the following command.
For more details visit Angular Tutorials- Development Environment Setup an article where I showed how to quickly set up your development environment ok so once you have your project ready go ahead and hit ng serve -o and your application will start.
npm install -g @angular/cli
Install Bootstrap
Now that the Angular project is ready and running we can continue and add Bootstrap to the project. There are different ways of adding bootstrap to our project.
Using Bootstrap CDN
head over to get bootstrap the official website of bootstrap and hit on get started button
Copy-paste the stylesheet into your before all other stylesheets
<head>
<meta charset="utf-8">
<title>Projectone</title>
<base href="/">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
the next step is to paste all the js scripts in your body tag at the end
<body>
<app-root></app-root>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
your full html will look like this
Angular tutorials | Integrating angular with bootstrap.
Using Bootstrap with npm
the other way to use bootstrap is to install bootstrap as an npm package and then use Bootstrap depends on Jquery and popperjs so we will need to include that also as a peer dependency
npm i jquery popperjs bootstrap --save
the above command will install jquery popperjs and bootstrap as pm package now we need to configure css and js in our angular.json file (the recommended way)
so head over to your angular.json file and there you will find a styles array and scripts array just paste this lines (nothing more than imports of css and js from node_modules)
"styles": [
"src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
once you do that restart your application as whenever you make any changes to the angular.json file you need to restart the application Visit Smartcodehub.com
Show Us Your Support And Share Us On