Bootstrap Case: একাধিক কলাম এর বিন্যাস (Multicolumn Layout)

একাধিক কলাম এর বিন্যাস

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>

 

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-multicolumn-layout/