بوٹسٹریپ گرڈ کی مثالیں۔

بوٹسٹریپ گرڈ سسٹم کے اندر تعمیر سے آپ کو واقف کرانے کے لیے بنیادی گرڈ لے آؤٹ۔

ان مثالوں میں .themed-grid-colکلاس کو کالموں میں کچھ تھیمنگ شامل کرنے کے لیے شامل کیا جاتا ہے۔ یہ ایسی کلاس نہیں ہے جو بوٹسٹریپ میں بطور ڈیفالٹ دستیاب ہو۔

پانچ گرڈ درجات

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

.col-4

col-sm-4

col-md-4

col-lg-4

col-xl-4

col-xxl-4

تین برابر کالم

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

col-md-4

تین برابر کالم متبادل

کلاسز کا استعمال کرکے .row-cols-*، آپ آسانی سے برابر کالموں کے ساتھ گرڈ بنا سکتے ہیں۔

.colکا بچہ .row-cols-md-3

تین غیر مساوی کالم

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

col-md-3

col-md-6

col-md-3

دو کالم

ڈیسک ٹاپس سے شروع ہونے والے دو کالم حاصل کریں اور بڑے ڈیسک ٹاپس پر اسکیلنگ کریں ۔

col-md-8

col-md-4

پوری چوڑائی، سنگل کالم

مکمل چوڑائی والے عناصر کے لیے کوئی گرڈ کلاسز ضروری نہیں ہیں۔

دو نیسٹڈ کالموں کے ساتھ دو کالم

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

موبائل ڈیوائس کے سائز، ٹیبلٹ اور نیچے، یہ کالم اور ان کے نیسٹڈ کالم اسٹیک ہو جائیں گے۔

col-md-8

col-md-6

col-md-4

مخلوط: موبائل اور ڈیسک ٹاپ

بوٹسٹریپ v4 گرڈ سسٹم میں کلاسوں کے پانچ درجے ہیں: xs (اضافی چھوٹا، اس کلاس کا انفکس استعمال نہیں کیا جاتا ہے)، sm (چھوٹا)، md (میڈیم)، lg (بڑا)، اور xl (اضافی بڑا)۔ آپ زیادہ متحرک اور لچکدار لے آؤٹ بنانے کے لیے ان کلاسوں کے تقریباً کسی بھی امتزاج کو استعمال کر سکتے ہیں۔

کلاسوں کے ہر درجے کو بڑھایا جاتا ہے، یعنی اگر آپ md، lg اور xl کے لیے ایک جیسی چوڑائی طے کرنے کا ارادہ رکھتے ہیں، تو آپ کو صرف md کی وضاحت کرنے کی ضرورت ہے۔

col-md-8

.col-6 .col-md-4

.col-6

مخلوط: موبائل، ٹیبلیٹ، اور ڈیسک ٹاپ

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

گٹر

کلاسوں کے ساتھ .gx-*، افقی گٹر کو ایڈجسٹ کیا جا سکتا ہے.

.col.gx-4گٹر کے ساتھ

.gy-*عمودی گٹروں کو کنٹرول کرنے کے لیے کلاسز کا استعمال کریں ۔

.col.gy-4گٹر کے ساتھ

کلاسوں کے ساتھ .g-*، دونوں سمتوں میں گٹر کو ایڈجسٹ کیا جا سکتا ہے.

.col.g-3گٹر کے ساتھ

کنٹینرز

Bootstrap v4.4 میں شامل کردہ اضافی کلاسیں کسی خاص بریک پوائنٹ تک 100% چوڑے کنٹینرز کی اجازت دیتی ہیں۔ v5 ایک نیا xxlبریک پوائنٹ شامل کرتا ہے۔

کنٹینر

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid