कोर्स सेट

बूस्ट्रैप 5 ट्यूटोरियल

• BS5 ट्यूटोरियल
• BS5 इंट्रोडक्शन
• BS5 कंटेनर
• BS5 ग्रिड बेसिक
• BS5 फॉर्मेटिंग
• BS5 रंग
• BS5 टेबल
• BS5 इमेज
• BS5 जंबोरो
• BS5 अलर्ट बॉक्स
• BS5 बटन
• BS5 बटन ग्रुप
• BS5 मेडल
• BS5 प्रगति पट्टी
• BS5 लोडर
• BS5 पेजिनेशन
• BS5 लिस्ट ग्रुप
• BS5 कार्ड
• BS5 ड्रॉपडाउन मेनू
• BS5 फोल्डर
• BS5 नेविगेशन
• BS5 नेविगेशन बार
• BS5 स्लाइडर
• BS5 मोडल
• BS5 हेल्प टूल्टिप
• BS5 पॉपअप
• BS5 टॉस्ट
• BS5 स्क्रॉलस्पाई
• BS5 ऑफकैनवास
• BS5 यूटिलिटी टूल
• BS5 फ्लेक्स

बूस्ट्रैप 5 फॉर्म

• BS5 फॉर्म
• BS5 सेलेक्ट मेनू
• BS5 चेकबॉक्स और रेडियो बटन
• BS5 रेंज
• BS5 इनपुट ग्रुप
• BS5 फ्लॉटिंग टैग
• BS5 फॉर्म वेरीफ़िकेशन

बूस्ट्रैप 5 ग्रिड

• BS5 ग्रिड सिस्टम
• BS5 स्टैक/होरिज़ोन्टल
• BS5 ग्रिड XSmall
• BS5 ग्रिड Small
• BS5 ग्रिड Medium
• BS5 ग्रिड Large
• BS5 ग्रिड XLarge
• BS5 ग्रिड XXL
• BS5 ग्रिड इंस्टेंस

बूटस्ट्रैप 5 अन्य

• BS5 बेसिक टैम्पलेट
• BS5 परीक्षण

अपरिवर्तनीय कोर्स

कोर्स सिफारिश:

• कोडडब्ल्यू3सी.कॉम वैल्यूपैक

यूटिलिटी / हेल्पर क्लास

बूटस्ट्रैप 5 में कई यूटिलिटी/हेल्पर क्लास हैं जो किसी CSS कोड का उपयोग किए बिना एलिमेंट को शील्प देने के लिए तेजी से सेट कर सकते हैं。

बॉर्डर

बॉर्डर क्लास का उपयोग करके एलिमेंट को बॉर्डर जोड़ें या हटाएं:

उदाहरण

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

स्वयं प्रयोग करें

किनारा चौड़ाई

उपयोग .border-1 से .border-5 किनारा चौड़ाई बदलने के लिए:

उदाहरण

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

स्वयं प्रयोग करें

किनारा रंग

किनारा को रंग जोड़ने के लिए किसी भी कंटेक्स्ट किनारा रंग की क्लास का उपयोग करें:

उदाहरण

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

स्वयं प्रयोग करें

किनारा गोलाकार

उपयोग rounded एलिमेंट को गोलाकार किनारा जोड़ें:

उदाहरण

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

स्वयं प्रयोग करें

फ्लॉट और फ्लॉट निष्क्रिय करना

उपयोग .float-end फ्लॉट करने वाले वर्ग को दायंभार करें या इसे उपयोग करें .float-start बाईंभार करें और इसे उपयोग करें .clearfix फ्लॉट निष्क्रिय करने वाले वर्ग:

उदाहरण

<div class="clearfix">
  <span class="float-start">बाईंभार करें</span>
  <span class="float-end">दायंभार करें</span>
</div>

स्वयं प्रयोग करें

उत्तरदायी फ्लॉट

स्क्रीन चौड़ाई के अनुसार आयति को बाईं या दायं ओर फ्लॉट करने के लिए उत्तरदायी फ्लॉट वर्ग (.float-*-left|rightजहां * हैं:

• sm (> = 576px)
• md (> = 768px)
• lg (> = 992px)
• xl (> = 1200px)
• xxl (> = 1400px)

उदाहरण

<div class="float-sm-end">छोटे स्क्रीन या अधिक विस्तृत स्क्रीन पर दायंभार करें</div><br>
<div class="float-md-end">मध्यम स्क्रीन या अधिक विस्तृत स्क्रीन पर दायंभार करें</div><br>
<div class="float-lg-end">बड़े स्क्रीन या अधिक विस्तृत स्क्रीन पर दायंभार करें</div><br>
<div class="float-xl-end">अत्यधिक बड़े स्क्रीन या अधिक विस्तृत स्क्रीन पर दायंभार करें</div><br>
<div class="float-xxl-end">विशेष बड़े स्क्रीन या अधिक विस्तृत स्क्रीन पर दायंभार करें</div><br>
<div class="float-none">फ्लॉट नहीं करें</div>

स्वयं प्रयोग करें

मध्यस्थ आवर्तन

उपयोग .mx-auto मध्यस्थ स्थान (मार्जिन-लेफ्ट और मार्जिन-राइट: auto):

उदाहरण

<div class="mx-auto bg-warning" style="width:150px">मध्यमें</div>

स्वयं प्रयोग करें

चौडाई

w-* वर्ग का उपयोग करके (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）एलिमेंट की चौडाई सेट करने के लिए:

उदाहरण

<div class="w-25 bg-warning">चौडाई 25%</div>
<div class="w-50 bg-warning">चौडाई 50%</div>
<div class="w-75 bg-warning">चौडाई 75%</div>
<div class="w-100 bg-warning">चौडाई 100%</div>
<div class="w-auto bg-warning">ऑटोमैटिक चौडाई</div>
<div class="mw-100 bg-warning">मैक्सिमम चौडाई 100%</div>

स्वयं प्रयोग करें

ऊंचाई

h-* वर्ग का उपयोग करके (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）एलिमेंट की ऊंचाई सेट करने के लिए:

उदाहरण

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">ऊंचाई 25%</div>
  <div class="h-50 bg-warning">ऊंचाई 50%</div>
  <div class="h-75 bg-warning">ऊंचाई 75%</div>
  <div class="h-100 bg-warning">ऊंचाई 100%</div>
  <div class="h-auto bg-warning">ऑटोमैटिक ऊंचाई</div>
  <div class="mh-100 bg-warning" style="height:500px">मैक्सिमम ऊंचाई 100%</div>
</div>

स्वयं प्रयोग करें

स्पेसिंग

Bootstrap 5 के पास व्यापक रिस्पोंसिव मार्जिन और पैडिंग उपयोगी वर्ग हैं। वे सभी ब्रेकपाइंट के लिए उपयोगी हैं:

• xs (<= 576px)
• sm (> = 576px)
• md (> = 768px)
• lg (> = 992px)
• xl (> = 1200px)
• xxl (> = 1400px)

इन वर्गों के उपयोग का रूपांकन इस प्रकार है:{गुण}{सभी तरफ}-{आकार} के लिए xs، और {गुण}{सभी तरफ}-{breakpoint}-{आकार} के लिए sm、md、lg、xl और xxl।

गुण इसमें से एक है:

• m - सेट करें मार्जिन
• p - सेट करें पैडिंग

सभी तरफ इसमें से एक है:

• t - सेट करें मार्जिन-ऊपर या पैडिंग-ऊपर
• b - सेट करें मार्जिन-नीचे या पैडिंग-नीचे
• s - सेट करें मार्जिन-बाईं या पैडिंग-बाईं
• e - सेट करें मार्जिन-दाईं या पैडिंग-दाईं
• x - साथ-साथ सेट करें पैडिंग-बाईं और पैडिंग-दाईं या मार्जिन-बाईं और मार्जिन-दाईं
• y - साथ-साथ सेट करें पैडिंग-ऊपर और पैडिंग-नीचे या मार्जिन-ऊपर और मार्जिन-नीचे
• खाली - एलिमेंट के चार तरफ से अंतर-सीमा सेट करें मार्जिन या पैडिंग

आकार इसमें से एक है:

• 0 - लाओ मार्जिन या पैडिंग सेट करें 0
• 1 - लाओ मार्जिन या पैडिंग सेट करें .25rem
• 2 - लाओ मार्जिन या पैडिंग सेट करें .5rem
• 3 - लाओ मार्जिन या पैडिंग सेट करें 1rem
• 4 - लाओ मार्जिन या पैडिंग सेट करें 1.5rem
• 5 - लाओ मार्जिन या पैडिंग सेट करें 3rem
• auto - लाओ मार्जिन सेट करें के लिए auto

उदाहरण

<div class="pt-4 bg-warning">मैं केवल ऊपर अंतर-सीमा (1.5rem) पर हूँ</div>
<div class="p-5 bg-success">मैं सभी तरफ के अंतर-सीमा (3rem) पर हूँ</div>
<div class="m-5 pb-5 bg-info">मैं सभी तरफ के बाहरी-सीमा (3rem) और नीचे अंतर-सीमा (3rem) पर हूँ</div>

स्वयं प्रयोग करें

अधिक अंतर-सीमा उदाहरण

हमारे CSS इकाइयाँ संदर्भ मानक rem और विभिन्न आकार इकाइयों के बारे में और अधिक पढ़ें。

छाया

कृपया इसे इस्तेमाल करें shadow- क्लास के द्वारा एलिमेंट को छाया जोड़ें:

उदाहरण

<div class="shadow-none p-4 mb-4 bg-light">बिना छाया</div>
<div class="shadow-sm p-4 mb-4 bg-white">छोटे छाया</div>
<div class="shadow p-4 mb-4 bg-white">डिफ़ॉल्ट छाया</div>
<div class="shadow-lg p-4 mb-4 bg-white">बड़े छाया</div>

स्वयं प्रयोग करें

अनुरूपीकरण

कृपया इसे इस्तेमाल करें align- क्लास एलिमेंट के अनुरूपीकरण को बदलती है (केवल inline, inline-block, inline-table और टेबल कोष्ठ एलिमेंट के लिए):

उदाहरण

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

स्वयं प्रयोग करें

आस्पेक्ट रेशियो

पितृ की चौड़ाई के अनुसार प्रतिक्रियात्मक वीडियो या स्लाइडशो का निर्माण करें।

जोड़ें .ratio क्लास आप चुने गए आस्पेक्ट रेशियो के साथ .aspect-ratio-* पितृ एलिमेंट में जोड़ें और उसमें एम्बेड (वीडियो या iframe) जोड़ें:

उदाहरण

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

स्वयं प्रयोग करें

दृश्यता

उपयोग .visible या .invisible क्लास एलिमेंट की दृश्यता को नियंत्रित करती है:

टिप्पणी:ये क्लासें CSS display मान को नहीं बदलती हैं। वे केवल जोड़ती हैं visibility:visible या visibility:hidden。

उदाहरण

<div class="visible">मैं दृश्यमान हूँ。</div>
<div class="invisible">मैं अदृश्य हूँ。</div>

स्वयं प्रयोग करें

बंद चिह्न

उपयोग .btn-close क्लास कोडव३सीसी.कॉम द्वारा प्रदान किए गए सामग्री केवल प्रशिक्षण और परीक्षण के लिए है, सामग्री की सहीता का भरोसा नहीं किया जाता है।इस साइट के सामग्री का उपयोग करने से उत्पन्न होने वाले जोखिम साइट से निजी नहीं हैं।सर्वस्वामित्व, सभी अधिकार अवधारित हैं।

उदाहरण

<button type="button" class="btn-close"></button>

स्वयं प्रयोग करें

स्क्रीन रीडर

उपयोग .visually-hidden क्लास सभी डिवाइसों पर एलिमेंट्स को छिपा सकती है, स्क्रीन रीडर को छोड़कर।

उदाहरण

<span class="visually-hidden">सभी स्क्रीनों पर छिपा हुआ होगा, सिवाय स्क्रीन रीडर के।</span>

स्वयं प्रयोग करें

रंग

जैसा कि 'रंग' अध्याय में बताया गया है, नीचे सभी टेक्स्ट और पृष्ठभूमि रंग क्लासों की सूची दी गई है:

टेक्स्ट रंग के लिए क्लास हैं:

• .text-muted
• .text-primary
• .text-success
• .text-info
• .text-warning
• .text-danger
• .text-secondary
• .text-white
• .text-dark
• .text-body（मूलभूत बॉडी रंग/आमतौर पर श्वेत है）
• .text-light

उदाहरण

स्वयं प्रयोग करें

अर्थात टेक्स्ट के लिए उपयोग किए जाने वाली क्लासों को लिंक में भी उपयोग किया जा सकता है:

उदाहरण

स्वयं प्रयोग करें

आप अधिकतर .text-black-50 या .text-white-50 क्लास का उपयोग करके श्वेत या श्वेत टेक्स्ट को 50% अस्पष्टता जोड़ सकते हैं:

उदाहरण

स्वयं प्रयोग करें

पृष्ठभूमि रंग

पृष्ठभूमि रंग के लिए क्लास हैं:

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

ध्यान दें कि पृष्ठभूमि रंग टेक्स्ट रंग को सेट नहीं करता है, इसलिए कुछ स्थितियों में आपको इनके साथ .text-* क्लासों को एक साथ उपयोग करें

उदाहरण

स्वयं प्रयोग करें

टूलबॉक्स

जावास्क्रिप्ट परीक्षण

सापोर्टर लिंक