DEV Community

Cover image for Bootstrap
Swapnil Meshram
Swapnil Meshram

Posted on • Edited on

Bootstrap

#webdev #bootstrap #devsync

Presented by Swapnil Meshram within mentorship within @devsyncin

📌 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.)

📲 Mobile-first design philosophy

💡 Bootstrap works best with basic knowledge of HTML and CSS.

🔸 Method 1: CDN (Recommended for Beginners)


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

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

🔸 Method 2: Download and Host Locally

🧰 Download Bootstrap files from:

getbootstrap

Then link them in the project directory.

🏗 Basic HTML Structure with Bootstrap


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="text-center text-primary">Welcome to Bootstrap</h1>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

📦 Bootstrap Grid System

📖 12-column grid for responsive layout

💡 Use classes like container, row, and col.

💻 Example:


<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

🧪 Try resizing the window to see the responsive behaviour.

🧩 Common Bootstrap Components

🔘 Buttons


<button class="btn btn-primary">Click Me</button>
<button class="btn btn-danger">Delete</button>
Enter fullscreen mode Exit fullscreen mode

📦 Cards


<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some text here.</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

📑 Forms


<form>
  <input type="text" class="form-control" placeholder="Enter Name">
  <button class="btn btn-success mt-2">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

🧰 Advanced Components

📦 Navbar


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Site</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

🔲 Modal


<!-- Trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Launch Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
      </div>
      <div class="modal-body">This is a modal!</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

🧭 Bootstrap Icons

💻 Add this in

to use icons:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
Enter fullscreen mode Exit fullscreen mode

Then use:


<i class="bi bi-house-door"></i>
Enter fullscreen mode Exit fullscreen mode

🧪 Advanced Layout Techniques

🔸 Responsive Embeds


<div class="ratio ratio-16x9">
  <iframe src="..." title="YouTube video"></iframe>
</div>
Enter fullscreen mode Exit fullscreen mode

🔸 Sticky Header


<nav class="navbar sticky-top navbar-light bg-light">Sticky!</nav>
Enter fullscreen mode Exit fullscreen mode

⚙️ Utilities & Helper Classes

🧠 Bootstrap provides utility classes for:

✅ Spacing → m-3, p-2

✅ Colors → text-danger, bg-warning

✅ Text alignment → text-center, text-end

✅ Display → d-none, d-block

🧪 Try combining multiple classes to customise layout easily.

📢 Responsive Design with Breakpoints

🎯 Bootstrap breakpoints:


sm – small devices

md – medium devices

lg – large

xl – extra large
Enter fullscreen mode Exit fullscreen mode

🔄 Bootstrap Layout Classes


container vs container-fluid

Flex layout → d-flex, justify-content-center

Grid nesting → use .row inside columns
Enter fullscreen mode Exit fullscreen mode

Top comments (0)