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

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

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

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

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

.col-4
.col-4
.col-4
col-sm-4
col-sm-4
col-sm-4
col-md-4
col-md-4
col-md-4
col-lg-4
col-lg-4
col-lg-4
col-xl-4
col-xl-4
col-xl-4

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

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

col-md-4
col-md-4
col-md-4

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

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

col-md-3
col-md-6
col-md-3

دو کالم

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

col-md-8
col-md-4

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

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


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

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

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

col-md-8
col-md-6
col-md-6
col-md-4

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

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

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4