একাধিক কলাম এর বিন্যাস
Bootstrap ব্যবহার করে সহজেই multicolumn layout তৈরি করা যায় ।
Bootstrap একটি প্রতিক্রিয়াশীল এবং mobile-first 12-column grid system দিয়ে থাকে।
বিভিন্ন স্ক্রীন সাইজে কলাম গুলো নিজেদের মধ্যে পুনরায় সজ্জিত হয়।
Grid এর লিছু নিয়মাবলিঃ
- একটি ধারক দিয়ে শুরু করুন ।
- <div class=”row”> দ্বারা এর মধ্যে সারি তৈরি করুন।
- দ্রুত Grid column তৈরির জন্য কিছু পূর্বনির্ধারিত ক্লাস যেমন .col-md-4, .col-md-6 ইত্যাদি ব্যবহার করুন।
- আপনার ইচ্ছা অনুযায়ী যেকোনো ১২ টি কলাম জুড়ে Grid কলাম তৈরি হয়।যেমনঃ তিনটি সমান কলামে তিনটি .col-MD-4 কলাম ব্যবহার করতে হবে
- .col – *- * ক্লাস এর মধ্যের সংখ্যা গুলো সবসময় প্রতিটি সারির 12 পর্যন্ত যোগ করা উচিত।
- বিষয়বস্তু Grid কলাম এর ভিতরে স্থাপন করা হয়।
উদাহরনঃ
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="col-md-3">
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
</div>
</div>
ভিন্ন প্রশস্ততা বিশিষ্ট কলাম
এখন আমরা ভিন্ন ভিন্ন প্রশস্ততা বিশিষ্ট কলাম তৈরি করতে চাই।
নিম্নলিখিত উদাহরণটি একটি তিন কলাম বিশিষ্ট কাঠামো তৈরি করে যেখানে মাঝখানের কলামটি প্রথম ও দ্বিতীয় কলাম থেকে বেশি প্রশস্থ।
উদাহরনঃ
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-6">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="col-md-3">
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
</div>
</div>
