Prev Next

BS5 Get Started

This section explains how to quickly set up Bootstrap 5 for your project, either via a CDN link or a local installation using npm.

Key Topics

CDN Installation

Using the CDN is the easiest way to get started with Bootstrap 5. Just add the following links to your HTML <head> and <body>:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap 5 JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Explanation: The .bundle file already includes Popper.js. You don't need any additional scripts as jQuery is not required for Bootstrap 5.

Installing via npm

If you prefer local files or use bundlers like Webpack or Parcel, install Bootstrap via npm:

npm install bootstrap@5.3.0

Explanation: After installing, you can import Bootstrap in your main CSS or JS. For example, @import "bootstrap/dist/css/bootstrap.min.css"; in a Sass/CSS file or import 'bootstrap/dist/js/bootstrap.bundle.min.js' in a JS file.

Setup Demo

Here is a brief demo page that uses CDN links to illustrate how quickly you can start building with BS5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Setup Demo</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Hello, Bootstrap 5!</h1>
        <p>This is a quick test of your setup.</p>
    </div>

    <!-- Bootstrap 5 JavaScript Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This simple HTML file demonstrates the minimal code you need to start using Bootstrap 5 classes and components.

Key Takeaways

  • Bootstrap 5 can be added via a simple CDN link or installed locally with npm.
  • No separate jQuery or Popper files are needed; the JS bundle includes everything required.
  • NPM installation is ideal for projects using bundlers or requiring offline support.
Prev Next