Bootstrap গ্রিড প্লেগ্রাউন্ড
Bootstrap 5.3 গ্রিড লেআউট দৃশ্যমানভাবে তৈরি করুন এবং সঠিক ক্লাস কপি করুন — row, col, অফসেট, ক্রম, গাটার ও সারিবদ্ধকরণ।
—
সবকিছু আপনার ব্রাউজারে চলে — কিছুই আপলোড করা হয় না।
আপনার সেট করা ক্লাস এই ব্রেকপয়েন্ট ও তার উপরে প্রযোজ্য হয়। রেসপন্সিভ লেআউট তৈরি করতে ব্রেকপয়েন্ট পরিবর্তন করুন।
Bootstrap গ্রিড প্লেগ্রাউন্ড সম্পর্কে
Bootstrap Grid Playground প্রকৃত Bootstrap 5.3 গ্রিড সিস্টেম দিয়ে responsive row-and-column লেআউট তৈরি করে। একটি row-তে সর্বোচ্চ 12টি কলাম যোগ করুন, যেকোনো কলামে ক্লিক করে এর width, offset ও order সেট করুন, এবং row-তে gutter ও alignment সামঞ্জস্য করুন — প্রতিটি পরিবর্তনের সাথে প্রিভিউ ও তৈরি হওয়া markup লাইভ আপডেট হয়।
যেহেতু Bootstrap গ্রিড mobile-first, তাই breakpoint switcher-টি কেন্দ্রীয়: একটি কলামকে base-এ col-6 এবং md-এ col-md-4 সেট করুন, এবং আপনি কোনো কোড না লিখেই মোবাইলে-স্ট্যাক-হওয়া, ডেস্কটপে-তিন-পাশাপাশি-প্যাটার্নটি তৈরি করে ফেলেছেন। Offset, order ও gutter class সবগুলোই একই responsive infix নেয়।
আউটপুটটি পরিষ্কার কপি-পেস্ট HTML — একটি row div তার কলাম চাইল্ডসহ এবং ঠিক আপনার কনফিগার করা class সহ। পুরো snippet বা শুধু row class কপি করুন; সবকিছু আপনার ব্রাউজারে স্থানীয়ভাবে চলে।
Bootstrap গ্রিড প্লেগ্রাউন্ড কীভাবে ব্যবহার করবেন
- row-তে কলাম যোগ করুন — সর্বোচ্চ 12টি পর্যন্ত — এবং একটি নির্বাচন করতে ক্লিক করুন।
- বর্তমান breakpoint-এর জন্য নির্বাচিত কলামের span, offset ও order সেট করুন।
- বড় স্ক্রিনে লেআউট কীভাবে reflow হবে তা নির্ধারণ করতে breakpoint (sm থেকে xxl) পরিবর্তন করুন।
- row-এর gutter এবং এর alignment utility সামঞ্জস্য করুন।
- লাইভ প্রিভিউ পর্যালোচনা করুন, তারপর তৈরি হওয়া HTML বা row class কপি করুন।