বুটস্ট্রাপ ৪

ডেভসংকেত

টুইটার বুটস্ট্রাপ হলো একটা এইচ টি এম এল,সি এস এস,জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যার সর্বশেষ সংস্করণ হলো বুটস্ট্রাপ ৪ , মূলত দ্রুত ওয়েব পেজ ও ওয়েব অ্যাপ্লিকেশন তৈরী করার জন্যে এটা ব্যাপকভাবে ব্যাবহৃত ।

কন্টেনার ক্লাস

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

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

ফুল উইড

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

হরিজেন্টাল আলাইনমেন্ট

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

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

টাইপোগ্রাফি ক্লাস

বোল্ড টেক্সট

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

ইমেজ ক্লাস

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

<img class='rounded'>

বৃত্ত আকার

<img class='rounded-circle'>

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

<img class='float-left'>

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

<img class='float-right'>

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

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

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

<img class='img-fluid'>
ডেভসংকেত

বাংলা চিটশিটের ভান্ডার

devsonket.com

প্রিন্ট করুন