পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য Class সহ একটি Grid এর উদাহরন দেখিয়েছিলাম।
আমরা সেখানে দুইটি divs (কলাম ) ব্যবহার করেছিলাম এবুং আমরা সেখানে 25%/75% এর বিভক্তি দেখিয়েছি।
<div class="col-sm-3">....</div> <div class="col-sm-9">....</div>
কিন্তু মাঝারি ডিভাইসের জন্য সব থেকে ভাল হবে যদি 50%/50% ব্যবহার করা হয়।
নির্দেশনাঃ মাঝারি রকমের ডিভাইসের Screen সাইজ সাধারণত 992 pixels থেকে 1199 pixels হয়ে থাকে ।
মাঝারি ডিভাইসের জন্য আমরা .col-md-* classes ব্যবহার করব।
এখন আমরা Medium Device এর জন্য কলাম এর বিস্তার ব্যবহার করা দেখবঃ
<div class="col-sm-3 col-md-6">....</div> <div class="col-sm-9 col-md-6">....</div>
এখন Bootstrap এর মতে বলা যায়, Small সাইজের জন্য খেয়াল কর আমরা -sm- class ব্যবহার করেছি। Medium সাইজের জন্য খেয়াল কর আমরা -md- class ব্যবহার করেছি।
নিচের উদাহরন Small Device এর জন্য 25%/75% Split ফলাফল প্রদর্শন করবে আর। Medium Device এর জন্য 50%/50% Split ফলাফল প্রদর্শন করবেঃ
উদাহরনঃ
<div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-3 col-md-6" style="background-color:lavender;"> <p>Lorem ipsum...</p> </div> <div class="col-sm-9 col-md-6" style="background-color:lavenderblush;"> <p>Sed ut perspiciatis...</p> </div> </div> </div>
ফলাফল : ছোট ও মাঝারি ডিভাইস
