angular
  1. angular-bootstrap-using-cdn
PreviousNext

Angular Bootstrap Using CDN

Bootstrap is a popular front-end framework that is widely used for building responsive and mobile-first websites. Angular is also a popular JavaScript framework used for building web applications. In this tutorial, we will learn how to use Bootstrap with Angular application using CDN (Content Delivery Network).

Syntax

Add the following code in your index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU0Xo977pnb8tbJwOusfKpBwBhEtHGzL/6V3hM6z7PLZsN"
        crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>

  <!-- Bootstrap JS Bundle-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
          integrity="sha384-OgVRvuATP1z7JjHLkuOU0Xo977pnb8tbJwOusfKpBwBhEtHGzL/6V3hM6z7PLZsN"
          crossorigin="anonymous"></script>

</body>
</html>

Example

<div class="container-fluid">
  <h1>Angular Bootstrap example using CDN</h1>

  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>
  </div>
</div>

Output

The above example will produce a card with some sample content, styled using Bootstrap classes.

Angular Bootstrap Example Output

Explanation

We have added the Bootstrap stylesheet links in the head section and Bootstrap JS scripts at the end of the HTML body section. This makes Bootstrap available in our Angular app.

The example has a basic Bootstrap card with some text content. We have used various Bootstrap classes to style the card as well as its content.

Use

Using Bootstrap with Angular application using CDN is a quick and easy way to add Bootstrap styling to your app. You can use various Bootstrap classes in your Angular components and templates to style your app.

Important Points

  • Make sure you include the Bootstrap CSS and JS files in the correct order, as shown in the example above.
  • Use the latest version of Bootstrap to ensure compatibility with Angular.
  • Avoid using jQuery or any other non-Angular JavaScript libraries as they might conflict with Angular's own JavaScript code.

Summary

In this tutorial, we learned how to use Bootstrap with Angular application using CDN. We added the necessary Bootstrap CSS and JS files in the index.html file and created a basic example of a Bootstrap card styled using various Bootstrap classes.

Using Angular Material ComponentsBootstrap via npm
Published on: