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)