बूस्ट्रैप 5 टेक्स्ट/लाइउट

Bootstrap 5 मूलभूत सेटिंग

Bootstrap 5 मूलभूत font-size 1rem (मूलभूत रूप से 16px) है,line-height को 1.5 रखा गया है।

इसके अलावा, सभी <p> एलीमेंटों को margin-top: 0 <mark> margin-bottom: 1rem )(मूलभूत रूप से 16px है)।

<h1> - <h6>

Bootstrap 5 में HTML शीर्षक (<h1> से <h6>）का शैली विन्यास बड़े फ़ॉन्ट-वेट और प्रतिक्रियात्मक फ़ॉन्ट-साइज के साथ है।

उदाहरण

स्वयं प्रयास करें

आवश्यकता होने पर, आप अन्य एलीमेंटों पर भी इस शैली का उपयोग कर सकते हैं (अधिक फ़ॉन्ट-वेट और प्रतिक्रियात्मक फ़ॉन्ट-साइज)। .h1 से .h6 को शीर्षक के रूप में प्रदर्शित करने के लिए वर्ग:

उदाहरण

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

स्वयं प्रयास करें

डिस्प्ले शीर्षक

डिस्प्ले शीर्षक आम शीर्षक की तुलना में अधिक उभरे (बड़े फ़ॉन्ट-साइज और तना फ़ॉन्ट-वेट) है, छह वर्ग उपलब्ध है:.display-1 से .display-6:

उदाहरण

स्वयं प्रयास करें

<small>

Bootstrap 5 में HTML <small> एलीमेंट (और .small इसके लिए छोटे सहायक पाठ को किसी भी शीर्षक में बनाने के लिए उपयोग किया जाता है:

उदाहरण

स्वयं प्रयास करें

बूटस्ट्रैप 5 भूरे पृष्ठभूमि रंग और कुछ आंतरिक पैडिंग के साथ सेट करेगा

Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 बूटस्ट्रैप 5 भूरे पृष्ठभूमि रंग और कुछ आंतरिक पैडिंग के साथ सेट करेगा <mark> और .mark

उदाहरण

स्वयं प्रयास करें

<abbr>

बूटस्ट्रैप 5 एचटीएमएल को नीचे के तरीके से सेट करेगा: <abbr> एलीमेंट की शैली को नीचे के तरीके से सेट करें: बोटम वाली डैश बॉर्डर के साथ और हॉवर पर प्रश्न के सिरे वाले कर्सर

उदाहरण

स्वयं प्रयास करें

<blockquote>

अन्य स्रोत के साथ उद्धरण वाले सामग्री बॉक्स को जब उद्धरण करते हैं, तो .blockquote क्लास को जोड़ें <blockquote>जब नामकरण करते हैं, जैसे कि 'विश्व प्राकृतिक निधि की वेबसाइट से', इसे इस्तेमाल करें .blockquote-footer क्लास:

उदाहरण

स्वयं प्रयास करें

<dl>

बूटस्ट्रैप 5 एचटीएमएल को नीचे के तरीके से सेट करेगा: <dl> एलीमेंट की शैली:

उदाहरण

स्वयं प्रयास करें

<code>

बूटस्ट्रैप 5 एचटीएमएल को नीचे के तरीके से सेट करेगा: <code> एलीमेंट की शैली:

उदाहरण

स्वयं प्रयास करें

<kbd>

बूटस्ट्रैप 5 एचटीएमएल को नीचे के तरीके से सेट करेगा: <kbd> एलीमेंट की शैली:

उदाहरण

स्वयं प्रयास करें

<pre>

बूटस्ट्रैप 5 एचटीएमएल को नीचे के तरीके से सेट करेगा: <pre> एलीमेंट की शैली:

उदाहरण

स्वयं प्रयास करें

और अधिक फ़ॉर्मेटिंग क्लास

नीचे दिए गए बूटस्ट्रैप 5 क्लासों को एचटीएमएल एलीमेंट की शैली में और जोड़ सकते हैं:

क्लास वर्णन उदाहरण
.lead पैराग्राफ को उभारा सबसे पहले प्रयास करें
.text-left टेक्स्ट को बाएँ बराबर जमाएं。 सबसे पहले प्रयास करें
.text-break अधिक लंबे टेक्स्ट को लेआउट को नष्ट न करने के लिए सबसे पहले प्रयास करें
.text-center टेक्स्ट को मध्य से जमाएं。 सबसे पहले प्रयास करें
.text-decoration-none लिंक में निशानी हटाएं。 सबसे पहले प्रयास करें
.text-end टेक्स्ट को दायाँ बराबर जमाएं。 सबसे पहले प्रयास करें
.text-nowrap टेक्स्ट को नहीं बदलने दें。 सबसे पहले प्रयास करें
.text-lowercase छोटे पैमाने पर टेक्स्ट को निर्धारित करें。 सबसे पहले प्रयास करें
.text-uppercase बड़े पैमाने पर टेक्स्ट को निर्धारित करें。 सबसे पहले प्रयास करें
.text-capitalize बड़े पैमाने पर टेक्स्ट को निर्धारित करें。 सबसे पहले प्रयास करें
.initialism <abbr> एलीमेंट के भीतर लिखे गए टेक्स्ट को थोड़ी छोटी फ़ॉन्ट में दिखाएं。 सबसे पहले प्रयास करें
.list-unstyled सूची आइटम के मूल list-style और बाएँ बाहरी घेरा (यह <ul> और <ol> के लिए लागू होता है) हटाएं。
यह शैली केवल सीधे संतति आइटमों के लिए ही लागू होती है。
यदि आप किसी गहरी सूची से मूल सूची शैली को हटाना चाहते हैं, तो इसे गहरी सूची पर भी लगाएं。		 सबसे पहले प्रयास करें
.list-inline सभी सूची आइटमों को एक पंक्ति पर रखें。
कृपया प्रत्येक <li> एलीमेंट पर .list-inline-item के साथ इसे इस्तेमाल करें。		 सबसे पहले प्रयास करें