in English

متن

سیدھ، ریپنگ، وزن، اور مزید کو کنٹرول کرنے کے لیے عام متن کی افادیت کے لیے دستاویزات اور مثالیں۔

متن کی سیدھ

متن کی سیدھ کی کلاسوں کے ساتھ اجزاء میں متن کو آسانی سے دوبارہ ترتیب دیں۔

کچھ پلیس ہولڈر ٹیکسٹ متن کی درست سیدھ کو ظاہر کرنے کے لیے۔ کیا آپ میرے لیے بھی ایسا ہی کریں گے؟ موسیقی کا سامنا کرنے کا وقت آگیا ہے کہ میں اب آپ کا میوزک نہیں ہوں۔ سنا ہے یہ خوبصورت ہے، جج بنیں اور میری لڑکیاں ووٹ لینے والی ہیں۔ میں اپنے اندر ایک فینکس محسوس کر سکتا ہوں۔ آسمان ہماری محبت سے جل رہا ہے، فرشتے اوپر سے رو رہے ہیں۔ ہاں، آپ مجھے یوٹوپیا میں لے جاتے ہیں۔

<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.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<!-- 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-wrapword-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>