متن
سیدھ، ریپنگ، وزن، اور مزید کو کنٹرول کرنے کے لیے عام متن کی افادیت کے لیے دستاویزات اور مثالیں۔
متن کی سیدھ
متن کی سیدھ کی کلاسوں کے ساتھ اجزاء میں متن کو آسانی سے دوبارہ ترتیب دیں۔
کچھ پلیس ہولڈر ٹیکسٹ متن کی درست سیدھ کو ظاہر کرنے کے لیے۔ کیا آپ میرے لیے بھی ایسا ہی کریں گے؟ موسیقی کا سامنا کرنے کا وقت آگیا ہے کہ میں اب آپ کا میوزک نہیں ہوں۔ سنا ہے یہ خوبصورت ہے، جج بنیں اور میری لڑکیاں ووٹ لینے والی ہیں۔ میں اپنے اندر ایک فینکس محسوس کر سکتا ہوں۔ آسمان ہماری محبت سے جل رہا ہے، فرشتے اوپر سے رو رہے ہیں۔ ہاں، آپ مجھے یوٹوپیا میں لے جاتے ہیں۔
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
بائیں، دائیں، اور درمیانی صف بندی کے لیے، ریسپانسیو کلاسز دستیاب ہیں جو گرڈ سسٹم کی طرح ویو پورٹ کی چوڑائی کے بریک پوائنٹس کا استعمال کرتی ہیں۔
تمام ویو پورٹ سائزز پر بائیں طرف سے منسلک متن۔
تمام ویو پورٹ سائزز پر بیچ میں منسلک متن۔
تمام ویو پورٹ سائزز پر دائیں طرف سے منسلک متن۔
ویو پورٹ کے سائز کا SM (چھوٹا) یا اس سے بڑا متن پر بائیں سیدھ میں کیا گیا متن۔
ویو پورٹ کے سائز کے MD (میڈیم) یا اس سے زیادہ چوڑا متن پر بائیں سیدھ میں کیا گیا متن۔
ویو پورٹ کے سائز کے LG (بڑے) یا اس سے زیادہ چوڑے متن پر بائیں جانب سیدھ میں کیا گیا متن۔
ویو پورٹ کے سائز کے XL (اضافی بڑے) یا اس سے زیادہ چوڑا متن پر بائیں سیدھ میں کیا گیا متن۔
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
ٹیکسٹ ریپنگ اور اوور فلو
.text-wrap
کلاس کے ساتھ متن لپیٹیں ۔
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
.text-nowrap
متن کو کلاس کے ساتھ لپیٹنے سے روکیں ۔
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
طویل مواد کے لیے، آپ .text-truncate
بیضوی شکل کے ساتھ متن کو تراشنے کے لیے ایک کلاس شامل کر سکتے ہیں۔ کی ضرورت ہے display: inline-block
یا display: block
.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
لفظ کا وقفہ
.text-break
سیٹ word-wrap: break-word
اور word-break: break-word
. _ ہم وسیع براؤزر سپورٹ کے لیے word-wrap
زیادہ عام کی بجائے استعمال کرتے ہیں، اور فلیکس کنٹینرز کے مسائل سے بچنے کے لیے فرسودہ کو شامل کرتے ہیں۔overflow-wrap
word-break: break-word
مممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممم
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
متن کی تبدیلی
متن کیپٹلائزیشن کلاسز کے ساتھ متن کو اجزاء میں تبدیل کریں۔
چھوٹے ہاتھ کا متن۔
بڑے ہاتھ کا متن۔
CapiTaliZed متن۔
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
نوٹ کریں کہ کس طرح .text-capitalize
ہر لفظ کے پہلے حرف کو تبدیل کیا جاتا ہے، کسی دوسرے حروف کے کیس کو غیر متاثر چھوڑ کر۔
فونٹ کا وزن اور ترچھا
متن کے وزن (دلیری) کو جلدی سے تبدیل کریں یا متن کو ترچھا کریں۔
بولڈ ٹیکسٹ۔
زیادہ بولڈ ویٹ ٹیکسٹ (والدین عنصر کے نسبت)۔
عام وزن کا متن۔
ہلکے وزن کا متن۔
ہلکے وزن کا متن (والدین عنصر کے نسبت)۔
ترچھا متن۔
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
مونو اسپیس
ایک انتخاب کو ہمارے مونو اسپیس فونٹ اسٹیک کے ساتھ تبدیل کریں .text-monospace
۔
یہ مونو اسپیس میں ہے۔
<p class="text-monospace">This is in monospace</p>
رنگ ری سیٹ کریں۔
کسی متن یا لنک کا رنگ اس کے ساتھ .text-reset
دوبارہ ترتیب دیں، تاکہ اسے اپنے والدین سے رنگ وراثت میں ملے۔
ری سیٹ لنک کے ساتھ خاموش متن ۔
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
متن کی سجاوٹ
.text-decoration-none
کلاس کے ساتھ متن کی سجاوٹ کو ہٹا دیں ۔
<a href="#" class="text-decoration-none">Non-underlined link</a>