Bootstrap چیٹ شیٹ

مفت

قابلِ تلاش اور قابلِ پرنٹ Bootstrap 5.3 حوالہ — گرڈ، اسپیسنگ، ٹائپوگرافی، رنگ، flex یوٹیلیٹیز، بٹنز، فارمز اور کمپوننٹس۔ مفت۔

Grid & layout

<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

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

<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

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

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

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

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

<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

<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

<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

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 چیٹ شیٹ استعمال کرنے کا طریقہ

گرڈ اور لے آؤٹ اور اسپیسنگ یوٹیلیٹیز سے لے کر کمپوننٹس اور مددگار عناصر تک، سیکشنز پر ایک نظر ڈالیں۔
شیٹ کو فوری فلٹر کرنے کے لیے gap، rounded یا d-flex جیسی کوئی یوٹیلیٹی تلاش کریں۔
اسٹکی سائیڈبار کے ذریعے Flex utilities یا Forms جیسے سیکشن پر جائیں۔
کسی کلاس یا اسنپٹ، یا اس کے کاپی آئیکن، پر کلک کر کے اسے اپنے مارک اپ میں کاپی کریں۔
اپنے ایڈیٹر کے ساتھ کلاس نام کے حوالے کے لیے شیٹ پرنٹ کریں۔

اکثر پوچھے جانے والے سوالات

Bootstrap 5.3۔ دکھائی گئی یوٹیلیٹیز اور کمپوننٹ کلاسز موجودہ 5.3 نام رکھنے کے طریقے سے میل کھاتی ہیں، بشمول جدید Bootstrap پروجیکٹس میں استعمال ہونے والے اسپیسنگ، فلیکس اور رنگ کے کنونشنز۔

گیارہ سیکشنز: گرڈ اور لے آؤٹ، اسپیسنگ یوٹیلیٹیز، ٹائپوگرافی، رنگ اور بیک گراؤنڈز، فلیکس یوٹیلیٹیز، ڈسپلے اور پوزیشن، سائزنگ اور بارڈرز، بٹنز، فارمز، کمپوننٹس اور مددگار عناصر۔

جی ہاں۔ اسپیسنگ سیکشن مارجن اور پیڈنگ کلاس کا پیٹرن بیان کرتا ہے — property، sides، breakpoints اور سائز اسکیل — جو کہ Bootstrap کا سب سے زیادہ استعمال ہونے والا حصہ ہے۔

جی ہاں۔ کسی بھی اسنپٹ یا اس کے کاپی آئیکن پر کلک کریں اور کلاسز آپ کے کلپ بورڈ پر آ جاتی ہیں، آپ کے HTML میں پیسٹ کرنے کے لیے تیار۔

جی ہاں، مکمل طور پر مفت — کلائنٹ سائیڈ، تلاش کے قابل اور پرنٹ کے قابل، بغیر کسی لاگ ان کے۔

Bootstrap چیٹ شیٹ

Grid & layout

Spacing utilities

Typography

Colors & background

Flex utilities

Display & position

Sizing & borders

Buttons

Forms

Components

Helpers & misc

Bootstrap چیٹ شیٹ کے بارے میں

Bootstrap چیٹ شیٹ استعمال کرنے کا طریقہ

اکثر پوچھے جانے والے سوالات

یہ شیٹ Bootstrap کا کون سا ورژن کور کرتی ہے؟

اس میں کیا شامل ہے؟

کیا یہ اسپیسنگ یوٹیلیٹی کے نام رکھنے کے طریقے کی وضاحت کرتی ہے؟

کیا میں ایک کلک سے کلاس نام کاپی کر سکتا ہوں؟

کیا Bootstrap کا یہ حوالہ مفت ہے؟

متعلقہ ٹولز

مقبول تلاشیں

یہ ٹول ایمبیڈ کریں