September 12, 2026

 

Bootstrap 4 के basic components जैसे Grid, Colors, Typography, Tables, Buttons और Cards सीखने के बाद Forms, Input, Input Groups, Carousel, Modal, Tooltip और Popover जैसे components को समझना अगला important step है।

इन components का इस्तेमाल लगभग हर प्रकार की modern website में किया जा सकता है।

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

• Contact Form में Forms और Input

• Search box में Input Group

• Homepage banner में Carousel

• Login या confirmation window में Modal

• छोटे helpful messages के लिए Tooltip

• Additional information दिखाने के लिए Popover

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

---

1. Bootstrap 4 Forms

Website पर user से information लेने के लिए Forms का इस्तेमाल किया जाता है।

Examples:

• Contact Form

• Login Form

• Registration Form

• Feedback Form

• Search Form

• Admission Form

• Enquiry Form

Bootstrap 4 form elements को professional और responsive बनाने के लिए कई classes provide करता है।

Basic Bootstrap Form

<form>

    <div class="form-group">

        <label>
            Name
        </label>

        <input type="text"
               class="form-control"
               placeholder="Enter your name">

    </div>


    <div class="form-group">

        <label>
            Email
        </label>

        <input type="email"
               class="form-control"
               placeholder="Enter your email">

    </div>


    <button type="submit"
            class="btn btn-primary">

        Submit

    </button>

</form>

यहाँ form-group form fields के बीच proper spacing देता है और form-control input को Bootstrap की standard styling देता है।

---

Real-Time Example: Contact Form

Business website पर Contact Us form कुछ इस तरह बनाया जा सकता है:

<form>

    <div class="form-group">

        <label>
            Full Name
        </label>

        <input type="text"
               class="form-control"
               placeholder="Enter your name">

    </div>


    <div class="form-group">

        <label>
            Email Address
        </label>

        <input type="email"
               class="form-control"
               placeholder="Enter email">

    </div>


    <div class="form-group">

        <label>
            Message
        </label>

        <textarea class="form-control"
                  rows="4"
                  placeholder="Write your message">
        </textarea>

    </div>


    <button class="btn btn-primary">
        Send Message
    </button>

</form>

यह basic contact form किसी business website पर इस्तेमाल किया जा सकता है।

---

2. Bootstrap 4 Input

Input field website forms का सबसे basic element है।

HTML में अलग-अलग types के inputs होते हैं:

text
email
password
number
date
file
checkbox
radio

Bootstrap में सामान्यतः input के साथ form-control class लगाई जाती है।

Text Input

<input type="text"
       class="form-control"
       placeholder="Enter your name">

Email Input

<input type="email"
       class="form-control"
       placeholder="Enter email">

Password Input

<input type="password"
       class="form-control"
       placeholder="Enter password">

Number Input

<input type="number"
       class="form-control"
       placeholder="Enter mobile number">

Date Input

<input type="date"
       class="form-control">

File Input

<input type="file"
       class="form-control-file">

---

Select Dropdown

Form में dropdown बनाने के लिए:

<select class="form-control">

    <option>Select Course</option>

    <option>Web Development</option>

    <option>Digital Marketing</option>

    <option>Graphic Design</option>

    <option>SEO</option>

</select>

Real-Time Example: Course Admission Form

<div class="form-group">

    <label>
        Select Course
    </label>

    <select class="form-control">

        <option>Choose Course</option>

        <option>Web Development</option>

        <option>SEO</option>

        <option>Digital Marketing</option>

    </select>

</div>

इस तरह online admission या enquiry form में user course select कर सकता है।

---

3. Bootstrap 4 Input Group

कई बार input field के साथ कोई text, icon, currency symbol या button जोड़ना होता है।

ऐसे cases में Input Group बहुत useful है।

Basic structure:

<div class="input-group">

    <div class="input-group-prepend">

        <span class="input-group-text">
            ₹
        </span>

    </div>

    <input type="text"
           class="form-control">

</div>

यह input के पहले ₹ symbol दिखाएगा।

---

Input Group with Text

<div class="input-group">

    <div class="input-group-prepend">

        <span class="input-group-text">
            https://
        </span>

    </div>

    <input type="text"
           class="form-control"
           placeholder="example.com">

</div>

यह website URL input के लिए useful है।

---

Input Group with Button

<div class="input-group">

    <input type="text"
           class="form-control"
           placeholder="Search...">

    <div class="input-group-append">

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

    </div>

</div>

Real-Time Example: Website Search

Blog website पर search box:

[ Search articles........ ] [Search]

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

---

4. Bootstrap 4 Carousel

Carousel एक slideshow component है, जिसमें multiple images या content automatically या manually एक के बाद एक display होता है।

Carousel का इस्तेमाल आमतौर पर:

• Homepage banners

• Product images

• Offers

• News

• Testimonials

• Portfolio

• Featured content

के लिए किया जाता है।

Basic Carousel

<div id="myCarousel"
     class="carousel slide"
     data-ride="carousel">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img src="slide1.jpg"
                 class="d-block w-100"
                 alt="Slide 1">

        </div>


        <div class="carousel-item">

            <img src="slide2.jpg"
                 class="d-block w-100"
                 alt="Slide 2">

        </div>


        <div class="carousel-item">

            <img src="slide3.jpg"
                 class="d-block w-100"
                 alt="Slide 3">

        </div>

    </div>

</div>

पहली slide में active class होना जरूरी है।

---

Carousel with Controls

Previous और Next buttons add करने के लिए:

<a class="carousel-control-prev"
   href="#myCarousel"
   data-slide="prev">

    <span class="carousel-control-prev-icon">
    </span>

</a>

<a class="carousel-control-next"
   href="#myCarousel"
   data-slide="next">

    <span class="carousel-control-next-icon">
    </span>

</a>

Real-Time Example: Business Website

मान लीजिए website पर तीन services के banners दिखाने हैं:

Slide 1 → Website Development
Slide 2 → SEO Services
Slide 3 → Digital Marketing

Carousel की मदद से इन तीनों banners को homepage के top section में show किया जा सकता है।

---

5. Bootstrap 4 Modal

Modal एक popup window होती है जो current page के ऊपर दिखाई देती है।

Modal का इस्तेमाल बहुत common है।

Examples:

• Login popup

• Registration form

• Product details

• Delete confirmation

• Image preview

• Contact form

• Terms and conditions

Basic Modal

<button class="btn btn-primary"
        data-toggle="modal"
        data-target="#myModal">

    Open Modal

</button>


<div class="modal fade"
     id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Welcome
                </h5>

                <button type="button"
                        class="close"
                        data-dismiss="modal">

                    <span>
                        &times;
                    </span>

                </button>

            </div>


            <div class="modal-body">

                <p>
                    This is a Bootstrap 4 modal.
                </p>

            </div>


            <div class="modal-footer">

                <button type="button"
                        class="btn btn-secondary"
                        data-dismiss="modal">

                    Close

                </button>

            </div>

        </div>

    </div>

</div>

यहाँ:

• modal → modal container

• modal-dialog → popup का structure

• modal-content → popup content

• modal-header → heading area

• modal-body → main content

• modal-footer → buttons/actions

---

Real-Time Example: Delete Confirmation

Admin panel में delete करने से पहले confirmation दिखा सकते हैं:

Are you sure you want to delete this record?

[Cancel] [Delete]

यह user को accidental deletion से बचाने के लिए useful interface pattern है।

---

6. Bootstrap 4 Tooltip

Tooltip एक छोटा information box होता है जो user के mouse hover करने पर दिखाई देता है।

Tooltip का इस्तेमाल additional information देने के लिए किया जाता है।

Basic Tooltip

<button type="button"
        class="btn btn-primary"
        data-toggle="tooltip"
        title="Click to save your data">

    Save

</button>

जब user button पर hover करेगा, तो tooltip दिखाई देगा:

Click to save your data

Tooltip links, buttons, icons और other UI elements पर इस्तेमाल किया जा सकता है।

---

Tooltip Position

Tooltip की position change कर सकते हैं।

<button data-toggle="tooltip"
        data-placement="top"
        title="Top Tooltip">

    Top

</button>

Other positions:

top
bottom
left
right

---

7. Bootstrap 4 Popover

Popover Tooltip जैसा ही होता है, लेकिन Popover में Tooltip की तुलना में ज्यादा content दिखाया जा सकता है।

Tooltip:

Small information

Popover:

Title
More detailed information

Basic Popover

<button type="button"
        class="btn btn-primary"
        data-toggle="popover"
        title="User Information"
        data-content="This is additional information about the user.">

    View Info

</button>

User button पर click करेगा तो popover दिखाई देगा।

---

Popover Position

<button type="button"
        data-toggle="popover"
        data-placement="right"
        title="More Information"
        data-content="Additional details are available here.">

    Information

</button>

Popover की position हो सकती है:

top
bottom
left
right

---

Important: Tooltip और Popover के लिए JavaScript

Bootstrap 4 में Tooltip और Popover को activate करने के लिए JavaScript initialization की जरूरत होती है।

jQuery और Bootstrap JS load होने के बाद:

<script>
$(function () {

    $('[data-toggle="tooltip"]').tooltip();

    $('[data-toggle="popover"]').popover();

});
</script>

अगर यह initialization नहीं किया गया, तो कई situations में tooltip और popover expected तरीके से काम नहीं करेंगे।

Bootstrap 4 projects में आमतौर पर Bootstrap की JavaScript dependencies भी properly include करनी होती हैं।

---

Real-Time Combined Example

अब एक practical business website section में इन सभी components को imagine करते हैं।

Contact Form

<form>

    <div class="form-group">

        <label>Name</label>

        <input type="text"
               class="form-control"
               placeholder="Enter Name">

    </div>


    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">
                +91
            </span>

        </div>

        <input type="text"
               class="form-control"
               placeholder="Mobile Number">

    </div>


    <button class="btn btn-primary"
            data-toggle="tooltip"
            title="Submit your enquiry">

        Submit Enquiry

    </button>

</form>

इस example में हमने:

• Form

• Input

• Input Group

• Button

• Tooltip

एक साथ इस्तेमाल किए हैं।

---

Bootstrap 4 Quick Revision

Component	Important Classes / Attributes
Form	form-group, form-control
Input	form-control
File Input	form-control-file
Input Group	input-group
Input Prefix	input-group-prepend
Input Suffix	input-group-append
Carousel	carousel, carousel-item
Modal	modal, modal-dialog, modal-content
Tooltip	data-toggle="tooltip"
Popover	data-toggle="popover"

---

Conclusion

Bootstrap 4 के Forms, Input, Input Groups, Carousel, Modal, Tooltip और Popover components modern websites और web applications में बहुत useful हैं।

Forms और Inputs user से information collect करने के लिए इस्तेमाल होते हैं। Contact form, login form, registration form और enquiry form जैसे features इन्हीं के आधार पर बनाए जाते हैं।

Input Group input के साथ currency symbol, URL prefix या button जैसे elements जोड़ने के लिए useful है। Search boxes और price fields इसके common real-world examples हैं।

Carousel website पर multiple banners, images या featured content को slideshow के रूप में दिखाने के लिए इस्तेमाल किया जाता है। Homepage banners और product showcases में इसका काफी उपयोग होता है।

Modal एक popup interface है, जिसका इस्तेमाल login, confirmation, product details और forms जैसे content को current page के ऊपर दिखाने के लिए किया जाता है।

Tooltip छोटे helpful messages दिखाने के लिए और Popover comparatively ज्यादा detailed additional information दिखाने के लिए इस्तेमाल किया जाता है।

अगर आप Bootstrap 4 सीख रहे हैं, तो इन components को सिर्फ याद करने के बजाय इन्हें एक real project में implement करके practice करें। एक Business Website, School Website, Blog Website, E-commerce Website या Admin Dashboard बनाकर आप इन concepts को आसानी से समझ सकते हैं।

Bootstrap 4 के इन components को Grid System, Cards, Buttons, Navbar और Responsive Utilities के साथ combine करने पर आप एक complete professional website interface तैयार कर सकते हैं।

याद रखें: Bootstrap का सही उपयोग आपको कम code में responsive, consistent और user-friendly web interface बनाने में मदद करता है।