Bootstrap Alerts with Examples in Hindi

Bootstrap Alerts का उपयोग website या web application पर user को किसी information, warning, success message या error के बारे में बताने के लिए किया जाता है। उदाहरण के लिए, जब user कोई form successfully submit करता है तो Success Alert दिखाया जा सकता है और किसी गलत input या problem के लिए Danger Alert का उपयोग किया जा सकता है।

Bootstrap में alerts को तैयार करने के लिए .alert class के साथ अलग-अलग contextual classes का उपयोग किया जाता है। इससे बिना ज्यादा CSS लिखे attractive और responsive notification boxes बनाए जा सकते हैं।

Bootstrap Alert का Basic Syntax

Bootstrap alert बनाने के लिए सबसे पहले .alert class और उसके साथ किसी contextual class का उपयोग किया जाता है।

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

• .alert-primary – Primary information
• .alert-secondary – Secondary information
• .alert-success – Success message
• .alert-danger – Error या danger message
• .alert-warning – Warning message
• .alert-info – General information
• .alert-light – Light alert
• .alert-dark – Dark alert

Basic Alert Example

नीचे एक basic Bootstrap alert का example दिया गया है:

Bootstrap Alert के प्रकार

Bootstrap में अलग-अलग situations के लिए अलग contextual alert classes उपलब्ध हैं। इनका उपयोग message के purpose के अनुसार किया जा सकता है।

1. Primary Alert

.alert-primary का उपयोग सामान्य important information या primary message दिखाने के लिए किया जाता है।

2. Secondary Alert

.alert-secondary का उपयोग secondary या कम important information के लिए किया जा सकता है।

3. Success Alert

.alert-success का उपयोग तब किया जाता है जब कोई काम successfully complete हो जाए। जैसे form submit होना, account create होना या payment successful होना।

4. Danger Alert

.alert-danger का उपयोग error, failure या किसी dangerous situation की information देने के लिए किया जाता है।

5. Warning Alert

.alert-warning का उपयोग user को किसी possible problem या सावधानी के बारे में बताने के लिए किया जाता है।

6. Info Alert

.alert-info का उपयोग सामान्य useful information या additional information दिखाने के लिए किया जाता है।

7. Light और Dark Alert

.alert-light और .alert-dark का उपयोग light और dark appearance वाले messages के लिए किया जा सकता है।

Different Alert Types Example

Alert में Heading और Additional Content

Bootstrap alert के अंदर सिर्फ simple text ही नहीं, बल्कि heading, paragraph और अन्य HTML elements भी add किए जा सकते हैं। इसके लिए .alert-heading class का उपयोग किया जा सकता है।

Alert Heading Example

Alert में Link जोड़ना

कई बार alert में user को किसी दूसरे page या resource पर भेजने के लिए link की आवश्यकता होती है। Bootstrap alert के अंदर normal <a> element का उपयोग किया जा सकता है।

Bootstrap की contextual alert classes के साथ .alert-link class लगाने पर link alert के background के हिसाब से suitable appearance प्राप्त करता है।

Alert Link Example

Dismissible Alert

कुछ alerts को user द्वारा close करने की सुविधा देना useful होता है। Bootstrap में इसके लिए .alert-dismissible class और close button का उपयोग किया जाता है।

Bootstrap 5 में close button के लिए .btn-close class का उपयोग किया जाता है। Alert को वास्तव में dismiss करने के लिए Bootstrap की JavaScript functionality भी load करनी होती है।

Dismissible Alert Example

Alert में Icon का उपयोग

Alert को और ज्यादा understandable बनाने के लिए उसमें icon भी लगाया जा सकता है। Bootstrap खुद हर alert के लिए अलग icon automatically add नहीं करता, इसलिए Bootstrap Icons जैसी icon library का उपयोग किया जा सकता है।

Icon के साथ Alert Example

Alert Classes की Quick Reference

Class	Purpose
.alert-primary	Primary information
.alert-secondary	Secondary information
.alert-success	Success message
.alert-danger	Error या danger message
.alert-warning	Warning या caution
.alert-info	General information
.alert-light	Light appearance
.alert-dark	Dark appearance
.alert-link	Alert के अंदर link को suitable styling देने के लिए
.alert-dismissible	Alert को close करने योग्य बनाने के लिए

Bootstrap Alerts के Practical Uses

Alerts को websites और web applications में कई situations में इस्तेमाल किया जा सकता है। उदाहरण के लिए:

• Form successfully submit होने पर success message दिखाना।
• गलत information enter करने पर error message दिखाना।
• User को किसी important update की जानकारी देना।
• Password या account security से जुड़ी warning दिखाना।
• Website maintenance या service unavailable होने की सूचना देना।
• Download या upload complete होने का message दिखाना।
• Login या registration के बाद status message दिखाना।

Bootstrap Alerts के फायदे

• Alerts को बनाने के लिए बहुत कम HTML लिखना पड़ता है।
• अलग-अलग message types के लिए ready-made contextual classes मिलती हैं।
• Bootstrap के responsive design के साथ alerts भी अच्छी तरह काम करते हैं।
• Alert के अंदर text, links, headings और अन्य HTML elements रखे जा सकते हैं।
• Dismissible alerts के माध्यम से user को message बंद करने का option दिया जा सकता है।
• Icons और additional CSS के साथ alerts को project की design के अनुसार customize किया जा सकता है।

Important Points

• हर Bootstrap alert के लिए .alert class आवश्यक है।
• Alert का type बताने के लिए .alert-success, .alert-danger, .alert-warning जैसी contextual classes का उपयोग किया जाता है।
• Link को alert के अनुसार style करने के लिए .alert-link class उपयोगी है।
• Dismissible alert के लिए Bootstrap JavaScript functionality आवश्यक होती है।
• User experience के लिए alert का message short और clear रखना बेहतर होता है।
• Success, error और warning जैसे messages में सही contextual class का उपयोग करना चाहिए, ताकि user message का purpose जल्दी समझ सके।

निष्कर्ष

Bootstrap Alerts website पर user को important information, success messages, warnings और errors दिखाने का आसान तरीका है। .alert के साथ contextual classes का उपयोग करके अलग-अलग प्रकार के alerts बनाए जा सकते हैं। इसके अलावा .alert-link, .alert-heading और .alert-dismissible जैसी classes alerts को ज्यादा useful और interactive बनाती हैं।

अगर आप Bootstrap का उपयोग करके forms, login pages या dashboards बना रहे हैं, तो alerts user को operation का status समझाने के लिए काफी useful component हो सकते हैं।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---