Bootstrap চিট শিট

সব টুল
বিনামূল্যে

অনুসন্ধানযোগ্য, প্রিন্টযোগ্য Bootstrap 5.3 রেফারেন্স — গ্রিড, স্পেসিং, টাইপোগ্রাফি, রঙ, flex ইউটিলিটি, বাটন, ফর্ম এবং কম্পোনেন্ট। বিনামূল্যে।

Grid & layout

12
<div class="container">
Fixed-width responsive container
<div class="container-fluid">
Full-width container at every breakpoint
<div class="container-md">
100% wide until the md breakpoint
<div class="row">
Grid row, holds columns
<div class="col">
Equal-width auto column
<div class="col-6">
Spans 6 of 12 columns
<div class="col-md-4">
4 columns from the md breakpoint up
<div class="col-auto">
Column sized to its content
<div class="offset-md-2">
Push column 2 columns to the right
<div class="row g-3">
Gutter spacing between columns
<div class="row row-cols-3">
Force 3 equal columns per row
<div class="order-2">
Reorder a flex/grid column

Spacing utilities

12
m-3
Margin on all sides (scale 0-5)
mt-2
Margin top
mx-auto
Auto horizontal margins to center
p-4
Padding on all sides
py-2
Vertical padding (top and bottom)
ms-3
Margin start (left in LTR, RTL-aware)
me-3
Margin end (right in LTR, RTL-aware)
ps-2
Padding start, RTL-aware
pe-2
Padding end, RTL-aware
gap-3
Gap between flex/grid items
m-n1
Negative margin
p-md-5
Responsive padding from md up

Typography

14
<h1>..<h6>
Heading levels with default styling
<p class="display-1">
Large display heading (display-1..6)
<p class="lead">
Stand-out lead paragraph
fw-bold
Bold font weight
fw-semibold
Semibold font weight
fst-italic
Italic font style
text-center
Center-align text
text-start
Start-align text, RTL-aware
text-end
End-align text, RTL-aware
text-truncate
Truncate overflow with ellipsis
text-uppercase
Transform text to 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

Colors & background

10
text-primary
Primary text color
bg-primary
Primary background color
bg-primary-subtle
Subtle primary background tint
text-primary-emphasis
Emphasis primary text, theme-aware
text-bg-primary
Primary bg with auto-contrast text
link-primary
Colored link helper
bg-opacity-50
Apply 50% background opacity
text-body-secondary
Muted secondary body text
text-body-emphasis
High-emphasis body text
border-primary-subtle
Subtle primary border color

Flex utilities

10
d-flex
Create a flex container
flex-row
Lay items in a row
flex-column
Lay items in a column
justify-content-between
Space items along the main axis
align-items-center
Center items on the cross axis
flex-wrap
Allow items to wrap
flex-grow-1
Let an item grow to fill space
flex-fill
Force equal flexible widths
align-self-end
Align a single item to the end
flex-md-row
Responsive flex direction from md

Display & position

12
d-none
Hide the element
d-md-block
Show as block from the md breakpoint
position-relative
Relative positioning
position-absolute
Absolute positioning
position-fixed
Fixed positioning
position-sticky
Sticky positioning
top-0 start-0
Pin to top-left, RTL-aware
translate-middle
Center via transform translate
fixed-top
Fix element to top of viewport
sticky-top
Stick to top on scroll
z-3
Set z-index (z-0..3)
invisible
Hide but keep layout space

Sizing & borders

12
w-100
Width 100% of parent
w-50
Width 50% of parent
h-100
Height 100% of parent
mw-100
Max-width 100%
vh-100
Height 100% of the viewport
border
Add a default border on all sides
border-0
Remove all borders
border-primary
Color the border
rounded
Default border-radius
rounded-pill
Fully rounded pill shape
rounded-circle
Circular border-radius
shadow-sm
Small 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">
Large button (also btn-sm)
<button class="btn btn-link">
Button styled like a link
<button class="btn-close">
Generic close (×) button
<button class="btn disabled">
Disabled button state
<button class="btn active">
Active button state
<div class="d-grid"><button class="btn">
Full-width block button via d-grid
<div class="btn-group">
Group buttons together

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 or radio input
<div class="form-check form-switch">
Toggle switch component
<input class="form-control-lg">
Large input (also form-control-sm)
<div class="input-group">
Group inputs with add-ons
is-invalid
Invalid validation state (is-valid)
<div class="form-floating">
Floating label input
col-form-label
Label aligned for horizontal forms

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"
Trigger a modal dialog
data-bs-toggle="dropdown"
Toggle a dropdown menu
data-bs-toggle="collapse"
Toggle a collapsible element
<div class="accordion">
Stacked collapsible panels
<div class="alert alert-dismissible">
Dismissible alert message
<span class="badge text-bg-primary">
Small count or label badge
<ul class="list-group">
Styled list of items
<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 links

Helpers & misc

11
data-bs-theme="dark"
Enable dark color mode on a scope
<div class="ratio ratio-16x9">
Responsive aspect-ratio box
visually-hidden
Hide visually, keep for screen readers
visually-hidden-focusable
Hidden until focused (skip links)
stretched-link
Make a parent fully clickable
clearfix
Clear floated children
<div class="vstack gap-2">
Vertical stack of elements
<div class="hstack gap-2">
Horizontal stack of elements
<a class="icon-link">
Link aligned with an inline icon
<div class="progress">
Progress bar container
<nav class="breadcrumb">
Breadcrumb navigation trail

“:q”-এর সাথে কোনো এন্ট্রি মেলে না।

Bootstrap চিট শিট সম্পর্কে

এই Bootstrap চিট শিট Bootstrap 5.3-কে লক্ষ্য করে তৈরি এবং আপনি প্রতিদিন যে ক্লাসের নাম টাইপ করেন তা সংগ্রহ করে: গ্রিড ও লেআউট, স্পেসিং ইউটিলিটি, টাইপোগ্রাফি, রং ও ব্যাকগ্রাউন্ড, ফ্লেক্স ইউটিলিটি, ডিসপ্লে ও পজিশন, সাইজিং ও বর্ডার, বাটন, ফর্ম, কম্পোনেন্ট এবং হেল্পার।

Bootstrap-এর উৎপাদনশীলতা মূলত শব্দভাণ্ডারের ওপর নির্ভরশীল — একটি ক্লাস আছে জানা এবং ব্রেকপয়েন্ট-সচেতন রূপে এটি কেমন দেখায় তা জানা। প্রতিটি সারিতে একটি ক্লাস বা মার্কআপ স্নিপেট এক লাইনের বিবরণসহ দেখানো হয়, তাই “ওই ইউটিলিটির নাম কী ছিল?” প্রশ্নের উত্তর ডকুমেন্টেশন ঘাঁটার বদলে একটি সার্চেই পাওয়া যায়।

শিটটি বিনামূল্যে এবং ক্লায়েন্ট-সাইডে কাজ করে। সার্চ বক্স দিয়ে ক্লাস ফিল্টার করুন, স্টিকি সূচিপত্র থেকে সেকশনে যান, এক ক্লিকে যেকোনো স্নিপেট কপি করুন এবং লেআউট তৈরির সময় রেফারেন্স হিসেবে পাতাটি প্রিন্ট করুন।

Bootstrap চিট শিট কীভাবে ব্যবহার করবেন

  1. সেকশনগুলো চোখ বুলিয়ে দেখুন, Grid & layout ও Spacing utilities থেকে শুরু করে Components ও Helpers & misc পর্যন্ত।
  2. gap, rounded বা d-flex-এর মতো কোনো ইউটিলিটি খুঁজে শিটটি তাৎক্ষণিকভাবে ফিল্টার করুন।
  3. স্টিকি সাইডবার দিয়ে Flex utilities বা Forms-এর মতো কোনো সেকশনে চলে যান।
  4. কোনো ক্লাস বা স্নিপেট, বা এর কপি আইকনে ক্লিক করে সেটি আপনার মার্কআপে কপি করুন।
  5. আপনার এডিটরের পাশে ক্লাস-নাম রেফারেন্স হিসেবে শিটটি প্রিন্ট করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

Bootstrap 5.3। দেখানো ইউটিলিটি ও কম্পোনেন্ট ক্লাসগুলো বর্তমান 5.3 নামকরণের সাথে মিলে যায়, আধুনিক Bootstrap প্রকল্পে ব্যবহৃত স্পেসিং, ফ্লেক্স ও কালার কনভেনশনসহ।

এগারোটি সেকশন: গ্রিড ও লেআউট, স্পেসিং ইউটিলিটি, টাইপোগ্রাফি, রং ও ব্যাকগ্রাউন্ড, ফ্লেক্স ইউটিলিটি, ডিসপ্লে ও পজিশন, সাইজিং ও বর্ডার, বাটন, ফর্ম, কম্পোনেন্ট এবং হেল্পার।

হ্যাঁ। স্পেসিং সেকশনে margin ও padding ক্লাসের প্যাটার্ন দেখানো হয়েছে — প্রপার্টি, দিক, ব্রেকপয়েন্ট এবং সাইজ স্কেল — যা Bootstrap-এর সবচেয়ে বেশি ব্যবহৃত অংশ।

হ্যাঁ। যেকোনো স্নিপেট বা এর কপি আইকনে ক্লিক করলেই ক্লাসগুলো আপনার ক্লিপবোর্ডে চলে আসে, HTML-এ পেস্ট করার জন্য প্রস্তুত।

হ্যাঁ, সম্পূর্ণ বিনামূল্যে — ক্লায়েন্ট-সাইড, সার্চযোগ্য ও প্রিন্টযোগ্য, লগইনের প্রয়োজন নেই।
শেয়ার করুন
সম্পর্কিত টুলসমূহ
CSS চিট শিট একটি অনুসন্ধানযোগ্য, প্রিন্টযোগ্য CSS রেফারেন্স — সিলেক্টর, box model, flexbox, grid, টাইপোগ্রাফি, ট্রানজিশন এবং আধুনিক ফিচার। বিনামূল্যে। বিনামূল্যে
SASS চিট শিট অনুসন্ধানযোগ্য, প্রিন্টযোগ্য Sass / SCSS রেফারেন্স — ভেরিয়েবল, নেস্টিং, @use মডিউল, মিক্সিন, ফাংশন, কন্ট্রোল ফ্লো এবং বিল্ট-ইন মডিউল। বিনামূল্যে। বিনামূল্যে
JavaScript চিট শিট আধুনিক JavaScript-এর একটি অনুসন্ধানযোগ্য, প্রিন্টযোগ্য রেফারেন্স — সিনট্যাক্স, অ্যারে, স্ট্রিং, অবজেক্ট, async/await, DOM এবং ES2022+ ফিচার। বিনামূল্যে। বিনামূল্যে
PHP চিট শিট একটি অনুসন্ধানযোগ্য, প্রিন্টযোগ্য PHP 8.3+ রেফারেন্স — সিনট্যাক্স, স্ট্রিং, অ্যারে, ফাংশন, ক্লাস, enum, অ্যাট্রিবিউট এবং আধুনিক ফিচার। বিনামূল্যে। বিনামূল্যে
MySQL চিট শিট একটি অনুসন্ধানযোগ্য, প্রিন্টযোগ্য MySQL রেফারেন্স — কুয়েরি, join, ইনডেক্স, ফাংশন, ডেটা টাইপ এবং অ্যাডমিনিস্ট্রেশন কমান্ড। বিনামূল্যে। বিনামূল্যে
Python চিট শিট একটি অনুসন্ধানযোগ্য, প্রিন্টযোগ্য Python 3 রেফারেন্স — সিনট্যাক্স, ডেটা স্ট্রাকচার, comprehension, ফাংশন, ক্লাস, ফাইল এবং স্ট্যান্ডার্ড লাইব্রেরি। বিনামূল্যে। বিনামূল্যে
জনপ্রিয় অনুসন্ধান
bootstrap cheat sheet bootstrap 5 classes list bootstrap grid classes bootstrap spacing utilities bootstrap flex utilities bootstrap button classes bootstrap form classes bootstrap 5 reference
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।
সমস্যা রিপোর্ট করুন

আপনার নিজের ওয়েবসাইটে এই বিনামূল্যের টুলটি যোগ করুন — নিচের কোডটি কপি করে পেস্ট করুন।