Bootstrap চিট শিট
অনুসন্ধানযোগ্য, প্রিন্টযোগ্য Bootstrap 5.3 রেফারেন্স — গ্রিড, স্পেসিং, টাইপোগ্রাফি, রঙ, flex ইউটিলিটি, বাটন, ফর্ম এবং কম্পোনেন্ট। বিনামূল্যে।
Grid ও layout
12<div class="container">
Fixed-width responsive container
<div class="container-fluid">
প্রতি breakpoint-এ full-width container
<div class="container-md">
md breakpoint পর্যন্ত 100% প্রশস্ত
<div class="row">
Grid row, column ধারণ করে
<div class="col">
Equal-width auto column
<div class="col-6">
12-এর মধ্যে 6 column জুড়ে
<div class="col-md-4">
md breakpoint থেকে 4 column
<div class="col-auto">
content অনুযায়ী column-এর আকার
<div class="offset-md-2">
column ডানে 2 column push করুন
<div class="row g-3">
column-এর মাঝে gutter spacing
<div class="row row-cols-3">
প্রতি row-তে 3 সমান column force করুন
<div class="order-2">
flex/grid column পুনর্বিন্যাস করুন
Spacing utility
12m-3
সব দিকে margin (scale 0-5)
mt-2
Margin top
mx-auto
center-এ auto horizontal margin
p-4
সব দিকে padding
py-2
উল্লম্ব padding (উপর ও নিচ)
ms-3
Margin start (LTR-তে বাম, RTL-aware)
me-3
Margin end (LTR-তে ডান, RTL-aware)
ps-2
Padding start, RTL-aware
pe-2
Padding end, RTL-aware
gap-3
flex/grid আইটেমের মাঝে gap
m-n1
Negative margin
p-md-5
md থেকে responsive padding
টাইপোগ্রাফি
14<h1>..<h6>
ডিফল্ট styling সহ heading level
<p class="display-1">
বড় display heading (display-1..6)
<p class="lead">
প্রাধান্যপূর্ণ lead paragraph
fw-bold
Bold font weight
fw-semibold
Semibold font weight
fst-italic
Italic font style
text-center
টেক্সট center-align করুন
text-start
টেক্সট start-align, RTL-aware
text-end
টেক্সট end-align, RTL-aware
text-truncate
ellipsis দিয়ে overflow truncate করুন
text-uppercase
টেক্সট uppercase-এ রূপান্তর করুন
fs-1
Responsive font size (fs-1..6)
lh-base
Base line height (lh-1, lh-sm, lh-lg)
font-monospace
Monospace font family
রঙ ও background
10text-primary
Primary টেক্সট রঙ
bg-primary
Primary background রঙ
bg-primary-subtle
Subtle primary background আভা
text-primary-emphasis
Emphasis primary টেক্সট, theme-aware
text-bg-primary
auto-contrast টেক্সট সহ primary bg
link-primary
রঙিন link helper
bg-opacity-50
50% background opacity প্রয়োগ করুন
text-body-secondary
Muted secondary body টেক্সট
text-body-emphasis
High-emphasis body টেক্সট
border-primary-subtle
Subtle primary border রঙ
Flex utility
10d-flex
flex container তৈরি
flex-row
আইটেম row-তে সাজান
flex-column
আইটেম column-এ সাজান
justify-content-between
main axis বরাবর আইটেম space করুন
align-items-center
cross axis-এ আইটেম center করুন
flex-wrap
আইটেম wrap-এর অনুমতি
flex-grow-1
আইটেমকে space পূরণে grow করতে দিন
flex-fill
সমান flexible width force করুন
align-self-end
একটি আইটেম end-এ align করুন
flex-md-row
md থেকে responsive flex direction
Display ও position
12d-none
element লুকান
d-md-block
md breakpoint থেকে block হিসেবে দেখান
position-relative
Relative positioning
position-absolute
Absolute positioning
position-fixed
Fixed positioning
position-sticky
Sticky positioning
top-0 start-0
top-left-এ pin, RTL-aware
translate-middle
transform translate-এ center করুন
fixed-top
element viewport-এর উপরে fix করুন
sticky-top
scroll-এ উপরে stick করুন
z-3
z-index সেট করুন (z-0..3)
invisible
লুকান কিন্তু layout space রাখুন
Sizing ও border
12w-100
parent-এর 100% width
w-50
parent-এর 50% width
h-100
parent-এর 100% height
mw-100
Max-width 100%
vh-100
viewport-এর 100% height
border
সব দিকে ডিফল্ট border যোগ করুন
border-0
সব border সরান
border-primary
border রঙ করুন
rounded
ডিফল্ট border-radius
rounded-pill
সম্পূর্ণ rounded pill আকৃতি
rounded-circle
Circular border-radius
shadow-sm
ছোট box shadow (shadow, shadow-lg)
Button
9<button class="btn btn-primary">
Solid primary button
<button class="btn btn-outline-primary">
Outline button variant
<button class="btn btn-lg">
বড় button (btn-sm-ও)
<button class="btn btn-link">
link-এর মতো styled button
<button class="btn-close">
সাধারণ close (×) button
<button class="btn disabled">
Disabled button state
<button class="btn active">
Active button state
<div class="d-grid"><button class="btn">
d-grid-এ full-width block button
<div class="btn-group">
button একসাথে group করুন
Form
11<input class="form-control">
Styled text input
<label class="form-label">
Form ফিল্ড label
<select class="form-select">
Styled select dropdown
<div class="form-check">
Checkbox/radio wrapper
<input class="form-check-input">
Styled checkbox বা radio input
<div class="form-check form-switch">
Toggle switch component
<input class="form-control-lg">
বড় input (form-control-sm-ও)
<div class="input-group">
add-on সহ input group করুন
is-invalid
Invalid validation state (is-valid)
<div class="form-floating">
Floating label input
col-form-label
horizontal form-এর জন্য aligned label
Component
14<div class="card">
Flexible content card
<nav class="navbar navbar-expand-lg">
Responsive navigation bar
data-bs-toggle="modal" data-bs-target="#m"
modal ডায়ালগ ট্রিগার করুন
data-bs-toggle="dropdown"
dropdown menu toggle করুন
data-bs-toggle="collapse"
collapsible element toggle করুন
<div class="accordion">
Stacked collapsible panel
<div class="alert alert-dismissible">
Dismissible alert message
<span class="badge text-bg-primary">
ছোট count বা label badge
<ul class="list-group">
আইটেমের styled list
<ul class="nav nav-tabs">
Tabbed navigation
<div class="toast">
Lightweight toast notification
<div class="offcanvas">
Off-canvas sidebar panel
<div class="spinner-border">
Loading spinner indicator
<nav><ul class="pagination">
Paginated navigation link
Helper ও বিবিধ
11data-bs-theme="dark"
scope-এ dark color mode চালু করুন
<div class="ratio ratio-16x9">
Responsive aspect-ratio box
visually-hidden
দৃশ্যত লুকান, screen reader-এর জন্য রাখুন
visually-hidden-focusable
focus পর্যন্ত লুকানো (skip link)
stretched-link
parent সম্পূর্ণ clickable করুন
clearfix
floated child clear করুন
<div class="vstack gap-2">
element-এর উল্লম্ব stack
<div class="hstack gap-2">
element-এর অনুভূমিক stack
<a class="icon-link">
inline icon-এর সাথে aligned link
<div class="progress">
Progress bar container
<nav class="breadcrumb">
Breadcrumb navigation trail
“:q”-এর সাথে কোনো এন্ট্রি মেলে না।
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।