Bootstrap चीट शीट
खोजने और प्रिंट करने योग्य Bootstrap 5.3 संदर्भ — ग्रिड, स्पेसिंग, टाइपोग्राफी, रंग, flex यूटिलिटी, बटन, फ़ॉर्म और कंपोनेंट। निःशुल्क।
Grid और layout
12<div class="container">
निश्चित-चौड़ाई responsive container
<div class="container-fluid">
हर breakpoint पर पूर्ण-चौड़ाई container
<div class="container-md">
md breakpoint तक 100% चौड़ा
<div class="row">
Grid row, column रखता है
<div class="col">
समान-चौड़ाई auto column
<div class="col-6">
12 में से 6 column फैलाता है
<div class="col-md-4">
md breakpoint से ऊपर 4 column
<div class="col-auto">
अपनी सामग्री के अनुसार आकार वाला column
<div class="offset-md-2">
column को दाईं ओर 2 column खिसकाएं
<div class="row g-3">
column के बीच gutter spacing
<div class="row row-cols-3">
प्रति row 3 समान column बाध्य करें
<div class="order-2">
flex/grid column पुनः क्रमित करें
Spacing उपयोगिताएं
12m-3
सभी ओर margin (scale 0-5)
mt-2
Margin top
mx-auto
केंद्र हेतु auto क्षैतिज margin
p-4
सभी ओर padding
py-2
लंबवत padding (ऊपर और नीचे)
ms-3
Margin start (LTR में बाएं, RTL-जागरूक)
me-3
Margin end (LTR में दाएं, RTL-जागरूक)
ps-2
Padding start, RTL-जागरूक
pe-2
Padding end, RTL-जागरूक
gap-3
flex/grid आइटम के बीच gap
m-n1
ऋणात्मक margin
p-md-5
md से ऊपर responsive padding
Typography
14<h1>..<h6>
डिफ़ॉल्ट styling के साथ heading स्तर
<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
टेक्स्ट केंद्र-संरेखित करें
text-start
टेक्स्ट start-संरेखित, RTL-जागरूक
text-end
टेक्स्ट end-संरेखित, RTL-जागरूक
text-truncate
ellipsis के साथ overflow छोटा करें
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
रंग और पृष्ठभूमि
10text-primary
Primary टेक्स्ट रंग
bg-primary
Primary background रंग
bg-primary-subtle
सूक्ष्म primary background tint
text-primary-emphasis
जोर primary टेक्स्ट, theme-जागरूक
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
उच्च-जोर body टेक्स्ट
border-primary-subtle
सूक्ष्म primary border रंग
Flex उपयोगिताएं
10d-flex
flex कंटेनर बनाएँ
flex-row
आइटम को row में रखें
flex-column
आइटम को column में रखें
justify-content-between
main axis पर आइटम में space दें
align-items-center
cross axis पर आइटम केंद्र करें
flex-wrap
आइटमों को wrap होने दें
flex-grow-1
आइटम को space भरने हेतु बढ़ने दें
flex-fill
समान लचीली चौड़ाई बाध्य करें
align-self-end
एक आइटम को end पर संरेखित करें
flex-md-row
md से responsive flex दिशा
Display और position
12d-none
एलिमेंट छिपाएं
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 पर पिन करें, RTL-जागरूक
translate-middle
transform translate से केंद्र करें
fixed-top
एलिमेंट को viewport के शीर्ष पर स्थिर करें
sticky-top
scroll पर शीर्ष पर चिपकें
z-3
z-index सेट करें (z-0..3)
invisible
छिपाएं पर layout space रखें
Sizing और border
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
सभी border हटाएं
border-primary
border को रंग दें
rounded
डिफ़ॉल्ट border-radius
rounded-pill
पूरी तरह गोल pill आकार
rounded-circle
गोलाकार border-radius
shadow-sm
छोटा box shadow (shadow, shadow-lg)
Button
9<button class="btn btn-primary">
ठोस primary button
<button class="btn btn-outline-primary">
Outline button संस्करण
<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">
अक्षम button स्थिति
<button class="btn active">
सक्रिय button स्थिति
<div class="d-grid"><button class="btn">
d-grid से पूर्ण-चौड़ाई block button
<div class="btn-group">
button एक साथ समूहित करें
फ़ॉर्म
11<input class="form-control">
Styled टेक्स्ट input
<label class="form-label">
फ़ॉर्म फ़ील्ड 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 घटक
<input class="form-control-lg">
बड़ा input (form-control-sm भी)
<div class="input-group">
add-on के साथ input समूहित करें
is-invalid
अमान्य सत्यापन स्थिति (is-valid)
<div class="form-floating">
Floating label input
col-form-label
क्षैतिज फ़ॉर्म हेतु संरेखित label
घटक
14<div class="card">
लचीला 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 टॉगल करें
data-bs-toggle="collapse"
collapsible एलिमेंट टॉगल करें
<div class="accordion">
Stacked collapsible panel
<div class="alert alert-dismissible">
खारिज योग्य alert संदेश
<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">
हल्की toast सूचना
<div class="offcanvas">
Off-canvas sidebar panel
<div class="spinner-border">
Loading spinner संकेतक
<nav><ul class="pagination">
Paginated navigation link
Helper और विविध
11data-bs-theme="dark"
किसी scope पर dark रंग मोड सक्षम करें
<div class="ratio ratio-16x9">
Responsive aspect-ratio box
visually-hidden
दृश्यतः छिपाएं, screen reader हेतु रखें
visually-hidden-focusable
focus तक छिपा (skip link)
stretched-link
parent को पूरी तरह क्लिक करने योग्य बनाएं
clearfix
floated child साफ़ करें
<div class="vstack gap-2">
एलिमेंट का लंबवत stack
<div class="hstack gap-2">
एलिमेंट का क्षैतिज stack
<a class="icon-link">
inline icon के साथ संरेखित link
<div class="progress">
Progress bar container
<nav class="breadcrumb">
Breadcrumb navigation trail
कोई प्रविष्टि “:q” से मेल नहीं खाती।
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।