Bootstrap CDN

Last Updated : 12 Feb, 2024

CDN stands for Content Delivery Network. It is used to load the content of a particular framework or library in your HTML document to enhance the web page. Bootstrap CDN is used to add Bootstrap to HTML documents. You can add it using the <Link> tag inside the <head> to load Bootstrap CSS and the <script> tag to load the Bootstrap JavaScript at the end of the <body> tag.

Bootstrap CDN:

The bootstrap CDN to include CSS and JavaScript in your HTML document are listed below:

CSS CDN:

Use the below CDN to include Bootstrap CSS in your HTML document:

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

JavaScript CDN:

The below CDN can be used to include the Bootstrap JavaScript in your HTML document:

Javascript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

Example: The below code is an illustration that shows how you can add bootstrap CDN to your document and use its features.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>Bootstrap CDN</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container text-center">
        <h1 class="display1 text-success">
            GeeksforGeeks
        </h1>
        <p class="lead">
            This page is styled using the Bootstrap only.<br/>
            All buttons and text uses Bootstrap classes for styling.
        </p>
        <button class="btn btn-success">
            Bootstrap CDN
        </button>
        <button class="btn btn-primary">
            GeeksforGeeks
        </button>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js">
    </script>
</body>
</html>