ePortfolio: Bootstrap 5 | Prasun Parajuli

🅱️ 4. Bootstrap Framework — Rapid, Responsive Front-End

Bootstrap is the world’s most popular front-end open-source library. It provides pre-built CSS classes and JavaScript components for building mobile-first, responsive websites. This section demonstrates key Bootstrap 5 features: grid system, components, utilities, and interactivity.

📐 Grid System (12 columns + responsive breakpoints)

.col-md-4 .col-sm-6

.col-md-4 .col-sm-12

.col-lg-3

✨ Resize browser to see columns stack on tablet and mobile — fully responsive grid.

🔘 Buttons & Variants

Button group example

🚨 Alerts & Dismissibles

📘 Primary alert with dismiss button → Try the X!

✅ Success! Bootstrap components integrate seamlessly.

⚠️ Warning: responsive utility classes make development fast.

🃏 Bootstrap Cards — Flexible Content Containers

🖥️ Front-End

HTML, CSS, Bootstrap

Build responsive interfaces rapidly with Bootstrap components.

Learn more →

⚙️ Back-End Ready

Node.js / PHP

Bootstrap works with any back-end technology, just style the front end.

Explore

📱 Fully Responsive

Mobile-first design

Built-in grid, flex utilities, and responsive classes for any device.

Details

🧭 Responsive Navbar (collapse + dropdown)

🪟 Modal Dialog

Modals are built with Bootstrap JS — great for dialogs, forms, or confirmations.

📋 Form Controls & Input Groups

📊 Progress, Badges & Spinners

78% Complete

45%

HTML CSS Bootstrap JavaScript In Progress Full Stack

🔧 Bootstrap Utility Classes

.p-3 .bg-light .border .rounded .shadow-sm

Responsive text alignment (center on mobile, start on md, end on lg)

.p-2

.p-3

.p-4

mt-*, mb-*, ps-*, opacity, overflow — Bootstrap provides extensive spacing & visibility utilities.

💡 Bootstrap accelerates full stack development by providing a consistent, accessible, and responsive UI framework. Mastery of Bootstrap allows developers to prototype quickly and deliver production-ready front-ends.

⬆ Back to top