বুটস্ট্রাপ ৪

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

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

ক্লিয়ার ফ্লোটস

<div class='clearfix'>...</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>

প্রান্তরেখা প্রাথমিক

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