এই পেজের মধ্যে আমরা বুটস্ট্রাপ গ্রীড লে-আউটের কিছু বেসিকে উদাহরণ দেয়ার চেষ্টা করেছি।

তিনটি সমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে সমান প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবেঃ

kt_satt_skill_example_id=1268

তিনটি অসমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

kt_satt_skill_example_id=1270

দুটি অসমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

kt_satt_skill_example_id=1272

দুটি কলামের মধ্যে আরো দুটি নেস্টেড কলাম

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। দুটি কলামের মধ্যে বড় কলামটিকে আবার সমান দুই ভাগে ভাগ করা হয়েছে। মোবাইল ডিভাইসের ক্ষেত্রে সবগুলো কলামই নিচে নিচে অবস্থান করবেঃ

kt_satt_skill_example_id=1274

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

বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছে: xs(মোবাইল), sm(ট্যাবলেট), md(ডেস্কটপ) and lg(বড় ডেস্কটপ)। ডাইনামিক ও ফ্লেক্সিবল লে-আউট তৈরি করার ক্ষেত্রে ক্লাসগুলো একত্রে ব্যবহার করা যায়।

টিপস: বুটস্ট্রাপ গ্রীড সিস্টেমে ছোট ক্লাসগুলোকে বেশি প্রাধান্য দেয়া হয়েছে। আপনি যদি xs এবং sm ক্লাসে একই লে-আউট পেতে চান তাহলে শুধুমাত্র xs ক্লাস উল্লেখ করলেই হবে।

kt_satt_skill_example_id=1276

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

kt_satt_skill_example_id=1278

ফ্লোট ক্লিয়ার

নির্দিষ্ট ব্রেকপয়েন্টে অদ্ভুত wrapping প্রতিরোধ করতে ফ্লোট ক্লিয়ার করুন(.clearfix ক্লাসের মাধ্যমে):

kt_satt_skill_example_id=1279

কলাম অফসেট

কলামকে ডানদিকে সরিয়ে নেয়ার জন্য .col-*-offset-* ক্লাস ব্যবহার করুন। এটি কলামের বাম দিকের মার্জিন বৃদ্ধি(কলামের প্রস্থের সমান) করেঃ

kt_satt_skill_example_id=1280

Push এবং Pull - কলাম ক্রম পরিবর্তন

গ্রীড কলামের ক্রম পরিবর্তন করার জন্য .col-*-push-* ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1282