❮ Previous Next ❯

Bootstrap Setup

  • Learn how to properly install and configure Bootstrap in your project.

  • What Does “Bootstrap Setup” Mean ?

    Before we can use Bootstrap in any project, we must connect Bootstrap files to our HTML page.

    Bootstrap setup simply means:

    • Making Bootstrap’s CSS and JavaScript available to our project

    • So that we can use Bootstrap classes like container, row, btn, etc.

    There are two standard ways to set up Bootstrap:

    1. Setup via CDN

    2. Local installation of Bootstrap

    Both methods are widely used in real projects.

    Setup via CDN (Content Delivery Network)

    What is a CDN ?

    A CDN (Content Delivery Network) is a network of servers that host files and deliver them to users from the nearest location.

    In simple words:

    • Bootstrap files are stored on the internet

    • We directly link them using a URL

    • No need to download anything

  • Why Use CDN ?

    Using CDN has several advantages:

    • Faster loading (files are cached in browsers)

    • No need to manage Bootstrap files manually

    • Always easy to update

    • Best for beginners and small projects

    • Ideal for learning and demos

    Files Required When Using CDN

    To fully use Bootstrap, we generally include:

    1. Bootstrap CSS file

    2. Bootstrap JavaScript file (for components like modal, dropdown, etc.)

Bootstrap CDN Setup

Sets up Bootstrap using CDN links by including the CSS in the and the JS bundle before closing , allowing you to use Bootstrap classes directly in 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 Setup</title>

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

  <div class="container mt-5">
    <h1 class="text-primary">Hello Bootstrap</h1>
    <button class="btn btn-success">Click Me</button>
  </div>

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

</body>
</html>

  • Understanding the Code

    Bootstrap CSS Link

    <link href="...bootstrap.min.css" rel="stylesheet">

    • Loads Bootstrap’s styling

    • Enables grid system, colors, spacing, typography

    • Must be placed inside the <head> tag

    Bootstrap JS Script

    <script src="...bootstrap.bundle.min.js"></script>

    • Enables interactive components

    • Includes Popper (required for dropdowns, tooltips)

    • Placed before closing </body> tag

    When CDN is the Best Choice

    Use CDN when:

    • You are learning Bootstrap

    • You are creating small or demo projects

    • You want quick setup

    • Internet connection is available

  • Local Installation of Bootstrap

    What is Local Installation ?

    Local installation means:

    • Downloading Bootstrap files

    • Storing them inside your project folder

    • Linking those files locally in HTML

  • This method does not depend on the internet once files are downloaded.

    Why Use Local Installation ?

    Local installation is preferred when:

    • Internet access is limited

    • Working on large or enterprise projects

    • Customizing Bootstrap files

    • Full control over assets is required

    • Working in offline environments

  • Steps to Install Bootstrap Locally

    Step 1: Download Bootstrap

    Go to the official website:
    https://getbootstrap.com/

    • Click on Download

    • Choose compiled CSS and JS

    • Download the ZIP file

    Step 2: Extract Files

    After extraction, you will see folders like:

    • css

    • js

    Step 3: Project Folder Structure

    A common project structure looks like this:

    project-folder/

    │

    ├── index.html

    │

    ├── css/

    │   └── bootstrap.min.css

    │

    └── js/

        └── bootstrap.bundle.min.js

Linking Local Bootstrap Files

Demonstrates how to link locally downloaded Bootstrap CSS and JS files inside your project instead of using a CDN. 

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

  <!-- Bootstrap CSS (Local File) -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

  <div class="container mt-5">
    <h1 class="text-danger">Bootstrap Local Setup</h1>
    <button class="btn btn-primary">Submit</button>
  </div>

  <!-- Bootstrap JS Bundle (Local File) -->
  <script src="js/bootstrap.bundle.min.js"></script>

</body>
</html>

  • Important Notes About Local Setup

    • File paths must be correct

    • Folder names must match exactly

    • JavaScript file is optional if you don’t use interactive components

    • Always load CSS before JS

      CDN vs Local Installation (Detailed Comparison)

      FeatureCDN SetupLocal Setup
      Internet requiredYesNo (after download)
      Setup speedVery fastSlower
      File controlLimitedFull control
      CustomizationLess flexibleHighly flexible
      PerformanceFast (cached)Depends on server
      Best forLearning, small projectsLarge, professional projects

      Common Beginner Mistakes

      1. Forgetting to include Bootstrap CSS

      2. Including JS before CSS

      3. Wrong file paths in local setup

      4. Mixing different Bootstrap versions

      5. Using Bootstrap classes without setup

    ❮ Previous Next ❯