Presented by Swapnil Meshram within the mentorship Devsync.

📌 Introduction

📝 Bootstrap is a powerful, open-source CSS framework developed by Twitter to create responsive, mobile-first websites quickly. When paired with HTML, it simplifies the design process by offering pre-designed components and utility classes.

📖 What is Bootstrap?

🧠 Bootstrap is a front-end framework that includes:

📦 Predefined CSS classes
🎛 Responsive grid system
🎨 UI components (buttons, cards, modals, etc.)

✅ Why Use Bootstrap?

🎯 Benefits:
- Rapid development
- Responsive layout by default
- Pre-built themes & components
- Extensive community support

💡 Setting Up Bootstrap in HTML

🔸 Method 1: CDN (Recommended for Beginners)

💻 Use inside <head> tag:

    htmlCopyEdit<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

🔽 Before</body> tag, add JS:

    htmlCopyEdit<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

🔸 Method 2: Download and Host Locally

🧰 Download Bootstrap files from:

https://getbootstrap.com

Then link it to the project directory.

💡 Example:

The folder structure will be as given below:

  bootstrap/
  ├── .git/
  ├── README.md
  ├── index.html
  └── signup.html

🔸 index.html:

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

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-4">

    <!-- Dropdown -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Select Language
    </button>
    <ul class="dropdown-menu">
      <li><button class="dropdown-item">English</button></li>
      <li><button class="dropdown-item">Hindi</button></li>
      <li><button class="dropdown-item">Marathi</button></li>
    </ul>

    <br><br>

    <!-- Navigation bar -->
    <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm mb-3"
        style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">

      <li class="nav-item">
        <a href="index.html" class="nav-link active rounded-5">Login</a>
      </li>
      <li class="nav-item">
        <a href="signup.html" class="nav-link rounded-5">Sign Up</a>
      </li>
    </ul>

    <!-- Login form -->
    <div class="card p-4">
      <h4 class="mb-3">Login</h4>
      <input type="text" class="form-control mb-2" placeholder="Username">
      <input type="password" class="form-control mb-2" placeholder="Password">
      <button class="btn btn-primary">Login</button>
    </div>

  </body>
  </html>

🔸signup.html:

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

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-4">

    <!-- Dropdown -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Select Language
    </button>
    <ul class="dropdown-menu">
      <li><button class="dropdown-item">English</button></li>
      <li><button class="dropdown-item">Hindi</button></li>
      <li><button class="dropdown-item">Marathi</button></li>
    </ul>

    <br><br>

    <!-- Navigation bar -->
    <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm mb-3"
        style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">

      <li class="nav-item">
        <a href="index.html" class="nav-link rounded-5">Login</a>
      </li>
      <li class="nav-item">
        <a href="signup.html" class="nav-link active rounded-5">Sign Up</a>
      </li>
    </ul>

    <!-- Sign Up form -->
    <div class="card p-4">
      <h4 class="mb-3">Sign Up</h4>
      <input type="text" class="form-control mb-2" placeholder="New Username">
      <input type="email" class="form-control mb-2" placeholder="Email">
      <input type="password" class="form-control mb-2" placeholder="Password">
      <button class="btn btn-success">Register</button>
    </div>

  </body>
  </html>

🔸Output:

Follow Devsync for more updates and focused learning!

Creating Form Using Bootstrap