বুটস্ট্রাপ ৫

রেস্পন্সিভ ফিক্স উইড

<div class='container'>...</div>

ফুল উইড

<div class='container-fluid'>...</div>

সব কলাম উপরে দেখানো

<div class='row align-items-start'><div class='col'>...</div><div class='col'>...</div></div>

সব কলাম মাঝে দেখানো

<div class='row align-items-center'><div class='col'>...</div><div class='col'>...</div></div>

সব কলাম নিচে দেখানো

<div class='row align-items-end'><div class='col'>...</div><div class='col'>...</div></div>

একটি কলাম উপরে দেখানো

<div class='row'><div class='col align-self-start'>...</div></div>

একটি কলাম মাঝে দেখানো

<div class='row'><div class='col align-self-center'>...</div></div>

একটি কলাম নিচে দেখানো

<div class='row'><div class='col align-self-end'>...</div></div>

ডিসপ্লে ওয়ান

<h1 class='display-1'>Display 1</h1>

ডিসপ্লে টু

<h2 class='display-2'>Display 2</h2>

ডিসপ্লে থ্রি

<h3 class='display-3'>Display 3</h3>

ডিসপ্লে ফোর

<h4 class='display-4'>Display 4</h4>

ডিসপ্লে ফাইভ

<h5 class='display-5'>Display 5</h5>

ডিসপ্লে সিক্স

<h6 class='display-6'>Display 6</h6>

রাউন্ড কর্নার

<img class='rounded'>

বৃত্ত আকার

<img class='rounded-circle'>

লেফট অ্যালাইন

<img class='float-start'>

রাইট অ্যালাইন

<img class='float-end'>

সেন্টার অ্যালাইন

<img class='d-block mx-auto'>

রিস্পন্সিভ ইমেজ

<img class='img-fluid'>

রাউন্ড কর্নার এবং বর্ডার এক সাথে

<img class='img-thumbnail'>

প্রাথমিক

<div class='alert alert-primary' role='alert'>A simple primary alert—check it out!</div>

মাধ্যমিক

<div class='alert alert-secondary' role='alert'>A simple secondary alert—check it out!</div>

সাফল্য

<div class='alert alert-success' role='alert'>A simple success alert—check it out!</div>>

বিপদ

<div class='alert alert-danger' role='alert'>A simple danger alert—check it out!</div>

সতর্কতা

<div class='alert alert-warning' role='alert'>A simple warning alert—check it out!</div>

তথ্য

<div class='alert alert-info' role='alert'>A simple info alert—check it out!</div>

সামান্য

<div class='alert alert-light' role='alert'>A simple light alert—check it out!</div>

অন্ধকার

<div class='alert alert-dark' role='alert'>A simple dark alert—check it out!</div>

সংযুক্ত

<div class='alert alert-link' role='alert'>A simple link alert—check it out!</div>

খারিজযোগ্য

<div class='alert alert-dismissible' role='alert'>A simple dismissible alert—check it out!</div>

ক্যারোসেল-ফেইড-অ্যানিমেশন

<div class='carousel-fade' data-bs-ride='carousel'>

ক্যারোসেল-ইনডিকেটর

 <div class='carousel-indicators'><button type='button' data-bs-slide-to='1'></button><button type='button' data-bs-slide-to='2'></button></div>

ক্যারোসেল-আইটেম

<div class='carousel-item'>......</div>

ক্যারোসেল-ক্যাপশন

<div class='carousel-caption'>......</div>

অ্যাবসল্যুট পজিশন

<div class='position-absolute'></div>

রিলেটিভ পজিশন

<div class='position-relative'></div>

সেন্টার এলিমেন্ট

<div class='position-absolute top-0 start-0 translate-middle'></div>

টপ ০

<div class='top-0'></div>

লেফ্ট ০

<div class='start-0'></div>

প্রাইমারি বাটন

<button type='button' class='btn btn-primary'>Primary</button>

সেকেন্ডারি বাটন

<button type='button' class='btn btn-secondary'>Secondary</button>

সাক্সসেস বাটন

<button type='button' class='btn btn-success'>Success</button>

ডেঞ্জার বাটন

<button type='button' class='btn btn-danger'>Danger</button>

ওয়ার্নিং বাটন

<button type='button' class='btn btn-warning'>Warning</button>

ইনফো বাটন

<button type='button' class='btn btn-info'>Info</button>

লাইট বাটন

<button type='button' class='btn btn-light'>Light</button>

ডার্ক বাটন

<button type='button' class='btn btn-dark'>Dark</button>

লিঙ্ক বাটন

<button type='button' class='btn btn-link'>Link</button>

স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর ছোট

<div class='col-'>...</div>

স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর সমান বা বড়

<div class='col-sm'>...</div>

স্ক্রীন প্রস্থ যখন ৭৬৮পিক্সেল এর সমান বা বড়

<div class='col-md'>...</div>

স্ক্রীন প্রস্থ যখন ৯৯২পিক্সেল এর সমান বা বড়

<div class='col-lg'>...</div>

স্ক্রীন প্রস্থ যখন ১২০০পিক্সেল এর সমান বা বড়

<div class='col-xl'>...</div>

স্ক্রীন প্রস্থ যখন ১৪০০পিক্সেল এর সমান বা বড়

<div class='col-xxl'>...</div>

সব কলাম বামে দেখানো

<div class='row justify-content-start'><div class='col'>...</div><div class='col'>...</div></div>

সব কলাম মাঝে দেখানো

<div class='row justify-content-center'><div class='col'>...</div><div class='col'>...</div></div>

সব কলাম ডানে দেখানো

<div class='row justify-content-end'><div class='col'>...</div><div class='col'>...</div></div>

সব কলাম ডানে বামে সমান গ্যাপে দেখানো

<div class='row justify-content-around'><div class='col'>...</div></div>

সব কলাম এর মাঝে সমান গ্যাপে দেখানো

<div class='row justify-content-between'><div class='col'>...</div></div>

সব কলাম সমান গ্যাপে দেখানো

<div class='row justify-content-evenly'><div class='col'>...</div></div>

হেডিং ওয়ান

<p class='h1'>h1. Bootstrap heading</p>

হেডিং টু

<p class='h2'>h2. Bootstrap heading</p>

হেডিং থ্রি

<p class='h3'>h3. Bootstrap heading</p>

হেডিং ফোর

<p class='h4'>h4. Bootstrap heading</p>

হেডিং ফাইভ

<p class='h5'>h5. Bootstrap heading</p>

হেডিং সিক্স

<p class='h6'>h6. Bootstrap heading</p>

টেবিল রো প্রাইমারি কালার

<tr class='table-primary'>

টেবিল রো সেকেন্ডারি কালার

<tr class='table-secondary'>

টেবিল রো সাক্সেস কালার

<tr class='table-success'>

টেবিল রো ডেঞ্জার কালার

<tr class='table-danger'>

টেবিল রো ওয়ার্নিং কালার

<tr class='table-warning'>

টেবিল রো ইনফো কালার

<tr class='table-info'>

টেবিল রো লাইট কালার

<tr class='table-light'>

টেবিল রো ডার্ক কালার

<tr class='table-dark'>

টেবিল স্ট্রাইপ দেখানো

<table class='table table-striped'>

টেবিল হোভার দেখানো

<table class='table table-hover'>

টেবিল রো তে একটিভ স্টাইল দেখানো

<tr class='table-active'>

টেবিল সেল এ একটিভ স্টাইল দেখানো

<td class='table-active'>

টেবিলে বর্ডার দেখানো

<table class='table table-bordered'>

টেবিলের বর্ডার বাতিল করা

<table class='table table-borderless'>

টেবিলের সাইজ ছোট করা

<table class='table table-sm'>

টেবিলের ক্যাপশন এড করা

<table class='table caption-top'><caption>List of users</caption>

টেবিলের সাইজ ছোট করা

<table class='table table-sm'>

ফিগার্স নেওয়ার জন্য

<figure class='figure'>.....</figure>

ফিগার্সে ছবি যুক্ত করার জন্য

<img src='...' class='figure-img img-fluid rounded' alt='...'>

ফিগার্সে ক্যাপশন যুক্ত করার জন্য

<figcaption class='figure-caption'>A caption for the above image.</figcaption>

মোডাল-ফেইড-এনিমেশন

<div class='modal fade' id='modalID'>

মোডাল স্ক্রিনের মাঝামাঝি রাখা

 <div class='modal-dialog modal-dialog-centered'>

লম্বা কন্টেন্ট স্ক্রল-এবল মোডাল

<div class='modal-dialog modal-dialog-scrollable'>

মোডাল এ ডায়নামিক কন্টেন্ট দেখানো

<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#modalID' data-bs-whatever=@mdo'>Open modal for @mdo</button>

উপরের মার্জিনে স্পেসিং দেওয়ার জন্য

mt

নিচের মার্জিনে স্পেসিং দেওয়ার জন্য

mb

মার্জিন শুরু দিক থেকে বামে ডানে দেওয়ার জন্য

ms

মার্জিন শেষের দিক থেকে ডানে বামে দেওয়ার জন্য

me

মার্জিন ডানে বামে দুইদিকেই একসাথে দেওয়ার জন্য

mx

মার্জিন ডানে বামে দুইদিকে সমান করে সেন্টার করার জন্য

<div class='mx-auto'>Centered</div>

মার্জিন উপরে নিচে দুইদিকেই একসাথে দেওয়ার জন্য

my

উপরে নেগেটিভ মার্জিন দেওয়ার জন্য

mt-n

নিচে নেগেটিভ মার্জিন দেওয়ার জন্য

mb-n

উপরের প্যাডিং স্পেসিং দেওয়ার জন্য

pt

নিচে প্যাডিং স্পেসিং দেওয়ার জন্য

pb

প্যাডিং শুরু দিক থেকে বামে ডানে দেওয়ার জন্য

ps

প্যাডিং শুরু দিক থেকে ডানে বামে দেওয়ার জন্য

pe

প্যাডিং ডানে বামে দুইদিকেই একসাথে দেওয়ার জন্য

px

প্যাডিং উপরে নিচে দুইদিকেই একসাথে দেওয়ার জন্য

py

উপরে নেগেটিভ প্যাডিং দেওয়ার জন্য

pt-n

নিচে নেগেটিভ প্যাডিং দেওয়ার জন্য

pb-n

ডিভের মধ্যে গ্যাপ দেওয়ার জন্য

<div class='gap-3'> </div>

576 পিক্সের এর সমান বা এর থেকে ছোট সাইজের জন্য

sm

768 পিক্সের এর সমান বা এর থেকে ছোট সাইজের জন্য

md

992 পিক্সের এর সমান বা এর থেকে ছোট সাইজের জন্য

lg

1200 পিক্সের এর সমান বা এর থেকে ছোট সাইজের জন্য

xl

1400 পিক্সের এর সমান বা এর থেকে ছোট সাইজের জন্য

xxl