in English

کالم

ہمارے فلیکس باکس گرڈ سسٹم کی بدولت صف بندی، ترتیب دینے اور آفسیٹ کرنے کے لیے مٹھی بھر اختیارات کے ساتھ کالموں میں ترمیم کرنے کا طریقہ سیکھیں۔ اس کے علاوہ، غیر گرڈ عناصر کی چوڑائی کو منظم کرنے کے لیے کالم کلاسز کا استعمال کیسے کریں۔

اس صفحہ پر

سنو! اپنے گرڈ کالموں میں ترمیم اور تخصیص کرنے کا طریقہ جاننے سے پہلے پہلے گرڈ کا صفحہ ضرور پڑھیں۔

وہ کیسے کام کرتے ہیں۔

کالم گرڈ کے فلیکس باکس فن تعمیر پر بنتے ہیں۔ Flexbox کا مطلب ہے کہ ہمارے پاس انفرادی کالموں کو تبدیل کرنے اور قطار کی سطح پر کالموں کے گروپس میں ترمیم کرنے کے اختیارات ہیں ۔ آپ انتخاب کرتے ہیں کہ کالم کیسے بڑھتے، سکڑتے، یا دوسری صورت میں تبدیل ہوتے ہیں۔
گرڈ لے آؤٹ بناتے وقت، تمام مواد کالموں میں جاتا ہے۔ بوٹسٹریپ کے گرڈ کا درجہ بندی آپ کے مواد تک کنٹینر سے قطار سے کالم تک جاتی ہے۔ غیر معمولی مواقع پر، آپ مواد اور کالم کو یکجا کر سکتے ہیں، لیکن آگاہ رہیں کہ اس کے غیر ارادی نتائج ہو سکتے ہیں۔
بوٹسٹریپ میں تیز، ذمہ دار لے آؤٹ بنانے کے لیے پہلے سے طے شدہ کلاسز شامل ہیں۔ ہر گرڈ ٹائر پر چھ بریک پوائنٹس اور ایک درجن کالموں کے ساتھ ، ہمارے پاس آپ کے مطلوبہ لے آؤٹس بنانے کے لیے درجنوں کلاسیں پہلے سے ہی بنائی گئی ہیں۔ اگر آپ چاہیں تو اسے ساس کے ذریعے غیر فعال کیا جا سکتا ہے۔

سیدھ

کالموں کو عمودی اور افقی طور پر سیدھ میں کرنے کے لیے فلیکس باکس الائنمنٹ یوٹیلیٹیز استعمال کریں۔

عمودی سیدھ

تین کالموں میں سے ایک

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

تین کالموں میں سے ایک

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

افقی سیدھ

دو کالموں میں سے ایک

html

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

کالم لپیٹنا

اگر ایک قطار میں 12 سے زیادہ کالم رکھے جائیں تو، اضافی کالموں کا ہر گروپ، ایک یونٹ کے طور پر، ایک نئی لائن پر لپیٹے گا۔

.col-9

.col-4
چونکہ 9 + 4 = 13 > 12، یہ 4 کالم وسیع div ایک متصل یونٹ کے طور پر ایک نئی لائن پر لپیٹ جاتا ہے۔

.col-6
بعد کے کالم نئی لائن کے ساتھ جاری رہتے ہیں۔

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

کالم ٹوٹ جاتا ہے۔

فلیکس باکس میں کالموں کو نئی لائن میں توڑنے کے لیے ایک چھوٹی ہیک کی ضرورت ہوتی ہے: width: 100%جہاں بھی آپ اپنے کالموں کو نئی لائن میں لپیٹنا چاہتے ہیں وہاں ایک عنصر شامل کریں۔ عام طور پر یہ ایک سے زیادہ .rows کے ساتھ مکمل کیا جاتا ہے، لیکن عمل درآمد کا ہر طریقہ اس کا حساب نہیں دے سکتا۔

.col-6 .col-sm-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

آپ اس وقفے کو ہماری ریسپانسیو ڈسپلے یوٹیلیٹیز کے ساتھ مخصوص بریک پوائنٹس پر بھی لگا سکتے ہیں ۔

.col-6 .col-sm-4

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

دوبارہ ترتیب دینا

کلاسز کا آرڈر دیں۔

اپنے مواد کی بصری ترتیب.order- کو کنٹرول کرنے کے لیے کلاسز کا استعمال کریں ۔ یہ کلاسز ریسپانسیو ہیں، لہذا آپ بریک پوائنٹ (مثلاً، ) سیٹ کر سکتے ہیں۔ تمام چھ گرڈ ٹائرز کے لیے سپورٹ شامل ہے ۔order.order-1.order-md-215

سب سے پہلے DOM میں، کوئی آرڈر لاگو نہیں ہوا۔

DOM میں دوسرا، بڑے آرڈر کے ساتھ

DOM میں تیسرا، 1 کے آرڈر کے ساتھ

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

.order-firstجوابی اور .order-lastکلاسیں بھی ہیں جو orderکسی عنصر کو بالترتیب لاگو order: -1کرکے تبدیل کرتی ہیں۔ order: 6ضرورت کے مطابق ان کلاسوں کو نمبر والی .order-*کلاسوں کے ساتھ ملایا بھی جا سکتا ہے۔

DOM میں سب سے پہلے، آخری آرڈر دیا گیا۔

DOM میں دوسرا، غیر ترتیب شدہ

DOM میں تیسرا، پہلے حکم دیا گیا۔

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

کالمز کو آف سیٹ کرنا

آپ گرڈ کالم کو دو طریقوں سے آفسیٹ کر سکتے ہیں: ہماری ریسپانسیو .offset-گرڈ کلاسز اور ہماری مارجن یوٹیلیٹیز ۔ گرڈ کلاسز کا سائز کالموں سے مماثل ہے جبکہ مارجنز فوری لے آؤٹ کے لیے زیادہ مفید ہیں جہاں آفسیٹ کی چوڑائی متغیر ہے۔

آفسیٹ کلاسز

.offset-md-*کلاسز کا استعمال کرتے ہوئے کالموں کو دائیں طرف منتقل کریں ۔ یہ کلاسیں کالم کے بائیں مارجن کو *کالموں کے حساب سے بڑھاتی ہیں۔ مثال کے طور پر، چار کالموں پر .offset-md-4منتقل ہوتا ہے ۔.col-md-4

col-md-4

col-md-4 .offset-md-4

col-md-3 .offset-md-3

col-md-6 .offset-md-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

جوابی بریک پوائنٹس پر کالم صاف کرنے کے علاوہ، آپ کو آفسیٹس کو دوبارہ ترتیب دینے کی ضرورت پڑ سکتی ہے۔ گرڈ کی مثال میں اس کو عمل میں دیکھیں ۔

col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

مارجن کی افادیت

v4 میں flexbox میں منتقل ہونے کے ساتھ، آپ مارجن یوٹیلیٹیز استعمال کر سکتے ہیں جیسے .me-autoبہن بھائیوں کے کالموں کو ایک دوسرے سے دور کرنا۔

col-md-4

col-md-4 .ms-auto

.col-md-3 .ms-md-auto

col-auto .me-auto

col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

اسٹینڈ اسٹون کالم کلاسز

کسی عنصر کو ایک مخصوص چوڑائی دینے کے .col-*لیے کلاسز کو a کے باہر بھی استعمال کیا جا سکتا ہے ۔ .rowجب بھی کالم کلاسز کو ایک قطار کے غیر براہ راست بچوں کے طور پر استعمال کیا جاتا ہے، پیڈنگز کو چھوڑ دیا جاتا ہے۔

.col-3: 25% کی چوڑائی

.col-sm-9: sm بریک پوائنٹ کے اوپر 75% کی چوڑائی

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

ریسپانسیو فلوٹڈ امیجز بنانے کے لیے کلاسز کو افادیت کے ساتھ استعمال کیا جا سکتا ہے۔ .clearfixاگر متن چھوٹا ہے تو فلوٹ کو صاف کرنے کے لیے مواد کو ریپر میں لپیٹنا یقینی بنائیں ۔

پلیس ہولڈر ٹیکسٹ کا ایک پیراگراف۔ ہم اسے یہاں کلیئر فکس کلاس کا استعمال دکھانے کے لیے استعمال کر رہے ہیں۔ ہم یہاں کچھ بے معنی جملے شامل کر رہے ہیں تاکہ یہ ظاہر کیا جا سکے کہ کالم یہاں فلوٹ شدہ تصویر کے ساتھ کیسے تعامل کرتے ہیں۔

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

اور پھر بھی، آپ یہاں ہیں، ابھی بھی اس پلیس ہولڈر متن کو پڑھنے میں ثابت قدم ہیں، کچھ مزید بصیرت کی امید میں، یا مواد کے کچھ چھپے ہوئے ایسٹر انڈے کی امید کر رہے ہیں۔ ایک لطیفہ، شاید۔ بدقسمتی سے، یہاں اس میں سے کوئی بھی نہیں ہے۔

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>