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، columns رکھتی ہے
<div class="col">
equal-width auto column
<div class="col-6">
12 میں سے 6 columns پر پھیلتا ہے
<div class="col-md-4">
md breakpoint سے اوپر 4 columns
<div class="col-auto">
اپنے مواد کے مطابق sized column
<div class="offset-md-2">
column کو 2 columns دائیں دھکیلیں
<div class="row g-3">
columns کے درمیان gutter وقفہ
<div class="row row-cols-3">
ہر row میں زبردستی 3 برابر columns
<div class="order-2">
flex/grid column دوبارہ ترتیب دیں
spacing utilities
12m-3
تمام اطراف margin (scale 0-5)
mt-2
margin top
mx-auto
center کرنے کو خودکار افقی margins
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 items کے درمیان gap
m-n1
negative margin
p-md-5
md سے اوپر responsive padding
Typography
14<h1>..<h6>
ڈیفالٹ styling کے ساتھ heading levels
<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
overflow کو ellipsis سے truncate کریں
text-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
رنگ اور بیک گراؤنڈ
10text-primary
primary ٹیکسٹ رنگ
bg-primary
primary background رنگ
bg-primary-subtle
ہلکا primary background tint
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
ہلکا primary border رنگ
flex utilities
10d-flex
flex container بنائیں
flex-row
items کو row میں رکھیں
flex-column
items کو column میں رکھیں
justify-content-between
items کو main axis پر space کریں
align-items-center
items کو cross axis پر center کریں
flex-wrap
items کو wrap ہونے دیں
flex-grow-1
item کو space بھرنے کو grow ہونے دیں
flex-fill
زبردستی برابر flexible چوڑائیاں
align-self-end
ایک item کو 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 اور borders
12w-100
parent کی 100% چوڑائی
w-50
parent کی 50% چوڑائی
h-100
parent کی 100% اونچائی
mw-100
max-width 100%
vh-100
viewport کی 100% اونچائی
border
تمام اطراف ڈیفالٹ border شامل کریں
border-0
تمام borders ہٹائیں
border-primary
border کو رنگ دیں
rounded
ڈیفالٹ border-radius
rounded-pill
مکمل گول pill شکل
rounded-circle
دائروی border-radius
shadow-sm
چھوٹا box shadow (shadow، shadow-lg)
buttons
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">
buttons کو ایک ساتھ گروپ کریں
forms
11<input class="form-control">
styled text input
<label class="form-label">
form field 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-ons کے ساتھ inputs گروپ کریں
is-invalid
invalid validation state (is-valid)
<div class="form-floating">
floating label input
col-form-label
horizontal forms کے لیے aligned label
components
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 dialog چلائیں
data-bs-toggle="dropdown"
dropdown menu toggle کریں
data-bs-toggle="collapse"
collapsible element toggle کریں
<div class="accordion">
stacked collapsible panels
<div class="alert alert-dismissible">
dismissible alert پیغام
<span class="badge text-bg-primary">
چھوٹا count یا label badge
<ul class="list-group">
items کی styled list
<ul class="nav nav-tabs">
tabbed navigation
<div class="toast">
ہلکی toast notification
<div class="offcanvas">
off-canvas sidebar panel
<div class="spinner-border">
loading spinner indicator
<nav><ul class="pagination">
paginated navigation links
helpers اور متفرق
11data-bs-theme="dark"
scope پر dark color mode فعال کریں
<div class="ratio ratio-16x9">
responsive aspect-ratio box
visually-hidden
بصری طور پر چھپائیں، screen readers کے لیے رکھیں
visually-hidden-focusable
focus تک چھپا (skip links)
stretched-link
parent کو مکمل clickable بنائیں
clearfix
floated children صاف کریں
<div class="vstack gap-2">
elements کی عمودی stack
<div class="hstack gap-2">
elements کی افقی stack
<a class="icon-link">
inline icon کے ساتھ aligned link
<div class="progress">
progress bar container
<nav class="breadcrumb">
breadcrumb navigation trail
کوئی اندراج “:q” سے میل نہیں کھاتا۔
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔