Episode 2 of 28

How to Use Bootstrap in Your Project

Learn how to include Bootstrap in your project using CDN or local files.

There are several ways to include Bootstrap in your web project. Let's explore each method.

Method 1: CDN (Quickest Way)

Add these links to your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Demo</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

    <h1 class="text-center">Hello Bootstrap!</h1>

    <!-- jQuery (required for Bootstrap JS) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Method 2: Download Locally

  1. Visit getbootstrap.com
  2. Download the compiled CSS and JS files
  3. Extract and add them to your project folder
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Method 3: npm

npm install bootstrap

The Viewport Meta Tag

This is essential for responsive design:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without it, Bootstrap's responsive features won't work properly on mobile devices.

Important Notes

  • Always include jQuery before Bootstrap JS — Bootstrap depends on it
  • Use the minified versions (.min.css, .min.js) for production
  • Always include the viewport meta tag