September 12, 2026

 

अगर आप HTML और CSS के बाद Bootstrap 4 सीख रहे हैं, तो इसके important components को practically समझना बहुत जरूरी है। Bootstrap 4 के Spinner, Pagination, List Group, Card, Dropdown, Collapse और Navbar components लगभग हर modern website या web application में इस्तेमाल किए जा सकते हैं।

इन components का इस्तेमाल अलग-अलग situations में होता है। उदाहरण के लिए, website का data load होने तक Spinner, multiple pages के बीच जाने के लिए Pagination, menu या list दिखाने के लिए List Group, products या services दिखाने के लिए Card, options का menu बनाने के लिए Dropdown, content को show/hide करने के लिए Collapse और website का main navigation बनाने के लिए Navbar का इस्तेमाल किया जाता है।

इस tutorial में हम इन सभी components को आसान Hindi + English explanation, HTML examples और real-time examples के साथ समझेंगे।

---

1. Bootstrap 4 Spinner

जब website पर कोई data load हो रहा हो या कोई process चल रही हो, तब user को loading indicator दिखाना useful होता है।

Bootstrap 4 में loading indicator के लिए Spinner component available है।

Simple language में:

Spinner = Loading Indicator

इसका इस्तेमाल इन situations में किया जा सकता है:

• Page loading

• AJAX request

• File upload

• Data processing

• API response का इंतजार

• Login processing

Basic Spinner

<div class="spinner-border">
</div>

यह एक rotating spinner दिखाएगा।

Colored Spinner

Bootstrap spinner में contextual colors भी इस्तेमाल किए जा सकते हैं।

<div class="spinner-border text-primary">
</div>

<div class="spinner-border text-success">
</div>

<div class="spinner-border text-danger">
</div>

<div class="spinner-border text-warning">
</div>

Small Spinner

अगर आपको छोटा spinner चाहिए:

<div class="spinner-border spinner-border-sm">
</div>

Real-Time Example: Loading Button

मान लीजिए user ने login button पर click किया और server response आने में कुछ समय लग रहा है।

<button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm">
    </span>

    Loading...
</button>

इससे user को पता चलता है कि process चल रही है और website hang नहीं हुई है।

---

2. Bootstrap 4 Pagination

अगर किसी website पर बहुत ज्यादा content है, तो पूरा content एक ही page पर दिखाना अच्छा तरीका नहीं होता।

ऐसे में content को multiple pages में divide किया जाता है। इन pages के बीच navigation के लिए Pagination इस्तेमाल होती है।

उदाहरण:

Previous | 1 | 2 | 3 | 4 | Next

Basic Pagination

<nav>
    <ul class="pagination">

        <li class="page-item">
            <a class="page-link" href="#">
                Previous
            </a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">
                1
            </a>
        </li>

        <li class="page-item active">
            <a class="page-link" href="#">
                2
            </a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">
                3
            </a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">
                Next
            </a>
        </li>

    </ul>
</nav>

यहाँ active class current page को highlight करती है।

Real-Time Example: Blog Website

मान लीजिए आपकी website पर 100 blog posts हैं।

आप एक page पर सिर्फ 10 posts दिखाते हैं:

Page 1 → Posts 1-10
Page 2 → Posts 11-20
Page 3 → Posts 21-30

Pagination user को इन pages के बीच आसानी से navigate करने देती है।

---

3. Bootstrap 4 List Group

List Group का इस्तेमाल related items को एक organized list के रूप में दिखाने के लिए किया जाता है।

इसका इस्तेमाल हो सकता है:

• Menu

• Categories

• Notifications

• User list

• Course list

• Settings

• Messages

Basic List Group

<ul class="list-group">

    <li class="list-group-item">
        HTML
    </li>

    <li class="list-group-item">
        CSS
    </li>

    <li class="list-group-item">
        Bootstrap
    </li>

    <li class="list-group-item">
        JavaScript
    </li>

</ul>

यह एक clean vertical list बनाएगा।

Active List Item

<li class="list-group-item active">
    Bootstrap
</li>

active class selected item को highlight करती है।

List Group with Links

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">
        Home
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        About
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        Contact
    </a>

</div>

Real-Time Example: Course Categories

Online learning website पर:

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">
        Web Development
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        Digital Marketing
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        Graphic Design
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        SEO
    </a>

</div>

इसका इस्तेमाल sidebar में course categories दिखाने के लिए किया जा सकता है।

---

4. Bootstrap 4 Card

Card Bootstrap का सबसे useful components में से एक है।

Card का इस्तेमाल किसी content को एक separate box में दिखाने के लिए किया जाता है।

Cards का इस्तेमाल बहुत जगह होता है:

• Products

• Services

• Blog posts

• Team members

• Courses

• Portfolio projects

• News articles

Basic Card

<div class="card">

    <div class="card-body">

        <h5 class="card-title">
            Web Development
        </h5>

        <p class="card-text">
            Learn HTML, CSS, Bootstrap and JavaScript.
        </p>

        <a href="#" class="btn btn-primary">
            Learn More
        </a>

    </div>

</div>

Card with Image

<div class="card">

    <img src="course.jpg"
         class="card-img-top"
         alt="Web Development">

    <div class="card-body">

        <h5 class="card-title">
            Web Development Course
        </h5>

        <p class="card-text">
            Learn web development from beginner
            to advanced level.
        </p>

        <a href="#" class="btn btn-primary">
            Enroll Now
        </a>

    </div>

</div>

Real-Time Example: Service Cards

Business website में तीन services को cards के रूप में दिखाया जा सकता है:

<div class="row">

    <div class="col-md-4">

        <div class="card">
            <div class="card-body">

                <h5 class="card-title">
                    Website Design
                </h5>

                <p class="card-text">
                    Responsive and modern websites
                    for businesses.
                </p>

                <a href="#" class="btn btn-primary">
                    View Service
                </a>

            </div>
        </div>

    </div>

    <div class="col-md-4">

        <div class="card">
            <div class="card-body">

                <h5 class="card-title">
                    SEO
                </h5>

                <p class="card-text">
                    Improve your website visibility
                    on search engines.
                </p>

                <a href="#" class="btn btn-primary">
                    View Service
                </a>

            </div>
        </div>

    </div>

    <div class="col-md-4">

        <div class="card">
            <div class="card-body">

                <h5 class="card-title">
                    Digital Marketing
                </h5>

                <p class="card-text">
                    Grow your business through
                    digital marketing.
                </p>

                <a href="#" class="btn btn-primary">
                    View Service
                </a>

            </div>
        </div>

    </div>

</div>

यह business websites के लिए एक practical card layout है।

---

5. Bootstrap 4 Dropdown

Dropdown का इस्तेमाल multiple options को एक छोटे menu में दिखाने के लिए किया जाता है।

उदाहरण:

Services ▼
   Website Design
   SEO
   Google Ads
   Social Media

Basic Dropdown

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle"
            data-toggle="dropdown">

        Services

    </button>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">
            Website Design
        </a>

        <a class="dropdown-item" href="#">
            SEO
        </a>

        <a class="dropdown-item" href="#">
            Google Ads
        </a>

    </div>

</div>

dropdown-toggle button में dropdown arrow दिखाता है।

dropdown-menu options का container है।

dropdown-item individual option है।

Real-Time Example

Business website में Services menu:

Services
   ↓
Website Development
SEO
Google Ads
Graphic Design
Social Media Marketing

Dropdown की मदद से navigation को compact रखा जा सकता है।

---

6. Bootstrap 4 Collapse

Collapse का इस्तेमाल content को show और hide करने के लिए किया जाता है।

यह FAQ sections, mobile menus, additional information और expandable content में बहुत useful है।

Basic Collapse

<button class="btn btn-primary"
        data-toggle="collapse"
        data-target="#demo">

    Read More

</button>

<div id="demo" class="collapse mt-3">

    <p>
        Bootstrap is a powerful front-end framework
        for creating responsive websites.
    </p>

</div>

जब user Read More button पर click करेगा, तो content दिखाई देगा।

दोबारा click करने पर content hide हो जाएगा।

---

Real-Time Example: FAQ Section

Website पर Frequently Asked Questions के लिए Collapse बहुत useful है।

<p>
    <button class="btn btn-link"
            data-toggle="collapse"
            data-target="#faq1">

        What is Bootstrap?

    </button>
</p>

<div id="faq1" class="collapse">

    <div class="card card-body">

        Bootstrap is a front-end framework
        used to create responsive websites.

    </div>

</div>

इससे FAQ page clean और organized दिखाई देता है।

---

7. Bootstrap 4 Navbar

Navbar website का navigation menu होता है।

हर professional website में navigation बहुत important है।

Typical navbar:

Logo | Home | About | Services | Blog | Contact

Bootstrap 4 Navbar responsive navigation बनाने के लिए बहुत useful है।

Basic Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <a class="navbar-brand" href="#">
        My Website
    </a>

    <button class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarMenu">

        <span class="navbar-toggler-icon">
        </span>

    </button>

    <div class="collapse navbar-collapse"
         id="navbarMenu">

        <ul class="navbar-nav ml-auto">

            <li class="nav-item">
                <a class="nav-link" href="#">
                    Home
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">
                    About
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">
                    Services
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">
                    Blog
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">
                    Contact
                </a>
            </li>

        </ul>

    </div>

</nav>

यहाँ:

• navbar → navbar की basic styling

• navbar-expand-lg → large screens पर expanded navbar

• navbar-dark → dark background के लिए suitable text styling

• bg-dark → dark background

• navbar-brand → logo या website name

• navbar-toggler → mobile menu button

• navbar-collapse → collapsible menu

• navbar-nav → navigation list

• nav-item → individual menu item

• nav-link → navigation link

• ml-auto → menu को right side में push करता है

---

Navbar with Dropdown

Navbar में dropdown भी add किया जा सकता है।

<li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle"
       href="#"
       data-toggle="dropdown">

        Services

    </a>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">
            Website Design
        </a>

        <a class="dropdown-item" href="#">
            SEO
        </a>

        <a class="dropdown-item" href="#">
            Digital Marketing
        </a>

    </div>

</li>

इस तरह एक ही navbar में multiple service categories रख सकते हैं।

---

Real-Time Website Example

मान लीजिए हम एक digital marketing company की website बना रहे हैं।

Navbar:

Logo | Home | About | Services ▼ | Blog | Contact

Services dropdown:

Website Development
SEO
Google Ads
Social Media Marketing
Graphic Design

Homepage पर cards:

| Website Design |
| SEO            |
| Google Ads     |

अगर कोई process चल रही है, तो spinner:

Loading...

अगर website पर multiple blog pages हैं, तो pagination:

Previous | 1 | 2 | 3 | Next

FAQ section में collapse:

What is SEO?
      ↓
Answer

इस तरह Bootstrap के अलग-अलग components को combine करके एक complete professional website interface बनाया जा सकता है।

---

Bootstrap 4 Components Quick Revision

Component	Main Bootstrap Class
Spinner	spinner-border
Small Spinner	spinner-border-sm
Pagination	pagination
Pagination Item	page-item
Page Link	page-link
List Group	list-group
List Item	list-group-item
Card	card
Card Content	card-body
Card Image	card-img-top
Dropdown	dropdown
Dropdown Menu	dropdown-menu
Dropdown Item	dropdown-item
Collapse	collapse
Navbar	navbar
Navbar Brand	navbar-brand
Navbar Link	nav-link

---

Conclusion

Bootstrap 4 के Spinner, Pagination, List Group, Card, Dropdown, Collapse और Navbar components website development में बहुत important हैं।

Spinner user को loading या processing status दिखाता है। Pagination large amount of content को multiple pages में organize करने में मदद करती है। List Group related items को clean list के रूप में दिखाने के लिए useful है।

Card का इस्तेमाल products, services, courses, blogs और team members को attractive boxes में display करने के लिए किया जाता है। Dropdown multiple options को compact menu में दिखाता है। Collapse content को show और hide करने की सुविधा देता है, जो FAQ और expandable sections के लिए बहुत useful है।

वहीं Navbar website के navigation system का मुख्य हिस्सा है। Navbar की मदद से users आसानी से Home, About, Services, Blog और Contact जैसे different pages पर जा सकते हैं।

Bootstrap 4 सीखने का सबसे अच्छा तरीका है कि इन components को अलग-अलग याद करने के बजाय एक real project में combine करके practice करें। उदाहरण के लिए आप एक Business Website, School Management System, Blog Website, E-commerce Website या Admin Dashboard बना सकते हैं।

एक simple Bootstrap website का structure कुछ इस तरह हो सकता है:

Navbar
   ↓
Jumbotron / Hero Section
   ↓
Alerts
   ↓
Cards
   ↓
List Groups
   ↓
Dropdown Menus
   ↓
Collapse / FAQ
   ↓
Progress / Loading
   ↓
Pagination
   ↓
Footer

जब आप इन Bootstrap 4 components को अच्छी तरह समझ लेते हैं, तो responsive और professional website interface बनाना काफी आसान हो जाता है।

याद रखें: Bootstrap का उद्देश्य development को faster, responsive और consistent बनाना है। Ready-made classes और components का सही इस्तेमाल करके आप कम समय में clean और user-friendly web interfaces तैयार कर सकते हैं।