বুটস্ট্রাপ ৫

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

<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='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>