Tutorial Playlist

What is Bootstrap and How to Embed Bootstrap into Angular?

Lesson 5 of 5By Chinmayee Deshpande

Last updated on Oct 14, 2020654
What is Bootstrap and How to Embed Bootstrap into Angular?

Imagine you wish to create a webpage with a regular, commonly used design, what if you already had the template at your disposal? Wouldn’t it be easy for you to just customize and code it according to your requirements? Enter, Bootstrap. In this article on Angular Bootstrap, we will show the step-by-step procedure to embed Bootstrap into your Angular application and create an interactive Webpage. Here are the key topics that will be covered in this article: 

  • What is Bootstrap? 
  • Uses of Bootstrap
  • Embedding Bootstrap into Angular 
  • Demo - Creating an Application With Angular Bootstrap

What is Bootstrap?

Bootstrap is a powerful toolkit. It is a collection of HTML, CSS, and JavaScript tools for creating and building responsive web pages and web applications. Bootstrap is a free and open-source project, hosted on GitHub, and originally created by Twitter. 

To put it more easily, Bootstrap is a large collection of reusable, handy bits of code written in CSS, HTML, and JavaScript. It is also a front-end development framework that enables developers & designers to quickly build fully responsive websites.

Now that you’ve understood the basics of what Bootstrap is, let’s see why it is preferred.

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

Uses of Bootstrap

  • Bootstrap offers responsive CSS that adjusts to phones, tablets, and desktops. Bootstrap is also cross-browser compatible and is supported by Chrome, Firefox, Internet Explorer, Safari, and Opera
  • Bootstrap needs minimal setup and can create a working layout in less than an hour. You don’t have to spend your valuable time creating anything from scratch.
  • You don't need to be proficient at HTML and CSS to use bootstrap, it's a plus if you're a backend developer and need to do some UI changes.
  • Bootstrap comes with components you can easily use for your web page, including navigation bars, dropdowns, progress bars, and thumbnails.
  • It offers excellent documentation and has a big community.

In the following section of the Angular Bootstrap article, you’ll understand how to incorporate Bootstrap in your application.

Embedding Bootstrap into Angular

There are two ways to embed the bootstrap library to your application. 

  • Angular Bootstrap via CDN
  • Angular Bootstrap via NPM

Angular Bootstrap via CDN

Bootstrap CDN is a public Content Delivery Network. It enables you to load the CSS and JavaScript files remotely from its servers. For that, head to this link, copy the CSS and JavaScript code and paste them in the head and the body sections of the index.html file of your Angular application. 

Bootstrap_CDN

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Democomponents</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <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">

</head>

<body>

<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>

<app-root></app-root>

</body>

</html>

We have highlighted the pasted code for your better understanding. 

Angular Bootstrap via NPM

Another way to add Bootstrap to your Angular project is to install it into your project folder by using NPM (Node Package Manager). 

npm install bootstrap 

npm install jquery

The commands stated above installs the Bootstrap and JQuery libraries. The files, once installed can be found in the node_modules file

  • node_modules/jquery/dist/jquery.min.js
  • node_modules/bootstrap/dist/css/bootstrap.min.css
  • node_modules/bootstrap/dist/js/bootstrap.min.js

Paste the relative paths to these files in the angular.json file, under the build section.

"build": {

          "builder": "@angular-devkit/build-angular:browser",

          "options": {

            "outputPath": "dist/democomponents",

            "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": [

              "src/styles.css",

              "node_modules/bootstrap/dist/css/bootstrap.min.css" 

            ],

            "scripts": [

              "node_modules/bootstrap/dist/js/bootstrap.min.js",

              "node_modules/jquery/dist/jquery.min.js"

            ]

          },

Now that the initial setup for the application is created, let us understand better with the help of a simple demo on how to use the templates, and customize them to your requirements: 

Demo - Creating an Application With Angular Bootstrap

The first thing to do is find a template you wish to create your application with. You could search Google for “Bootstrap Templates” and click on the links. 

We’ve chosen a template from this website. Below, we have added a simple gif showing the process of retrieving the HTML code for the chosen template.

Bootstrap_Template

In this demo, we are creating a Simplilearn blog that includes a few links to our courses and the link to our Youtube channel. 

Step1: Once you have the code ready, create your Angular application with the following command:

ng create <name of choice> 

cd <name of choice> 

The HTML code consists of the head section with a couple of meta tags and the heading, and the body tag consists of the different set of code for each part of the application. 

You can also find the custom CSS file for the template in the head section. Click on the link, copy the code, and paste it in the styles.css file of your application. 

body {

    padding-top: 56px;

  }

Now that the styling is done, you can copy the entire code in the body section and paste it in your app.component.html file. At this point, you can run your application to see if the template is loaded properly on the browser. 

We’re sure that you’re aware the Angular uses the concept of components to define the UI of the application. It’s a better approach to create different components for different UI elements and incorporate all of them in the final HTML file. This also allows you to alter the code without any confusion.

Step2: I’m creating four different components, navbar, intro, courses, and footer. Depending on the template you’ve chosen you can decide on the number of components you wish to create. 

Components_AngularBootstrap

You can cut and paste the code from your app.components.html file in the relevant component’s file. 

My navbar.component.html file consists of the code for the top navigation bar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

    <div class="container">

      <a class="navbar-brand" href="#">Simplilearn</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav ml-auto">

          <li class="nav-item active">

            <a class="nav-link" href="#">Home

              <span class="sr-only">(current)</span>

            </a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">About</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Services</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Contact</a>

          </li>

        </ul>

      </div>

    </div>

  </nav>

I wanted the phrase Simplilearn to appear on the bar, and as a result, I’ve added it in the code. You can alter the code according to your requirements. 

The Intro section of the blog has the following code: 

<!-- Page Content -->

<div class="container">

    <!-- Heading Row -->

    <div class="row align-items-center my-5">

      <div class="col-lg-7">

        <img class="img-fluid rounded mb-4 mb-lg-0" src="assets/Logo.png" alt="">

      </div>

      <!-- /.col-lg-8 -->

      <div class="col-lg-5">

        <h1 class="font-weight-light">World’s #1 Online Bootcamp</h1>

        <p>1,000,000 careers advanced <br>

            1,000 live classes every month <br>

            85% report career benefits including promotion or a new job</p>

        <a class="btn btn-primary" href="#">Explore Programs</a>

      </div>

      <!-- /.col-md-4 -->

    </div>

    <!-- /.row -->

    <!-- Call to Action Well -->

    <div class="card text-white bg-secondary my-5 py-4 text-center">

      <div class="card-body">

        <p class="text-white m-0" style="font-size: xx-large;">Get Certified, Get Ahead with Our Programs</p>

      </div>

    </div>

Here, we’ve added the Simplilearn logo, and a few lines to be displayed on the user interface. 

In the courses component, we’ve added three different courses and the link to the Simplilearn page for the overview of the same. Here’s the code:

<!-- Content Row -->

<div class="row">

    <div class="col-md-4 mb-5">

      <div class="card h-100">

        <div class="card-body">

          <h2 class="card-title">Post Graduate Program in Lean Six Sigma</h2>

          <p class="card-text">Duration: 6 months <br> Cohort starts: 04 Oct, 2020</p>

        </div>

        <div class="card-footer">

          <a href="https://www.simplilearn.com/pgp-lean-six-sigma-certification-training-course" class="btn btn-primary btn-sm">More Info</a>

        </div>

      </div>

    </div>

    <!-- /.col-md-4 -->

    <div class="col-md-4 mb-5">

      <div class="card h-100">

        <div class="card-body">

          <h2 class="card-title">Post Graduate Program in Full Stack Web Development</h2>

          <p class="card-text">Duration: 9 months <br> Cohort starts: 11 Oct, 2020</p>

        </div>

        <div class="card-footer">

          <a href="https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course" class="btn btn-primary btn-sm">More Info</a>

        </div>

      </div>

    </div>

    <!-- /.col-md-4 -->

    <div class="col-md-4 mb-5">

      <div class="card h-100">

        <div class="card-body">

          <h2 class="card-title">Post Graduate Program in Cyber Security</h2>

          <p class="card-text">Duration: 6 months <br>Cohort starts: 28 Sep, 2020</p>

        </div>

        <div class="card-footer">

          <a href="https://www.simplilearn.com/pgp-cyber-security-certification-training-course" class="btn btn-primary btn-sm">More Info</a>

        </div>

      </div>

    </div>

   <!-- /.col-md-4 -->

  </div>

  <!-- /.row -->

  <div class="card text-white my-5 py-4 text-center">

    <div class="center">

<video width="320" height="240" controls style="align-content: center;"> 

<source src="assets/video2.mp4" type="video/mp4"/>

      Your browser does not support the video tag.

</video>

</div></div>

<div class="card-body" id="youtube">

    <p class="text-white m-0" style="font-size: x-large; text-align: center;">

<a href="https://www.youtube.com/user/Simplilearn"><img class="img-fluid rounded mb-4 mb-lg-0" src="assets/Youtube.png" width="150px" height="150px"></a></p>

<br><h4>Check Out Our YouTube Channel for Technical Videos and Tutorials</h4>

</div>

<!-- /.container -->

I’ve also added a video and the Youtube icon that once clicked on navigates to the Simplilearn Youtube channel. 

Courses_App

Youtube_App

The footer.html file has the following code: 

<!-- Footer -->

<footer class="py-5 bg-dark">

    <div class="container">

    <p class="m-0 text-center text-white">© 2009-2020 - Simplilearn Solutions. All Rights Reserved.</p>

    </div>

    <!-- /.container -->

</footer>

Step3: The last step is to add the custom HTML tags of the components in the app.component.html file. 

<app-navbar></app-navbar>

<app-intro></app-intro>

<app-courses></app-courses>

<app-footer></app-footer>

Step 4: Save the file and run it. 

ng serve 

Once run, open your browser and navigate to localhost:4200. If another application is running on that address, you can simply run the following command: 

ng serve --port 

I’m sure all the changes made to the code will be reflected in the browser. I highly recommend you play around with the code and add other interesting features to beautify your application. 

Enroll for the Angular Certification Training Course and gain in-depth knowledge of concepts like TypeScript, Bootstrap Grid System, and more!

Next Steps

We hope that this article on Angular Bootstrap helped you understand how to embed templates into Angular. But, if you wish to learn Angular and perhaps make a career out of it, certification will come in handy.

Simplilearn's Angular Certification Training Course helps you master front-end web development with Angular. You will learn the knack of creating applications with the help of concepts like facilitating the development of single-page web applications, components, typescript, dependency injection, and directives with this course. The course also includes a real-time project to test your skills. 

If you have feedback or questions, drop us a comment in the comments section. Our experts will get back to you ASAP! 

About the Author

Chinmayee DeshpandeChinmayee Deshpande

Chinmayee is a Research Analyst and a passionate writer. Being a technology enthusiast, her thorough knowledge about the subject helps her develop structured content and deliver accordingly.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.