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