A popular front-end framework bootstrap helps developers create responsive and mobile-friendly websites quickly and efficiently.
One of the easiest and fastest ways to get started is Adding Bootstrap to your project using CDN (Content Delivery Network) links. Add Bootstrap in html is the easiest. Add Bootstrap in HTML.
This article will guide you through the process of integrating Bootstrap into your web project with detailed coding examples.
First let us know ,
What is Bootstrap?
It is a powerful, open-source framework developed by Twitter. A huge collection of CSS and JavaScript components that you can use to create a responsive, modern-looking website. It also comes with pre-defined classes for typography, forms, buttons, navigation, and other interface components, which makes things easier for developers to design a consistent and visually appealing web interface.
Now, Why Use CDN Links?
The clear answer to this question is speed. But apart from speed there are several other advantages that Using CDN links to add Bootstrap can give:
- Speed: CDN servers are optimized for delivering static assets quickly.
- Reliability: CDNs have multiple servers around the world, ensuring your files are served from a location close to your users.
- Reduced Load on Your Server: Serving Bootstrap files from a CDN offloads the bandwidth from your server.
- Caching: Since many users might already have Bootstrap files cached from the CDN, they won’t need to download them again, resulting in faster load times.
Adding Bootstrap to Your Project
To add Bootstrap to your project using CDN links, follow these steps:
- Create a Basic HTML Structure: Start by creating a basic HTML file where you will include the Bootstrap CDN links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap CDN Example</title>
<!-- Bootstrap CSS CDN Link -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->
<!-- Bootstrap JS, Popper.js, and jQuery CDN Links -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Now, if you run the above code it will give you a blank screen. As we have not added any content.
2. Add Bootstrap CSS:
Include the Bootstrap CSS link within the section of your HTML file.
<!-- Bootstrap CSS CDN Link -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
3. Add Bootstrap JS and Dependencies: Add the Bootstrap JavaScript, Popper.js, and jQuery links before the closing </body> tag.
<!-- Bootstrap JS, Popper.js, and jQuery CDN Links -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Let us see an example –
Example 1: Creating a Simple Responsive Layout
Let’s create a simple responsive layout using Bootstrap’s grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="p-3 bg-primary text-white">Column 1</div>
</div>
<div class="col-md-4">
<div class="p-3 bg-secondary text-white">Column 2</div>
</div>
<div class="col-md-4">
<div class="p-3 bg-success text-white">Column 3</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In the above example, we created a responsive layout with three columns. Where each column takes up one-third of the width on medium to larger screens and stacks vertically on smaller screens.
Example 2: Adding a Navigation Bar
Now, let’s add a responsive navigation bar using Bootstrap’s Navbar component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Above example we can see how a responsive navigation bar is created that collapses into a hamburger menu on smaller screens.
Example 3: Creating a Modal
Finally, let’s create a modal using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Bootstrap Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal Body -->
<div class="modal-body">
Modal body content goes here.
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Output:
In the above example, we created a modal that can be opened by clicking the “Open Modal” button. The modal includes a header, body, and footer, and can be closed by clicking the “Close” button or the “X” button in the header.
Note: in order to get the bootstrap links or make the website with bootstrap you can check out here
You can get Bootstrap CSS and JavaScript CDN links from the official Bootstrap website. Here is how you can find them:
- Visit the Bootstrap Website: Go to getbootstrap.com.
- Navigate to the Documentation: Click on the “Docs” link at the top of the page to go to the Bootstrap documentation.
- Find the Introduction Page: In the documentation, you will usually land on the “Introduction” page or you can click on “Getting Started” and then “Introduction.”
- Copy the CDN Links: On the “Introduction” page, you’ll find the CSS and JavaScript CDN links that you can copy and use in your projects.
Creating a Responsive Card Deck with Bootstrap
Start with the basic HTML structure and include the Bootstrap CSS and JavaScript CDN links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Card Deck Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<h2 class="text-center mb-4">Responsive Card Deck</h2>
<div class="card-deck">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 1">
<div class="card-body">
<h5 class="card-title">Card Title 1</h5>
<p class="card-text">This is a brief description of the first card's content. It gives a quick overview of the card's purpose.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Card Title 2</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content. This content is a little longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 3">
<div class="card-body">
<h5 class="card-title">Card Title 3</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 10 mins ago</small>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Explanation
- Container: A Bootstrap container (
<div class="container my-4">) is used to center the content and provide responsive padding. The classmy-4adds vertical margin. - Heading: The heading (
<h2 class="text-center mb-4">) is centered and has a bottom margin to space it from the content below. - Card Deck: The
card-deckclass is used to create a deck of cards that have equal height and spacing between them. - Card Structure: Each card includes an image (
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 1">), a card body with a title and text (<div class="card-body">), and a footer with metadata (<div class="card-footer">).
Conclusion
Adding Bootstrap to your project using CDN links is a quick and efficient way to enhance your website with responsive design and pre-styled components. By including the CSS and JavaScript files from Bootstrap’s CDN, you can take advantage of the framework’s powerful features without the need for a local setup. The examples provided in this article demonstrate how to create a responsive layout
Leave a Reply