বুটস্ট্রাপ ৪
টুইটার বুটস্ট্রাপ হলো একটা এইচ টি এম এল,সি এস এস,জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যার সর্বশেষ সংস্করণ হলো বুটস্ট্রাপ ৪ , মূলত দ্রুত ওয়েব পেজ ও ওয়েব অ্যাপ্লিকেশন তৈরী করার জন্যে এটা ব্যাপকভাবে ব্যাবহৃত ।
কন্ট্রিবিউটর
রেস্পন্সিভ ফিক্স উইড
<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>
বোল্ড টেক্সট
<p class='font-weight-bold'>...</p>ইটালিক টেক্সট
<p class='font-italic'>...</p>লাইট উইড টেক্সট
<p class='font-weight-light'>...</p>লেফট অ্যালাইন
<p class='text-left'>...</p>রাইট অ্যালাইন
<p class='text-right'>...</p>জাস্টিফাই টেক্সট
<p class='text-justify'>...</p>আপারকেস টেক্সট
<p class='text-uppercase'>...</p>ক্যাপিটালাইস টেক্সট
<p class='text-capitalize'>...</p>
স্ট্রাইপ টেবিল
<table class='table-striped'>...</table>বর্ডার টেবিল
<table class='table-bordered'>...</table>বর্ডার ছাড়া টেবিল
<table class='table-borderedless'>...</table>মাউস হোভারে বিজি কালার পরিবর্তন টেবিল
<table class='table-hover'>...</table>ডার্ক কালার টেবিল
<table class='table-dark'>...</table>রেস্পন্সিভ টেবিল
<div class='table-responsive'><table>...</table></div>
বামে ভাসানো
<div class='float-left'>...</div>ডানে ভাসানো
<div class='float-right'>...</div>না ভাসানো
<div class='float-none'>...</div>স্ক্রীন প্রস্থ যখন ৫৭৬ পিক্সেল এর সমান বা বড়
<div class='float-sm-left'>...</div>, <div class='float-sm-right'>...</div>স্ক্রীন প্রস্থ যখন ৭৬৮ পিক্সেল এর সমান বা বড়
<div class='float-md-left'>...</div>, <div class='float-md-right'>...</div>স্ক্রীন প্রস্থ যখন ৯৯২ পিক্সেল এর সমান বা বড়
<div class='float-lg-left'>...</div>, <div class='float-lg-right'>...</div>স্ক্রীন প্রস্থ যখন ১২০০ পিক্সেল এর সমান বা বড়
<div class='float-xl-left'>...</div>, <div class='float-xl-right'>...</div>
প্রদর্শন না করা
<div class='d-none'> Display None </div>ইনলাইন
<div class='d-inline'> Display Inline </div>ইনলাইন ব্লক
<div class='d-inline-block'> Display Inline Block </div>ব্লক
<div class='d-block'> Display Block </div>টেবিল
<div class='d-table'> Display Table </div>টেবিল সেল
<div class='d-table-cell'> Display Table Cell </div>টেবিল রো
<div class='d-table-row'> Display Table Row </div>ফ্লেক্স
<div class='d-flex'> Display Flex </div>ইনলাইন ফ্লেক্স
<div class='d-inline-flex'> Display Inline Flex </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='row justify-content-start'><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-center'><div class='col'>...</div><div class='col'>...</div></div>সব কলাম ডানে বামে সমান গ্যাপে দেখানো
<div class='row'><div class='col justify-content-around'>...</div></div>
ডিসপ্লে ওয়ান
<h1 class='display-1'>Display 1</h1>ডিসপ্লে টু
<h1 class='display-2'>Display 2</h1>ডিসপ্লে থ্রি
<h1 class='display-3'>Display 3</h1>ডিসপ্লে ফোর
<h1 class='display-4'>Display 4</h1>
রাউন্ড কর্নার
<img class='rounded'>বৃত্ত আকার
<img class='rounded-circle'>বড়ি আকার
<img class='rounded-pill'>লেফট অ্যালাইন
<img class='float-left'>রাইট অ্যালাইন
<img class='float-right'>সেন্টার অ্যালাইন
<img class='d-block mx-auto'>রিস্পন্সিভ ইমেজ
<img class='img-fluid'>রাউন্ড কর্নার এবং বর্ডার এক সাথে
<img class='img-thumbnail'>
প্রাথমিক
<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>প্রান্তরেখা প্রাথমিক
<button type='button' class='btn btn-outline-primary'>Primary</button>প্রান্তরেখা মাধ্যমিক
<button type='button' class='btn btn-outline-secondary'>Secondary</button>প্রান্তরেখা সাফল্য
<button type='button' class='btn btn-outline-success'>Success</button>প্রান্তরেখা বিপদ
<button type='button' class='btn btn-outline-danger'>Danger</button>প্রান্তরেখা সতর্কতা
<button type='button' class='btn btn-outline-warning'>Warning</button>প্রান্তরেখা তথ্য
<button type='button' class='btn btn-outline-info'>Info</button>প্রান্তরেখা সামান্য
<button type='button' class='btn btn-outline-light'>Light</button>প্রান্তরেখা অন্ধকার
<button type='button' class='btn btn-outline-dark'>Dark</button>বড়
<button type='button' class='btn btn-primary btn-lg'>Large button</button>ছোট
<button type='button' class='btn btn-primary btn-sm'>Small button</button>বন্ধ
<button type='button' class='btn-close' aria-label='Close'></button>বন্ধ সাদা
<button type='button' class='btn-close btn-close-white' aria-label='Close'></button>