Live Updates
Initializing JARVIS Data Stream... Synchronizing Feeds...
Important

Anti-Fraud Alert: This portal does not charge any service fees from candidates. All services provided here are 100% Free of Cost. Please stay cautious of unauthorized individuals asking for money.

BASIC MONGODB

Bootstrap 5 – Complete Core Notes

📦 Bootstrap 5 – Complete Core Notes

Mobile-First UI Framework, 12-Column Responsive Grid System, Components, Forms aur Built-in Utilities ka comprehensive reference guide.

1️⃣ Bootstrap Kya Hai?

Definition: Bootstrap duniya ka sabse popular open-source front-end CSS framework hai jise Twitter ne develop kiya tha. Yeh responsive, mobile-first aur accessible web interfaces ko ready-made styling ke sath jaldi banane ke liye use hota hai.

Tailwind vs Bootstrap Concept: Tailwind CSS me raw utility classes (jaise flex, p-4) milti hain jinse custom design khud construct karna padta hai, jabki Bootstrap me ready-made components (jaise .btn, .card, .navbar) pehle se styled milte hain.
  • Mobile-First Design: Styles default roop se chhote mobile devices ke liye render hote hain aur media queries se bade monitors par expand hote hain.
  • Pre-Defined CSS Classes: Buttons, badges, modals aur navigation bars bina custom CSS likhe instantly add ho jaate hain.
  • Zero jQuery Dependency (Bootstrap 5): Modern Bootstrap 5 pure vanilla JavaScript par kaam karta hai, jisse page load speed fast hoti hai.

2️⃣ Bootstrap Core Features

  • 12-Column Responsive Grid: Complex responsive layouts banana bohot flexible banata hai.
  • Pre-Built UI Components: Cards, Carousels, Dropdowns, Tooltips, Alerts aur Modals ready-to-use milte hain.
  • Utility API: Spacing (m-3, p-2), Colors (text-primary, bg-light), aur Flexbox (d-flex, justify-content-between) classes built-in hoti hain.
  • Cross-Browser Compatibility: Chrome, Safari, Firefox, Edge aur mobile browsers me consistent look ensure karta hai.

3️⃣ Bootstrap Setup & Installation

🔹 Option 1: CDN Setup (Quickest)

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

<!-- JS Bundle (with Popper) before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

🔹 Option 2: NPM Installation (For React / Node / Webpack)

npm install bootstrap

4️⃣ 12-Column Grid System

Bootstrap layout ka hierarchy pattern strictly .container → .row → .col-* hota hai:

Breakpoint Class Infix Dimensions (Screen Width)
Extra Small .col- < 576px (Portrait Phones)
Small .col-sm- ≥ 576px (Landscape Phones)
Medium .col-md- ≥ 768px (Tablets / iPads)
Large .col-lg- ≥ 992px (Laptops / Small Desktops)
Extra Large .col-xl- ≥ 1200px (Large Desktops) 
<div class="container">
  <div class="row">
    <!-- Mobile: 100% width (12 cols), Desktop: 50% width (6 cols) -->
    <div class="col-12 col-md-6">Left Column Content</div>
    <div class="col-12 col-md-6">Right Column Content</div>
  </div>
</div>

5️⃣ Buttons & Interactive Variants

Variant Class Color Palette Semantic Meaning
.btn-primary Blue (#0d6efd) Primary call to action (Submit, Save, Next).
.btn-success Green (#198754) Positive confirmation (Success, Approved, Paid).
.btn-danger Red (#dc3545) Destructive action (Delete, Cancel, Reject).
.btn-warning Yellow (#ffc107) Attention needed (Alert, Warning).
Interactive Component Simulator
Active Code: <button class="btn btn-primary">Bootstrap Action Button</button>

6️⃣ Form Controls & Input Validation

<form class="p-3 border rounded">
  <div class="mb-3">
    <label class="form-label">Email Address</label>
    <input type="email" class="form-control" placeholder="name@example.com" required>
    <div class="form-text">Hum aapka email kisi ke sath share nahi karenge.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit Form</button>
</form>

7️⃣ Responsive Navigation Bar (Navbar)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BrandLogo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
      </ul>
    </div>
  </div>
</nav>

Latest Vacancies