Bootstrap Flex প্লেগ্রাউন্ড

Bootstrap Flex প্লেগ্রাউন্ড সম্পর্কে

Bootstrap Flex Playground আপনাকে raw CSS-এর বদলে প্রকৃত Bootstrap 5.3 utility class দিয়ে flexbox লেআউট তৈরি করতে দেয়। কনটেইনারটি কনফিগার করুন — direction, wrapping, justify-content, align-items, gap — segmented কন্ট্রোল দিয়ে, যেকোনো আইটেমে ক্লিক করে এর নিজস্ব align-self, order, grow ও shrink utility সেট করুন, এবং লাইভ প্রিভিউ তাৎক্ষণিকভাবে পুনর্বিন্যাস হতে দেখুন।

breakpoint switcher-ই এটিকে একটি খেলনার চেয়ে বেশি কিছু করে তোলে: sm, md, lg, xl বা xxl বেছে নিন এবং সেই বিন্দু থেকে আপনার সেট করা class-গুলো responsive infix পায় — justify-content-md-between, flex-lg-row — ঠিক যেভাবে Bootstrap-এর mobile-first সিস্টেম সেই breakpoint থেকে ওপরের দিকে এগুলো প্রয়োগ করে। একটি বাস্তবসম্মত কম্পোনেন্ট সিমুলেট করতে সর্বোচ্চ 12টি আইটেম যোগ করুন।

লেআউট ঠিক দেখালে, তৈরি হওয়া HTML বা শুধু কনটেইনার class কপি করে সরাসরি আপনার প্রজেক্টে পেস্ট করুন। সবকিছু আপনার ব্রাউজারে চলে এবং কিছুই আপলোড করা হয় না।

Bootstrap Flex প্লেগ্রাউন্ড কীভাবে ব্যবহার করবেন

1. segmented কন্ট্রোল দিয়ে কনটেইনার utility সেট করুন — direction, wrap, justify-content, align-items এবং gap।
2. আপনার প্রকৃত কম্পোনেন্টের সাথে মেলাতে আইটেম (2 থেকে 12) যোগ বা অপসারণ করুন।
3. একটি আইটেমকে তার নিজস্ব align-self, order বা flex sizing utility দিতে এতে ক্লিক করুন।
4. sm, md, lg, xl বা xxl থেকে ওপরের দিকে প্রয়োগ হয় এমন responsive ভ্যারিয়েন্ট যোগ করতে breakpoint পরিবর্তন করুন।
5. লাইভ প্রিভিউ পরীক্ষা করুন, তারপর তৈরি হওয়া HTML বা কনটেইনার class কপি করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন