পূর্বের অধ্যায়ে আমরা ছোট (small) এবং মাঝারি (medium) device এর জন্য class সহ grid এর উদাহরণ আলোচনা করেছি। সেখানে দুইটি div রেখে হয়, যাদের ছোট device এর জন্য ২৫% /৭৫% এবং মাঝারি device এর জন্য ৫০% /৫০% ভাগে ভাগ (split) করা হয়।
<div class="col-sm-3 col-md-6">....</div> <div class="col-sm-9 col-md-6">....</div>
তবে বড় (Large) device এর ক্ষেত্রে দুইটি div-কে ৩৩% /৬৬% ভাগে ভাগ করা যেতে পারে।
টিপস: বড় device এর ক্ষেত্রে সাধারণত screen এর width 1200 pixel বা তার বেশি হিসাবে গণনা করা হয়।
বড় device এর ক্ষেত্রে .col-lg-* class ব্যবহার করা হয়।
এখন আমরা বড় device এর ক্ষেত্রে column এর width যোগ করবো:
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
সুতরাং Bootstrap আলোচনার এই পর্যায়ে দেখা যাচ্ছে যে, ছোট (small) device এর ক্ষেত্রে -sm-, মাঝারি (medium) device এর ক্ষেত্রে -md-এবং বড় (Large) device এর ক্ষেত্রে -lg- class ব্যবহার করা উত্তম।
নিম্নোক্ত উদাহরণে দেখানো হয়েছে যে, div দুইটি, ছোট (small) device এর ক্ষেত্রে ২৫% /৭৫%, মাঝারি (medium) device এর ক্ষেত্রে ৫০% /৫০% এবং বড় (Large) device এর ক্ষেত্রে ৩৩% /৬৬% এ বিভক্ত (split) হয়ে যায়:
<div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:lavender;"> <p>Lorem ipsum...</p> </div> <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:lavenderblush;"> <p>Sed ut perspiciatis...</p> </div> </div> </div>
ফলাফল : ছোট, মাঝারি ও বড় ডিভাইস
