September 12, 2026

 

Bootstrap 4 एक popular front-end CSS framework है, जिसका इस्तेमाल responsive और professional websites बनाने के लिए किया जाता है। Bootstrap में कई ready-made components दिए गए हैं, जिनकी मदद से developers कम CSS लिखकर attractive website interface तैयार कर सकते हैं।

अगर आप Bootstrap 4 सीख रहे हैं, तो Jumbotron, Alerts, Buttons, Button Groups, Badges और Progress Bars जैसे components को समझना बहुत जरूरी है। इनका इस्तेमाल business websites, school websites, dashboards, e-commerce websites, portfolios और web applications में अक्सर किया जाता है।

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

इस tutorial में हम सीखेंगे:

• Bootstrap 4 Jumbotron

• Bootstrap 4 Alerts

• Bootstrap 4 Buttons

• Bootstrap 4 Button Groups

• Bootstrap 4 Badges

• Bootstrap 4 Progress Bar

• Real-time practical examples

आइए एक-एक करके समझते हैं।

---

1. Bootstrap 4 Jumbotron

Jumbotron Bootstrap 4 का एक बड़ा content section होता है, जिसका इस्तेमाल किसी important heading, announcement या introductory message को prominently दिखाने के लिए किया जाता है।

Simple language में समझें तो Jumbotron website का एक large highlighted section है।

उदाहरण के लिए:

• Homepage introduction

• Product launch

• Special offer

• Course announcement

• Business promotion

• Important information

के लिए Jumbotron इस्तेमाल किया जा सकता है।

Basic Jumbotron

<div class="jumbotron">
    <h1 class="display-4">
        Welcome to Our Website
    </h1>

    <p class="lead">
        Learn web development with practical examples.
    </p>

    <hr class="my-4">

    <p>
        Start learning HTML, CSS, Bootstrap and JavaScript.
    </p>

    <a class="btn btn-primary btn-lg" href="#">
        Start Learning
    </a>
</div>

यहाँ:

• jumbotron → बड़ा highlighted section बनाता है।

• display-4 → बड़ा heading बनाता है।

• lead → introductory paragraph को highlight करता है।

• my-4 → vertical margin देता है।

• btn btn-primary → Bootstrap button बनाता है।

• btn-lg → button को बड़ा करता है।

---

Real-Time Example: Coaching Website

मान लीजिए आप एक coaching institute की website बना रहे हैं।

<div class="jumbotron">
    <h1 class="display-4">
        Learn Web Development
    </h1>

    <p class="lead">
        Join our practical web development course.
    </p>

    <p>
        Learn HTML, CSS, Bootstrap and JavaScript
        from beginner to advanced level.
    </p>

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

इसका उपयोग homepage पर visitors का attention आकर्षित करने के लिए किया जा सकता है।

---

2. Bootstrap 4 Alerts

Alert का इस्तेमाल website पर users को important information, warning, success message या error message दिखाने के लिए किया जाता है।

Real-world websites में alerts का इस्तेमाल बहुत common है।

उदाहरण:

• Login successful

• Payment successful

• Invalid password

• Registration completed

• Warning message

• Information message

Bootstrap में basic alert बनाने के लिए .alert class और color class का इस्तेमाल किया जाता है।

Basic Alert

<div class="alert alert-primary">
    This is a primary alert.
</div>

Bootstrap में commonly used alert classes:

alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark

Success Alert

<div class="alert alert-success">
    Registration completed successfully!
</div>

Error Alert

<div class="alert alert-danger">
    Invalid username or password.
</div>

Warning Alert

<div class="alert alert-warning">
    Please complete all required fields.
</div>

Information Alert

<div class="alert alert-info">
    Your profile is under review.
</div>

---

Alert with Heading

आप alert के अंदर heading भी add कर सकते हैं।

<div class="alert alert-success">

    <h4 class="alert-heading">
        Congratulations!
    </h4>

    <p>
        Your registration has been completed successfully.
    </p>

</div>

यह बड़े messages के लिए useful है।

---

Dismissible Alert

Bootstrap 4 में user alert को close भी कर सकता है।

<div class="alert alert-warning alert-dismissible fade show">

    <strong>Warning!</strong>
    Please update your profile.

    <button type="button"
            class="close"
            data-dismiss="alert">
        <span>&times;</span>
    </button>

</div>

यह dashboard और web applications में काफी useful है।

---

3. Bootstrap 4 Buttons

Buttons website का बहुत important component हैं। Buttons की मदद से users actions perform करते हैं।

Examples:

• Login

• Register

• Buy Now

• Submit

• Download

• Contact Us

• Read More

Bootstrap में basic button बनाने के लिए:

<button class="btn btn-primary">
    Click Here
</button>

Bootstrap में कई button color classes उपलब्ध हैं:

btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link

Examples

<button class="btn btn-primary">
    Primary
</button>

<button class="btn btn-success">
    Success
</button>

<button class="btn btn-danger">
    Delete
</button>

<button class="btn btn-warning">
    Warning
</button>

<button class="btn btn-info">
    Information
</button>

---

Button Sizes

Bootstrap में button की size भी change कर सकते हैं।

Large Button

<button class="btn btn-primary btn-lg">
    Large Button
</button>

Small Button

<button class="btn btn-primary btn-sm">
    Small Button
</button>

Normal Button

<button class="btn btn-primary">
    Normal Button
</button>

---

Outline Buttons

अगर आपको button में सिर्फ border और text चाहिए और solid background नहीं चाहिए, तो outline classes का इस्तेमाल करें।

<button class="btn btn-outline-primary">
    Learn More
</button>

<button class="btn btn-outline-success">
    Save
</button>

<button class="btn btn-outline-danger">
    Delete
</button>

यह modern websites में काफी useful design pattern है।

---

Real-Time Example: E-commerce Website

मान लीजिए product page है:

<h3>Wireless Headphones</h3>

<p>
    Price: ₹1,999
</p>

<button class="btn btn-primary">
    Buy Now
</button>

<button class="btn btn-outline-success">
    Add to Cart
</button>

यहाँ user के लिए दो clear actions दिए गए हैं।

---

4. Bootstrap 4 Button Group

कई बार हमें related buttons को एक साथ group करके दिखाना होता है। ऐसे cases में Bootstrap का Button Group इस्तेमाल किया जाता है।

Basic syntax:

<div class="btn-group">

    <button class="btn btn-primary">
        Left
    </button>

    <button class="btn btn-primary">
        Middle
    </button>

    <button class="btn btn-primary">
        Right
    </button>

</div>

इससे buttons एक connected group की तरह दिखाई देंगे।

---

Real-Time Example: Text Editor

मान लीजिए आप एक simple text editor बना रहे हैं:

<div class="btn-group">

    <button class="btn btn-secondary">
        Bold
    </button>

    <button class="btn btn-secondary">
        Italic
    </button>

    <button class="btn btn-secondary">
        Underline
    </button>

</div>

इसका इस्तेमाल formatting toolbar में किया जा सकता है।

---

Button Group with Different Actions

<div class="btn-group">

    <button class="btn btn-success">
        Approve
    </button>

    <button class="btn btn-warning">
        Pending
    </button>

    <button class="btn btn-danger">
        Reject
    </button>

</div>

यह admin dashboard या approval system में useful हो सकता है।

---

5. Bootstrap 4 Badges

Badge एक छोटा label या indicator होता है, जिसका इस्तेमाल किसी item की status, category, count या notification दिखाने के लिए किया जाता है।

Examples:

• New

• Sale

• Hot

• Active

• Pending

• 5 Notifications

• 10 Messages

Basic Badge

<span class="badge badge-primary">
    New
</span>

Other Bootstrap badge classes:

badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light
badge-dark

Examples

<span class="badge badge-success">
    Active
</span>

<span class="badge badge-danger">
    Failed
</span>

<span class="badge badge-warning">
    Pending
</span>

<span class="badge badge-info">
    New
</span>

---

Badge inside Button

Badge को button के अंदर भी use कर सकते हैं।

<button class="btn btn-primary">

    Notifications

    <span class="badge badge-light">
        5
    </span>

</button>

इसका मतलब user को 5 notifications मिली हैं।

---

Real-Time Example: E-commerce Product

<h3>
    Smartphone

    <span class="badge badge-success">
        New
    </span>
</h3>

Sale product:

<h3>
    Laptop

    <span class="badge badge-danger">
        SALE
    </span>
</h3>

इस तरह badges product की important information तुरंत दिखाने में मदद करते हैं।

---

6. Bootstrap 4 Progress Bar

Progress Bar का इस्तेमाल किसी process की completion percentage दिखाने के लिए किया जाता है।

Real-world examples:

• File upload

• Course completion

• Profile completion

• Project progress

• Skill level

• Installation progress

• Download progress

Basic Progress Bar

<div class="progress">

    <div class="progress-bar"
         role="progressbar"
         style="width: 50%;">

        50%

    </div>

</div>

यह 50% completed progress दिखाएगा।

---

Different Progress Values

25%

<div class="progress">

    <div class="progress-bar"
         style="width: 25%;">

        25%

    </div>

</div>

75%

<div class="progress">

    <div class="progress-bar"
         style="width: 75%;">

        75%

    </div>

</div>

100%

<div class="progress">

    <div class="progress-bar"
         style="width: 100%;">

        100%

    </div>

</div>

---

Colored Progress Bar

Bootstrap progress bar में contextual colors भी इस्तेमाल कर सकते हैं।

<div class="progress">

    <div class="progress-bar bg-success"
         style="width: 80%;">

        80%

    </div>

</div>

Warning:

<div class="progress">

    <div class="progress-bar bg-warning"
         style="width: 60%;">

        60%

    </div>

</div>

Danger:

<div class="progress">

    <div class="progress-bar bg-danger"
         style="width: 30%;">

        30%

    </div>

</div>

---

Real-Time Example: Student Course Progress

मान लीजिए एक online learning website है और student ने course का 70% complete कर लिया है।

<h5>
    Web Development Course
</h5>

<div class="progress">

    <div class="progress-bar bg-success"
         role="progressbar"
         style="width: 70%;">

        70% Completed

    </div>

</div>

यह student को visually बताता है कि उसने course का कितना हिस्सा complete कर लिया है।

---

Combined Real-Time Example

अब इन सभी Bootstrap components को एक छोटे business website section में combine करते हैं।

<div class="container">

    <div class="jumbotron">

        <h1 class="display-4">
            Learn Web Development
        </h1>

        <p class="lead">
            Learn practical web development skills.
        </p>

        <button class="btn btn-primary btn-lg">
            Start Course
        </button>

    </div>


    <div class="alert alert-success">

        <strong>Success!</strong>
        Your course registration is completed.

    </div>


    <h3>
        Course Status

        <span class="badge badge-success">
            Active
        </span>
    </h3>


    <div class="progress mb-3">

        <div class="progress-bar bg-success"
             style="width: 65%;">

            65% Completed

        </div>

    </div>


    <div class="btn-group">

        <button class="btn btn-primary">
            Continue
        </button>

        <button class="btn btn-secondary">
            View Details
        </button>

        <button class="btn btn-danger">
            Exit
        </button>

    </div>

</div>

इस example में हमने एक साथ इस्तेमाल किया:

• Jumbotron

• Alert

• Button

• Button Group

• Badge

• Progress Bar

• Container

• Bootstrap utility classes

यही Bootstrap की ताकत है। अलग-अलग ready-made classes को combine करके आप जल्दी से professional UI बना सकते हैं।

---

Bootstrap 4 Components Quick Revision

Component	Main Class
Jumbotron	jumbotron
Alert	alert alert-success
Button	btn btn-primary
Large Button	btn-lg
Small Button	btn-sm
Outline Button	btn-outline-primary
Button Group	btn-group
Badge	badge badge-primary
Progress Bar	progress, progress-bar

---

Conclusion

Bootstrap 4 के Jumbotron, Alerts, Buttons, Button Groups, Badges और Progress Bars website interface को ज्यादा attractive, organized और user-friendly बनाने में मदद करते हैं।

Jumbotron का इस्तेमाल बड़े introductory या promotional sections के लिए किया जाता है। Alerts important messages और notifications दिखाने के लिए useful हैं। Buttons user actions जैसे Login, Submit, Buy Now और Contact के लिए इस्तेमाल होते हैं।

जब multiple related actions को एक साथ दिखाना हो, तब Button Group बहुत useful होता है। Badges छोटे labels, status और notification counts दिखाने के लिए इस्तेमाल किए जाते हैं। वहीं Progress Bar किसी task, course, upload या project की completion percentage visually दिखाता है।

अगर आप Bootstrap 4 सीख रहे हैं, तो इन components को सिर्फ theory में न पढ़ें। इन्हें एक real project में इस्तेमाल करके practice करें। उदाहरण के लिए आप एक School Management System, Coaching Website, Business Website, E-commerce Website या Student Dashboard बना सकते हैं।

Bootstrap 4 की इन classes को अच्छी तरह समझ लेने के बाद आप इसके दूसरे important components जैसे Navbar, Cards, Forms, Modals, Carousel, Dropdowns और Pagination को भी आसानी से सीख सकते हैं।

Bootstrap का basic rule हमेशा याद रखें:

HTML Structure + Bootstrap Classes + Responsive Grid = Fast & Professional Website UI

Practice करते रहें और अलग-अलग Bootstrap classes को combine करके अपने खुद के layouts बनाएं। यही Bootstrap 4 सीखने का सबसे effective तरीका है।