বুটস্ট্র্যাপ গ্রিড উদাহরণ

বুটস্ট্র্যাপ গ্রিড সিস্টেমের মধ্যে বিল্ডিংয়ের সাথে আপনাকে পরিচিত করতে প্রাথমিক গ্রিড লেআউট।

এই উদাহরণগুলিতে .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

মিশ্র: মোবাইল এবং ডেস্কটপ

বুটস্ট্র্যাপ v5 গ্রিড সিস্টেমে ক্লাসের ছয়টি স্তর রয়েছে: xs (অতিরিক্ত ছোট, এই ক্লাস ইনফিক্স ব্যবহার করা হয় না), sm (ছোট), md (মাঝারি), lg (বড়), xl (x-বড়), এবং xxl (xx) -বড়)। আপনি আরও গতিশীল এবং নমনীয় লেআউট তৈরি করতে এই শ্রেণীর প্রায় যেকোনো সমন্বয় ব্যবহার করতে পারেন।

ক্লাসের প্রতিটি স্তর স্কেল করে, যার অর্থ আপনি যদি md, lg, xl এবং xxl-এর জন্য একই প্রস্থ সেট করার পরিকল্পনা করেন তবে আপনাকে শুধুমাত্র 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নর্দমা সঙ্গে

পাত্রে

বুটস্ট্র্যাপ v4.4-এ যোগ করা অতিরিক্ত ক্লাস একটি নির্দিষ্ট ব্রেকপয়েন্ট পর্যন্ত 100% প্রশস্ত কন্টেইনারকে অনুমতি দেয়। v5 একটি নতুন xxlব্রেকপয়েন্ট যোগ করে।

.পাত্র

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.পাত্র-তরল