Bootstrap Get Started (CDN)
The fastest way to start using Bootstrap is to link to its files hosted on a CDN (Content Delivery Network). This means you don't need to download or install anything — you just add a couple of lines to your HTML file's head and body.
A CDN link loads the Bootstrap CSS and JavaScript files from fast servers around the world, which usually makes your page load quicker than hosting the files yourself, especially for beginners just experimenting.
<link href="...bootstrap.min.css" rel="stylesheet">
<script src="...bootstrap.bundle.min.js"></script>Adding the CSS
Place the Bootstrap CSS <link> tag inside your <head> element so the styles are available before the page renders.
Adding the JavaScript
Place the Bootstrap JS bundle <script> tag near the end of your <body>, right before the closing </body> tag, so components like dropdowns and modals work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>My First Bootstrap Page</title>
</head>
<body>
<h1 class="text-center">Welcome to Bootstrap</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>A centered heading: Welcome to BootstrapThis is a minimal, complete Bootstrap starter page including the viewport meta tag needed for responsiveness.
<p class="lead">This paragraph uses Bootstrap's lead style.</p>A larger, lighter-weight paragraphOnce the CSS is linked, any element can use Bootstrap classes like lead.
Key points
- The CDN method needs no downloads or installation.
- Always include the viewport meta tag for responsive behavior.
- Put the CSS link in <head> and the JS script before </body>.
- Bootstrap's JS bundle includes Popper.js for tooltips and dropdowns.