▦ Grid System — سیستم شبکه

Grid System بوت‌استرپ بر اساس ۱۲ ستون و Flexbox طراحی شده است. با ترکیب کلاس‌های container، row و col می‌توانید هر چیدمانی بسازید.

ⓘ قانون اصلی: هر .row داخل .container قرار می‌گیرد، و .col-* داخل .row. مجموع ستون‌ها در هر ردیف باید ۱۲ یا کمتر باشد.

۱. ستون‌های مساوی

col

<!-- col بدون عدد: فضا را به طور مساوی تقسیم می‌کند -->
<div class="row">
  <div class="col">ستون ۱</div>
  <div class="col">ستون ۲</div>
  <div class="col">ستون ۳</div>
</div>

۲. ستون‌های با عرض مشخص (از ۱۲)

col-8

col-4

col-6

col-3

col-6

col-3

<!-- مجموع اعداد در هر row باید ۱۲ شود -->
<div class="row">
  <div class="col-8">۸ ستون (۶۶٪)</div>
  <div class="col-4">۴ ستون (۳۳٪)</div>
</div>

<div class="row">
  <div class="col-3">۳ از ۱۲</div>
  <div class="col-6">۶ از ۱۲</div>
  <div class="col-3">۳ از ۱۲</div>
</div>

۳. Breakpoint های ریسپانسیو

کلاس	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
`.col-`	✓	—	—	—	—	—
`.col-sm-`	کامل	✓	—	—	—	—
`.col-md-`	کامل	کامل	✓	—	—	—
`.col-lg-`	کامل	کامل	کامل	✓	—	—
`.col-xl-`	کامل	کامل	کامل	کامل	✓	—

در موبایل: یک ستون | در تبلت: دو ستون | در دسکتاپ: چهار ستون

<!-- موبایل: full | تبلت: نصف | دسکتاپ: ربع -->
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">کارت ۱</div>
  <div class="col-12 col-md-6 col-lg-3">کارت ۲</div>
  <div class="col-12 col-md-6 col-lg-3">کارت ۳</div>
  <div class="col-12 col-md-6 col-lg-3">کارت ۴</div>
</div>

۴. Gutter (فاصله بین ستون‌ها) و Offset

g-0 تا g-5 فاصله بین ستون‌ها را کنترل می‌کند:

g-4

Offset — جابجایی ستون به سمت چپ:

col-4

col-4 offset-4

<!-- g-* کنترل fap بین ستون‌ها -->
<div class="row g-4">
  <div class="col-4">...</div>
  <div class="col-4">...</div>
  <div class="col-4">...</div>
</div>

<!-- offset: ستون را n ستون به چپ جابجا می‌کند -->
<div class="col-4 offset-4">وسط صفحه</div>

۵. Container

کلاس	xs	sm	md	lg	xl	xxl
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-fluid`	100% در همه breakpoint‌ها
`.container-md`	100%	100%	720px	960px	1140px	1320px

<!-- container با عرض ثابت در هر breakpoint -->
<div class="container">...</div>

<!-- container-fluid: همیشه 100% -->
<div class="container-fluid">...</div>

<!-- container-{bp}: از آن breakpoint به بعد ثابت می‌شود -->
<div class="container-lg">...</div>

💡 الگوی کامل: همیشه ترتیب container → row → col را رعایت کنید. col مستقیماً داخل row باشد، نه داخل container. برای nested grid، داخل یک col دوباره row بگذارید.

Typography (تایپوگرافی و نوشتار)

بوت‌استرپ امکانات گسترده‌ای برای استایل‌دهی به متون، عناوین، لیست‌ها و نقل‌قول‌ها ارائه می‌دهد.

۱. عناوین (Headings & Displays)

عناوین استاندارد (h1 تا h6)

عنوان سطح 1 (h1)

عنوان سطح 2 (h2)

عنوان سطح 3 (h3)

عنوان سطح 4 (h4)

عنوان سطح 5 (h5)

عنوان سطح 6 (h6)

عناوین نمایشی (Display)

نمایشی ۴

نمایشی ۵

نمایشی ۶

<!-- عناوین استاندارد -->
<h1>عنوان سطح 1 (h1)</h1>
<h2>عنوان سطح 2 (h2)</h2>

<!-- عناوین نمایشی (بزرگتر و جذاب‌تر برای تیترهای اصلی) -->
<h1 class="display-4">نمایشی 4</h1>
<h1 class="display-5">نمایشی 5</h1>

۲. عناصر درون‌خطی و پاراگراف (Inline Elements)

این یک پاراگراف از نوع .lead است. از این کلاس برای برجسته‌تر کردن پاراگراف‌های آغازین یا لیدِ مقالات استفاده می‌شود تا خواناتر باشند.

می‌توانید از تگ مارک (mark) برای هایلایت کردن متن استفاده کنید.

~~این متن با تگ del خط خورده است (برای حراجی‌ها یا متون حذف شده).~~

این متن با تگ ins زیرخط‌دار شده است (به معنی متن اضافه شده).

این متن با تگ small ریزتر نمایش داده می‌شود.

این متن با تگ strong کاملاً بولد و پررنگ است.

این متن با تگ em به صورت ایتالیک (کج) نمایش داده می‌شود.

<p class="lead">متن پاراگراف لید (برجسته‌تر)...</p>
<p>متن دارای <mark>هایلایت</mark></p>
<p><del>متن خط خورده</del></p>
<p><ins>متن اضافه شده (زیرخط‌دار)</ins></p>
<p><small>متن ریزتر</small></p>
<p><strong>متن بولد (ضخیم)</strong></p>
<p><em>متن ایتالیک (کج)</em></p>

۳. نقل‌قول‌ها (Blockquotes)

یک طراحی خوب، طراحی است که کمتر دیده شود و بیشتر احساس شود.

<figure class="bg-light p-4 rounded border-end border-4 border-primary">
  <blockquote class="blockquote">
    <p>یک طراحی خوب، طراحی است که کمتر دیده شود و بیشتر احساس شود.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    نام شخص در <cite title="Source Title">عنوان منبع</cite>
  </figcaption>
</figure>

۴. لیست‌ها (Lists)

لیست بدون استایل .list-unstyled:

این یک آیتم لیست است.
این یک آیتم لیست دیگر است.
- لیست‌های تودرتو استایل پیش‌فرض را حفظ می‌کنند.
آیتم آخر لیست.

لیست افقی .list-inline:

خانه
محصولات
درباره ما
تماس

<!-- لیست بدون نقطه/شماره -->
<ul class="list-unstyled">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
</ul>

<!-- لیست افقی (مناسب برای فوتر یا منوهای ساده) -->
<ul class="list-inline">
  <li class="list-inline-item">خانه</li>
  <li class="list-inline-item">محصولات</li>
  <li class="list-inline-item">درباره ما</li>
</ul>

Buttons (دکمه‌ها)

استایل‌های متنوع دکمه‌ها برای عملیات فرم‌ها، دیالوگ‌ها و موارد دیگر با پشتیبانی از اندازه‌ها و وضعیت‌های مختلف.

۱. دکمه‌های اصلی (Solid Buttons)

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

۲. دکمه‌های حاشیه‌دار (Outline Buttons)

در صورت نیاز به دکمه‌هایی که رنگ پس‌زمینه ندارند، از کلاس‌های outline استفاده کنید.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

۳. اندازه‌ها و وضعیت‌ها (Sizes & States)

لینک غیرفعال

<!-- اندازه‌ها -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- وضعیت غیرفعال (تگ دکمه) -->
<button type="button" class="btn btn-primary" disabled>Disabled button</button>

<!-- وضعیت غیرفعال (تگ لینک) -->
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled link</a>

۴. گروه دکمه‌ها (Button Groups)

چندین دکمه را در یک خط و کنار هم قرار دهید.

<!-- گروه دکمه اصلی -->
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">راست</button>
  <button type="button" class="btn btn-primary">وسط</button>
  <button type="button" class="btn btn-primary">چپ</button>
</div>

<!-- گروه دکمه حاشیه‌دار -->
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">راست</button>
  <button type="button" class="btn btn-outline-primary">وسط</button>
  <button type="button" class="btn btn-outline-primary">چپ</button>
</div>

Badges (نشان‌ها و برچسب‌ها)

از نشان‌ها برای نمایش شمارنده‌ها، وضعیت‌ها (مثل "جدید"، "در حال بررسی") و برچسب‌های رنگی استفاده می‌شود.

۱. رنگ‌های پس‌زمینه (Background Colors)

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

۲. بج‌های کپسولی (Pill Badges)

با اضافه کردن کلاس .rounded-pill گوشه‌های بج کاملاً گرد می‌شود.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<!-- نکته: برای رنگ‌های روشن از text-dark برای خوانایی استفاده کنید -->

۳. شمارنده‌ها و بج‌های شناور (Counters & Positioned)

<!-- بج ساده درون دکمه -->
<button type="button" class="btn btn-primary">
  اعلان‌ها <span class="badge bg-light text-dark ms-1">4</span>
</button>

<!-- بج شناور با عدد (گوشه دکمه) -->
<button type="button" class="btn btn-secondary position-relative">
  پیام‌های جدید
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">پیام خوانده نشده</span>
  </span>
</button>

<!-- بج شناور به صورت نقطه (بدون متن) -->
<button type="button" class="btn btn-dark position-relative">
  پروفایل
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"></span>
</button>

۴. مقیاس‌پذیری در عناوین (Headings)

بج‌ها به صورت خودکار اندازه خود را با عنصر والد (مثل تگ‌های h1 تا h6) تطبیق می‌دهند.

مقاله‌های آموزشی جدید

آپدیت نرم‌افزار v2.0

<h3>مقاله‌های آموزشی <span class="badge bg-secondary">جدید</span></h3>
<h5>آپدیت نرم‌افزار <span class="badge bg-success">v2.0</span></h5>

Cards (کارت‌ها)

کارت‌ها محفظه‌هایی با حاشیه و منعطف برای نمایش محتوا هستند. آن‌ها از تصاویر، متن، دکمه‌ها، هدر و فوتر پشتیبانی می‌کنند.

۱. کارت ساده (Basic Card)

عنوان کارت

یک متن کوتاه و نمونه برای قرار گرفتن در بدنه کارت و نمایش اطلاعات پایه به کاربر.

جزئیات بیشتر

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <p class="card-text">یک متن کوتاه و نمونه...</p>
    <a href="#" class="btn btn-primary">جزئیات بیشتر</a>
  </div>
</div>

۲. هدر و فوتر (Header & Footer)

مناسب برای پلن‌های قیمت‌گذاری، پنل‌های کاربری یا نمایش اطلاعاتی که نیاز به دسته‌بندی دارند.

مقاله ویژه

تکنولوژی‌های جدید در وب

با استفاده از هدر و فوتر می‌توانید ساختار منظمی به کارت‌های خود بدهید. متن‌ها می‌توانند وسط‌چین (text-center) باشند.

مطالعه کامل

منتشر شده در ۲ روز پیش

<div class="card text-center">
  <div class="card-header">مقاله ویژه</div>
  <div class="card-body">
    <h5 class="card-title">تکنولوژی‌های جدید</h5>
    <p class="card-text">متن توضیحات کارت در این بخش قرار می‌گیرد.</p>
    <a href="#" class="btn btn-success">مطالعه کامل</a>
  </div>
  <div class="card-footer text-muted">۲ روز پیش</div>
</div>

۳. کارت افقی (Horizontal Card)

با استفاده از کلاس‌های سیستم گرید بوت‌استرپ (row و col) در داخل کارت، می‌توانید عکس را در کنار متن قرار دهید.

کارت افقی (طراحی رسپانسیو)

این ساختار در موبایل به صورت عمودی و در دسکتاپ به صورت افقی نمایش داده می‌شود که برای لیست مقالات یا محصولات عالی است.

آخرین بروزرسانی ۳ دقیقه پیش

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">کارت افقی</h5>
        <p class="card-text">توضیحات مربوط به این کارت در اینجا قرار می‌گیرد.</p>
        <p class="card-text"><small class="text-muted">۳ دقیقه پیش</small></p>
      </div>
    </div>
  </div>
</div>

Forms (فرم‌ها)

فرم‌های بوت‌استرپ از انواع ورودی‌ها، انتخاب‌گرها، سوییچ‌ها و همچنین استایل‌های اعتبارسنجی برای بهبود تجربه کاربری پشتیبانی می‌کنند.

۱. ورودی‌های شناور (Floating Labels)

طراحی مدرنی که در آن لیبل (برچسب) در داخل اینپوت قرار دارد و هنگام کلیک به بالا می‌لغزد.

آدرس ایمیل

رمز عبور

<!-- Floating Label -->
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">آدرس ایمیل</label>
</div>

<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="رمز عبور">
  <label for="floatingPassword">رمز عبور</label>
</div>

۲. انتخاب‌گر، متن طولانی و آپلود فایل

آپلود عکس پروفایل

توضیحات تکمیلی

<!-- File Upload -->
<input class="form-control" type="file" id="formFile">

<!-- Select Dropdown -->
<select class="form-select">
  <option selected>انتخاب کنید...</option>
  <option value="1">گزینه اول</option>
</select>

<!-- Textarea Floating -->
<div class="form-floating">
  <textarea class="form-control" style="height: 100px"></textarea>
  <label>توضیحات</label>
</div>

۳. چک‌باکس، رادیو و سوییچ (Checks & Switches)

مرا به خاطر بسپار

پرداخت آنلاین

دریافت خبرنامه

<!-- Checkbox -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">چک‌باکس</label>
</div>

<!-- Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
  <label class="form-check-label" for="switch1">سوییچ (حالت روشن)</label>
</div>

۴. گروه‌های ورودی (Input Groups)

چسباندن آیکون، متن یا دکمه به فیلدهای ورودی.

<!-- Input with Addon -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="نام کاربری">
</div>

<!-- Input with Button -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="جستجو...">
  <button class="btn btn-primary" type="button">جستجو</button>
</div>

۵. اعتبارسنجی بصری (Validation)

با افزودن کلاس‌های is-valid یا is-invalid می‌توانید وضعیت فیلدها را به کاربر نشان دهید.

نام کاربری

این نام کاربری آزاد است!

شماره موبایل

لطفاً شماره موبایل را به صورت ۱۱ رقمی وارد کنید.

<!-- Success State -->
<input type="text" class="form-control is-valid" value="Mohammad">
<div class="valid-feedback">نام کاربری تایید شد.</div>

<!-- Error State -->
<input type="text" class="form-control is-invalid" value="0912">
<div class="invalid-feedback">شماره موبایل نامعتبر است.</div>

Alerts (هشدارها)

هشدارها برای ارائه بازخوردهای متنی بر اساس عملکرد کاربر استفاده می‌شوند. بوت‌استرپ از ۸ رنگ اصلی برای انتقال مفاهیم مختلف (موفقیت، خطا، هشدار و...) پشتیبانی می‌کند.

۱. هشدارهای متداول و لینک‌ها

با استفاده از کلاس .alert-link لینک‌های داخل هشدار، استایل و رنگ متناسب با همان هشدار را می‌گیرند.

یک پیام اطلاع‌رسانی ساده. این یک لینک هم‌رنگ است.

خطایی رخ داده است! لطفاً تنظیمات شبکه را بررسی کنید.

ظرفیت دیسک شما رو به اتمام است.

<!-- Primary Alert with Link -->
<div class="alert alert-primary" role="alert">
  یک پیام اطلاع‌رسانی. <a href="#" class="alert-link">لینک هم‌رنگ</a>.
</div>

<!-- Danger Alert -->
<div class="alert alert-danger" role="alert">
  خطایی رخ داده است!
</div>

۲. هشدارهای قابل بستن (Dismissible)

با افزودن دکمه .btn-close و کلاس‌های مربوطه، کاربر می‌تواند پیام را ببندد (نیاز به فایل جاوااسکریپت بوت‌استرپ دارد).

عالی! اطلاعات پروفایل شما با موفقیت به‌روزرسانی شد.

<!-- Dismissible Alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>عالی!</strong> اطلاعات با موفقیت به‌روزرسانی شد.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

۳. ترکیب با آیکون‌ها

می‌توانید با استفاده از ابزارهای Flexbox بوت‌استرپ، آیکون‌های دلخواه را کنار متن هشدار قرار دهید.

نکته: برای استفاده از تمام امکانات، لطفاً ایمیل خود را تایید کنید.

<!-- Alert with Icon (Using Flexbox) -->
<div class="alert alert-info d-flex align-items-center gap-2" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1...zM8 5.5a1...z"/>
  </svg>
  <div>
    <strong>نکته:</strong> پیام شما در اینجا قرار می‌گیرد.
  </div>
</div>

۴. هشدار با محتوای تکمیلی (Additional Content)

هشدارها می‌توانند شامل تگ‌های HTML مختلفی مانند عناوین (Headings)، پاراگراف‌ها و خطوط جداکننده باشند.

خوش آمدید!

شما با موفقیت حساب کاربری خود را ایجاد کردید. اکنون به تمامی بخش‌های پنل کاربری دسترسی دارید و می‌توانید اطلاعات خود را تکمیل کنید.

هر زمان که نیاز به راهنمایی داشتید، به بخش پشتیبانی مراجعه کنید.

<!-- Alert with Additional Content -->
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">خوش آمدید!</h4>
  <p>شما با موفقیت حساب کاربری خود را ایجاد کردید. اکنون دسترسی کامل دارید.</p>
  <hr>
  <p class="mb-0">برای راهنمایی بیشتر به <a href="#" class="alert-link">پشتیبانی</a> مراجعه کنید.</p>
</div>

Modals (پنجره‌های پاپ‌آ‍پ)

مودال‌ها دیالوگ‌باکس‌هایی هستند که برای اعلان‌ها، فرم‌های ورود یا تایید عملیات استفاده می‌شوند. آن‌ها روی محتوای صفحه قرار می‌گیرند و تعامل کاربر را جلب می‌کنند.

۱. مودال استاندارد (Basic)

<!-- Button trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">تایید حذف</button>

<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">محتوا...</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
      </div>
    </div>
  </div>
</div>

۲. پس‌زمینه ثابت (اجبار کاربر به پاسخ)

با تنظیم data-bs-backdrop="static"، مودال با کلیک روی فضای بیرون بسته نمی‌شود.

<!-- Static Backdrop Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog">
    ...
  </div>
</div>

۳. تراز وسط (Centered) و اسکرول داخلی

<!-- Vertically Centered -->
<div class="modal-dialog modal-dialog-centered">...</div>

<!-- Scrollable Body -->
<div class="modal-dialog modal-dialog-scrollable">...</div>

۴. اندازه‌های مختلف (Sizes)

<!-- Extra Large -->
<div class="modal-dialog modal-xl">...</div>

<!-- Small -->
<div class="modal-dialog modal-sm">...</div>

<!-- Full Screen -->
<div class="modal-dialog modal-fullscreen">...</div>

Offcanvas (منوی کشویی / سایدبار مخفی)

کامپوننت Offcanvas برای ایجاد سایدبارهای مخفی که از لبه‌های مختلف صفحه وارد می‌شوند استفاده می‌شود. این ابزار جایگزین عالی برای منوهای موبایل و پنل‌های سبد خرید است.

۱. جهت‌های قرارگیری (Placements)

منوهای کشویی می‌توانند از ۴ جهت بالا، پایین، شروع (راست در فارسی) و پایان (چپ در فارسی) باز شوند.

در صفحات RTL (راست‌چین)، کلاس offcanvas-start از سمت راست باز می‌شود.

در صفحات RTL، کلاس offcanvas-end از سمت چپ باز می‌شود (مناسب پنل کاربری).

ایده‌آل برای فرم‌های جستجوی پیشرفته در بالای سایت.

مناسب برای نمایش ابزارهای موبایل (Bottom Sheet).

<!-- Button -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offStart">Start</button>

<!-- Offcanvas Start, End, Top, Bottom -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offStart">...</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offEnd">...</div>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offTop">...</div>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offBottom">...</div>

۲. رفتار اسکرول و پس‌زمینه (Backdrop)

به صورت پیش‌فرض با باز شدن Offcanvas، صفحه اصلی تیره شده و اسکرول آن قفل می‌شود. می‌توانید این رفتار را تغییر دهید.

در حالی که این منو باز است، می‌توانید صفحه اصلی را اسکرول کنید و روی عناصر دیگر کلیک کنید.

ویژگی‌ها:
data-bs-scroll="true"
data-bs-backdrop="false"

در این حالت هاله تاریک (Backdrop) وجود دارد، اما همچنان با اسکرول ماوس می‌توانید صفحه زیرین را جابجا کنید.

ویژگی‌ها:
data-bs-scroll="true"

<!-- Enable Scroll, Disable Backdrop -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offScrollOnly">
  ...
</div>

<!-- Enable Scroll WITH Backdrop -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offScrollAndBackdrop">
  ...
</div>

۳. سایدبار با تم تیره (Dark Theme)

<!-- اضافه کردن text-bg-dark به والد و btn-close-white به دکمه بستن -->
<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="offDark">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">عنوان</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    محتوای تیره...
  </div>
</div>

Spinners (نشانگرهای بارگذاری)

اسپینرها برای نشان دادن وضعیت بارگذاری یا پردازش یک عملیات استفاده می‌شوند. بوت‌استرپ دو نوع اصلی دارد: spinner-border (چرخشی) و spinner-grow (ضربانی).

۱. انواع و رنگ‌بندی

با استفاده از کلاس‌های رنگ متن (text-*) می‌توانید رنگ اسپینرها را به راحتی تغییر دهید.

<!-- Border Spinner -->
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Grow Spinner -->
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

۲. اندازه‌ها (Sizing)

برای اندازه‌های کوچک از کلاس‌های .spinner-border-sm و .spinner-grow-sm استفاده کنید. برای اندازه‌های بزرگ‌تر، از ابزارهای عرض و ارتفاع (w-*, h-*) یا CSS سفارشی بهره ببرید.

<!-- Custom Size via CSS -->
<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>

<!-- Small Size via Class -->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

۳. ترازبندی (Alignment)

برای مرکز قراردادن اسپینر در یک کانتینر، از ابزارهای Flexbox مانند d-flex justify-content-center استفاده کنید.

<!-- Centered Spinner -->
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

۴. کاربرد در دکمه‌ها (Buttons)

این یکی از رایج‌ترین کاربردهای اسپینر است. حتماً دکمه را در حالت disabled قرار دهید تا از کلیک‌های مجدد جلوگیری شود.

<!-- Button with Spinner and Text -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  در حال ارسال...
</button>

<!-- Button with Spinner-Grow -->
<button class="btn btn-dark" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  بارگذاری...
</button>

Progress (نوار پیشرفت)

نوارهای پیشرفت برای نمایش روند تکمیل یک عملیات یا درصد یک پارامتر استفاده می‌شوند. در بوت‌استرپ ۵، نوارها با استفاده از ویژگی width (در استایل یا کلاس‌های 유تیلیتی) مقداردهی می‌شوند.

۱. پایه و برچسب‌گذاری

شما می‌توانید به سادگی با قرار دادن متن داخل .progress-bar، درصد یا وضعیت را به کاربر نمایش دهید.

25%

در حال پردازش (50%)

<!-- Basic Progress with Label -->
<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

<!-- Using Width Utility Class (w-50) -->
<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-50">50%</div>
</div>

۲. رنگ‌بندی

با استفاده از کلاس‌های bg-* می‌توانید رنگ نوارها را تغییر دهید تا مفهوم وضعیت‌های مختلف (مثل موفقیت، خطا یا هشدار) را برسانند.

<!-- Success Progress -->
<div class="progress" role="progressbar">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>

<!-- Warning Progress -->
<div class="progress" role="progressbar">
  <div class="progress-bar bg-warning text-dark" style="width: 75%"></div>
</div>

۳. تنظیم ارتفاع و نوارهای ترکیبی (Stacked)

شما می‌توانید با استایل‌دهی مستقیم (height) ارتفاع نوار را کم یا زیاد کنید. همچنین می‌توان چند نوار را داخل یک .progress قرار داد.

ارتفاع کم (1px):

ارتفاع زیاد (20px):

نوارهای ترکیبی (چندگانه):

<!-- Custom Height -->
<div class="progress" style="height: 1px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

<!-- Stacked Progress Bars (Bootstrap 5.3+) -->
<div class="progress-stacked">
  <div class="progress" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
</div>

۴. هاشورخورده (Striped) و متحرک (Animated)

کلاس .progress-bar-striped یک افکت راه‌راه روی نوار ایجاد می‌کند و .progress-bar-animated باعث حرکت این هاشورها می‌شود (مفید برای نشان دادن در جریان بودن عملیات).

درحال آپلود...

<!-- Striped Progress -->
<div class="progress" role="progressbar">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>

<!-- Striped & Animated Progress -->
<div class="progress" role="progressbar">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-dark" style="width: 75%">
    درحال آپلود...
  </div>
</div>

Navbars (نوار ناوبری)

نوار ناوبری (Navbar) هسته اصلی منوهای سایت را تشکیل می‌دهد. بوت‌استرپ از کامپوننت‌های قدرتمندی برای مدیریت ریسپانسیو بودن، تغییر رنگ و یکپارچه‌سازی با سایر بخش‌ها پشتیبانی می‌کند.

۱. نوار ناوبری کامل (با دراپ‌داون و فرم)

این مثال شامل لوگو، لینک‌های اصلی، یک منوی بازشو (Dropdown)، لینک غیرفعال و یک فرم جستجو است. در حالت موبایل تمامی این موارد در یک منوی همبرگری جمع می‌شوند.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">لوگو</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarComplete">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarComplete">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">خانه</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">محصولات</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">موبایل</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control ms-2" type="search" placeholder="جستجو...">
        <button class="btn btn-outline-success" type="submit">بگرد</button>
      </form>
    </div>
  </div>
</nav>

۲. طرح‌های رنگی (Color Schemes)

با تغییر کلاس‌های bg-* و کلاس تعیین‌کننده کنتراست متن یعنی navbar-dark یا navbar-light (در نسخه‌های جدیدتر data-bs-theme="dark") می‌توانید ظاهر منو را عوض کنید.

<!-- Dark Theme -->
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">تم تیره</a>
  </div>
</nav>

<!-- Primary Color Theme -->
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">تم آبی</a>
  </div>
</nav>

۳. نوار ناوبری با منوی کشویی (Offcanvas)

در بوت‌استرپ ۵ می‌توانید به جای باز شدن ساده منو به سمت پایین، از offcanvas در داخل نوار ناوبری استفاده کنید تا در موبایل یک منوی کناری جذاب داشته باشید. (برای دیدن اثر این بخش، مرورگر خود را کوچک کنید تا آیکون همبرگری ظاهر شود).

<!-- Navbar with Offcanvas -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">برند سایت</a>
    <!-- دکمه باز کننده منوی کناری -->
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- بدنه منوی کناری -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">منوی کاربری</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1">
          <li class="nav-item"><a class="nav-link active" href="#">داشبورد</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Pagination (صفحه‌بندی)

از کلاس‌های صفحه‌بندی برای جابجایی بین صفحات یک لیست طولانی استفاده می‌شود. بوت‌استرپ از فلکس‌باکس (Flexbox) برای تراز کردن و استایل‌دهی به این المان‌ها بهره می‌برد.

۱. حالت پایه و وضعیت‌ها (Active & Disabled)

با استفاده از کلاس .active صفحه فعلی را مشخص کنید و با .disabled لینک‌های غیرقابل کلیک (مانند دکمه قبلی در صفحه اول) را نمایش دهید.

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" tabindex="-1">قبلی</a></li>
    <li class="page-item"><a class="page-link" href="#">۱</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">۲</a></li>
    <li class="page-item"><a class="page-link" href="#">بعدی</a></li>
  </ul>
</nav>

۲. استفاده از نمادها (Icons)

می‌توانید به جای کلمات "قبلی" و "بعدی" از نمادهای HTML استفاده کنید. دقت کنید که برای دسترس‌پذیری (Accessibility) از aria-label استفاده شده است.

<li class="page-item">
  <a class="page-link" href="#" aria-label="Previous">
    <span aria-hidden="true">&laquo;</span>
  </a>
</li>

۳. تغییر سایز (Sizing)

با افزودن کلاس‌های .pagination-lg یا .pagination-sm می‌توانید ابعاد دکمه‌ها را تغییر دهید.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination pagination-sm">...</ul>

۴. تراز‌بندی (Alignment)

به کمک کلاس‌های یوتیلیتی Flexbox مانند .justify-content-center یا .justify-content-end مکان قرارگیری صفحه‌بندی را مشخص کنید.

<ul class="pagination justify-content-center">...</ul>
<ul class="pagination justify-content-end">...</ul>

Accordion (آکاردئون)

آکاردئون‌ها برای جمع‌کردن و نمایش محتوای طولانی در فضایی کوچک استفاده می‌شوند. این کامپوننت از پلاگین Collapse بوت‌استرپ استفاده می‌کند.

۱. حالت پایه (Basic)

در حالت پیش‌فرض، باز کردن یک آیتم باعث بسته شدن سایر آیتم‌ها می‌شود. این کار با استفاده از ویژگی data-bs-parent انجام می‌گیرد.

این بدنه آیتم اول آکاردئون است. به طور پیش‌فرض باز است. شما می‌توانید محتوای HTML دلخواه خود را در این قسمت قرار دهید.

این بدنه آیتم دوم آکاردئون است. این بخش به طور پیش‌فرض پنهان است و با کلیک روی هدر باز می‌شود.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        آیتم اول
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">محتوای آیتم اول</div>
    </div>
  </div>
</div>

۲. بدون حاشیه (Flush)

با افزودن کلاس .accordion-flush حاشیه‌های بیرونی و گردی گوشه‌ها حذف می‌شود تا آکاردئون به زیبایی در لبه‌های کانتینر والد خود جای بگیرد.

محتوای آیتم اول در حالت Flush. خطوط دور حذف شده‌اند.

محتوای آیتم دوم در حالت Flush.

<div class="accordion accordion-flush" id="accordionFlush">...</div>

۳. همیشه باز (Always Open)

اگر ویژگی data-bs-parent را از روی آیتم‌ها حذف کنید، باز کردن یک آیتم باعث بسته شدن بقیه نمی‌شود و می‌توان چند آیتم را همزمان باز نگه داشت.

باز کردن آیتم‌های دیگر باعث بسته شدن من نمی‌شود!

من هم مستقل از سایر آیتم‌ها باز و بسته می‌شوم.

<!-- دقت کنید که خصوصیت data-bs-parent در اینجا حذف شده است -->
<div id="collapseOne" class="accordion-collapse collapse show">...</div>

Carousel (اسلایدر عکس)

کاروسل یا اسلایدر یک کامپوننت برای چرخیدن میان عناصر (تصاویر یا اسلاید‌های متنی) است. در این مثال‌ها از تصاویر SVG رنگی به عنوان جایگزین (Placeholder) برای نمایش آفلاین استفاده شده است.

۱. دکمه‌های کنترل (Controls)

با افزودن دکمه‌های بعدی و قبلی، کاربر می‌تواند به صورت دستی اسلایدها را تغییر دهد.

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <!-- اسلایدهای بعدی -->
  </div>
  <button class="carousel-control-prev" data-bs-target="#carouselExampleControls" data-bs-slide="prev">...</button>
  <button class="carousel-control-next" data-bs-target="#carouselExampleControls" data-bs-slide="next">...</button>
</div>

۲. نشانگرها (Indicators) و کپشن (Captions)

می‌توانید خطوط/نقاط پایین اسلایدر (Indicators) و توضیحات متنی (Captions) را برای هر اسلاید اضافه کنید.

عنوان اسلاید اول

این یک توضیح تستی برای اسلاید اول است که در پایین نمایش داده می‌شود.

عنوان اسلاید دوم

این یک توضیح تستی برای اسلاید دوم است که در پایین نمایش داده می‌شود.

عنوان اسلاید سوم

این یک توضیح تستی برای اسلاید سوم است که در پایین نمایش داده می‌شود.

<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></button>
</div>
<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="..." class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h5>عنوان</h5>
      <p>متن توضیحات</p>
    </div>
  </div>
</div>

۳. افکت محو شدن (Crossfade)

با اضافه کردن کلاس .carousel-fade به تگ والد، افکت جابجایی اسلایدها از لغزشی به محو شدن (Fade) تغییر می‌کند.

<!-- افزودن کلاس carousel-fade -->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  ...
</div>

منوهای کشویی (Dropdowns)

منوهای کشویی ابزارهایی برای نمایش لیستی از لینک‌ها یا اکشن‌ها هستند. در بوت‌استرپ ۵، این منوها با استفاده از Popper.js موقعیت‌دهی می‌شوند و نیازمند ویژگی data-bs-toggle="dropdown" هستند.

۱. منوی کشویی پایه (Basic Dropdown)

یک دکمه ساده که با کلیک روی آن، یک منوی استاندارد باز می‌شود.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    منوی کشویی ساده
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">اقدام اول</a></li>
    <li><a class="dropdown-item" href="#">اقدام دوم</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">لینک جدا شده</a></li>
  </ul>
</div>

۲. دکمه دو تکه (Split Button)

با استفاده از کلاس .dropdown-toggle-split می‌توانید دکمه اصلی و فلش بازشونده را از هم جدا کنید.

<div class="btn-group">
  <button type="button" class="btn btn-danger">اقدام اصلی</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">ویرایش</a></li>
    <li><a class="dropdown-item" href="#">حذف</a></li>
  </ul>
</div>

۳. تم تیره و محتوای داخلی (Dark & Content)

افزودن .dropdown-menu-dark برای حالت تاریک. همچنین می‌توانید از هدر (.dropdown-header) و متن ساده (.dropdown-item-text) استفاده کنید.

<div class="dropdown">
  <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
    گزینه‌های پیشرفته
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><h6 class="dropdown-header">عنوان منو</h6></li>
    <li><a class="dropdown-item active" href="#">گزینه فعال</a></li>
    <li><a class="dropdown-item disabled" href="#">گزینه غیرفعال</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><span class="dropdown-item-text">متن ساده فقط برای نمایش</span></li>
  </ul>
</div>

۴. جهت‌های باز شدن (Dropup / Dropend / Dropstart)

برای تغییر جهت باز شدن منو، به جای کلاس .dropdown، از کلاس‌های .dropup (بالا)، .dropend (راست) یا .dropstart (چپ) استفاده کنید.

<!-- Dropup -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    بالا
  </button>
  <ul class="dropdown-menu">...</ul>
</div>

<!-- Dropend -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    راست/انتها
  </button>
  <ul class="dropdown-menu">...</ul>
</div>

پاپ‌اوورها (Popovers)

پاپ‌اوورها جعبه‌های شناور کوچکی هستند که برای نمایش اطلاعات تکمیلی به کاربر استفاده می‌شوند. برخلاف سایر کامپوننت‌ها، پاپ‌اوورها به دلیل مسائل پرفورمنس باید به صورت دستی توسط جاوااسکریپت فعال شوند.

توجه: برای اینکه پاپ‌اوورها کار کنند، حتماً باید کد جاوااسکریپت زیر را در فایل JS خود یا در انتهای فایل HTML (قبل از بسته شدن تگ </body>) قرار دهید:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

۱. پاپ‌اوور پایه (Basic Popover)

یک دکمه ساده که با کلیک روی آن، یک پاپ‌اوور شامل عنوان (اختیاری) و متن اصلی باز می‌شود.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان پاپ‌اوور" data-bs-content="این محتوای شگفت‌انگیز پاپ‌اوور شماست. جذاب نیست؟">
  برای دیدن پاپ‌اوور کلیک کنید
</button>

۲. جهت‌های نمایش (Placements)

با استفاده از ویژگی data-bs-placement می‌توانید مشخص کنید پاپ‌اوور در کدام سمت (بالا، پایین، شروع/چپ، پایان/راست) نمایش داده شود.

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="محتوای بالا">Top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="end" data-bs-content="محتوای انتها">End</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="محتوای پایین">Bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="start" data-bs-content="محتوای شروع">Start</button>

۳. بسته شدن با کلیک در جای دیگر (Dismiss on next click)

برای اینکه پاپ‌اوور با کلیک کاربر در هر جای دیگر از صفحه بسته شود، باید از تگ <a> (به جای دکمه) استفاده کنید و tabindex="0" و data-bs-trigger="focus" را به آن اضافه کنید.

کلیک کنید و بعد جای دیگر کلیک کنید

<a tabindex="0" class="btn btn-lg btn-success" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="پاپ‌اوور قابل رد کردن" data-bs-content="محتوا...">
  بسته شدن با کلیک خارج از عنصر
</a>

تول‌تیپ‌ها (Tooltips)

تول‌تیپ‌ها برچسب‌های متنی کوچکی هستند که هنگام قرار گرفتن ماوس روی یک عنصر (Hover) یا فوکوس روی آن، برای راهنمایی بیشتر کاربر ظاهر می‌شوند.

توجه: تول‌تیپ‌ها نیز مانند پاپ‌اوورها باید با جاوااسکریپت فعال شوند. کد زیر را در انتهای فایل HTML خود (کنار کد پاپ‌اوورها) اضافه کنید:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

۱. جهت‌های نمایش (Placements)

ماوس خود را روی دکمه‌های زیر نگه دارید تا تول‌تیپ‌ها را در چهار جهت مختلف (بالا، پایین، شروع و پایان) مشاهده کنید.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تول‌تیپ در بالا">بالا</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="end" title="تول‌تیپ در انتها">انتها</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تول‌تیپ در پایین">پایین</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="start" title="تول‌تیپ در شروع">شروع</button>

۲. استفاده روی لینک‌ها و متن‌ها

تول‌تیپ‌ها می‌توانند روی هر عنصری قرار بگیرند، مثلاً روی کلمات خاصی در یک پاراگراف برای ارائه توضیحات بیشتر.

متن‌های راهنما می‌توانند روی لینک‌ها قرار بگیرند و یا اینکه روی کلمات خاص اعمال شوند تا بدون کلیک، اطلاعات بیشتری به کاربر بدهند.

<a href="#" data-bs-toggle="tooltip" title="یک لینک ساده با راهنما">لینک‌ها</a>
<span data-bs-toggle="tooltip" title="توضیحات تکمیلی" class="text-primary">کلمات خاص</span>

۳. تول‌تیپ روی عناصر غیرفعال (Disabled Elements)

عناصر غیرفعال (مثل disabled button) رویدادهای ماوس را دریافت نمی‌کنند. برای داشتن تول‌تیپ روی آن‌ها، باید دکمه را داخل یک <span> یا <div> قرار دهید و تول‌تیپ را به آن عنصر نگه‌دارنده بدهید.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="شما اجازه دسترسی به این دکمه را ندارید!">
  <button class="btn btn-primary" type="button" disabled>دکمه غیرفعال</button>
</span>

پیام‌های اطلاع‌رسانی (Toasts)

توست‌ها (Toasts) اعلان‌های موقتی هستند که برای دادن بازخورد به کاربر (مثلاً "تنظیمات ذخیره شد") استفاده می‌شوند. این پیام‌ها معمولاً در گوشه‌های صفحه قرار می‌گیرند.

۱. ساختار پایه (Basic Toast)

یک توست معمولاً شامل یک بخش هدر (Header) و یک بخش بدنه (Body) است. (در این مثال برای دیده شدن، کلاس show به آن اضافه شده است).

سلام دنیا! این یک پیام توست ساده است.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="p-2 bg-primary rounded me-2"></span>
    <strong class="me-auto">سیستم پیام</strong>
    <small>۱۱ دقیقه پیش</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    سلام دنیا! این یک پیام توست ساده است.
  </div>
</div>

۲. توست تعاملی (Live Example)

روی دکمه زیر کلیک کنید تا یک توست واقعی در گوشه پایین-راست صفحه ظاهر شود. (برای این کار از جاوااسکریپت استفاده شده است).

عملیات موفق

اطلاعات شما با موفقیت در سیستم ثبت شد!

<!-- دکمه فعال‌ساز -->
<button type="button" class="btn btn-primary" id="liveToastBtn">نمایش توست</button>

<!-- کانتینر توست (قرارگیری در گوشه صفحه) -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-success text-white">
      <strong class="me-auto">موفقیت</strong>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">پیام شما در اینجا...</div>
  </div>
</div>

۳. طرح‌های رنگی (Color Schemes)

می‌توانید با استفاده از کلاس‌های کمکی رنگ (مثل text-bg-primary) ظاهر توست‌ها را تغییر دهید. در این حالت معمولاً نیازی به تفکیک هدر و بدنه نیست.

یک پیام اطلاع‌رسانی با تم آبی رنگ.

خطا! ارتباط با سرور برقرار نشد.

<div class="toast align-items-center text-bg-primary border-0 show" role="alert">
  <div class="d-flex">
    <div class="toast-body">
      یک پیام اطلاع‌رسانی با تم آبی رنگ.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  </div>
</div>

مسیر راهنما (Breadcrumb)

مسیر راهنما موقعیت فعلی کاربر را در یک سلسله‌مراتب ناوبری (مانند پوشه‌ها یا دسته‌بندی‌های سایت) نشان می‌دهد و به طور خودکار جداکننده‌ها (معمولاً یک اسلش `/`) را بین آیتم‌ها اضافه می‌کند.

۱. ساختار پایه (Basic)

برای ساخت مسیر راهنما از تگ <nav> به همراه یک لیست مرتب (<ol>) استفاده می‌شود. آیتم فعلی باید کلاس active و ویژگی aria-current="page" داشته باشد.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">خانه</a></li>
    <li class="breadcrumb-item"><a href="#">مستندات</a></li>
    <li class="breadcrumb-item active" aria-current="page">کامپوننت‌ها</li>
  </ol>
</nav>

۲. تغییر جداکننده (Custom Divider)

در بوت‌استرپ ۵، می‌توانید نماد جداکننده (که به طور پیش‌فرض / است) را با استفاده از متغیرهای CSS تغییر دهید؛ مثلاً آن را به فلش > تبدیل کنید.

<!-- تغییر جداکننده با استفاده از --bs-breadcrumb-divider -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">صفحه اصلی</a></li>
    <li class="breadcrumb-item"><a href="#">فروشگاه</a></li>
    <li class="breadcrumb-item active" aria-current="page">لپ‌تاپ‌ها</li>
  </ol>
</nav>

گروه لیست‌ها (List Group)

گروه لیست‌ها کامپوننت‌هایی انعطاف‌پذیر و قدرتمند برای نمایش مجموعه‌ای از محتواها هستند. این کامپوننت‌ها می‌توانند با عناصر مختلفی مثل لینک‌ها، دکمه‌ها و نشان‌ها (Badges) ترکیب شوند.

۱. ساختار پایه، فعال و غیرفعال

ابتدایی‌ترین حالت با استفاده از تگ <ul> و کلاس‌های list-group و list-group-item ساخته می‌شود. از کلاس active برای آیتم انتخابی و disabled برای آیتم غیرفعال استفاده کنید.

آیتم فعال (Active)
آیتم دوم لیست
آیتم سوم لیست
آیتم غیرفعال (Disabled)

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">آیتم فعال</li>
  <li class="list-group-item">آیتم دوم</li>
  <li class="list-group-item disabled" aria-disabled="true">آیتم غیرفعال</li>
</ul>

۲. لیست‌های تعاملی (Links and Buttons)

اگر می‌خواهید آیتم‌های لیست قابل کلیک باشند (حالت هاور داشته باشند)، از تگ <div> به عنوان والد و از <a> یا <button> با اضافه کردن کلاس list-group-item-action استفاده کنید.

لینک فعال لیست یک لینک معمولی

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">لینک فعال</a>
  <a href="#" class="list-group-item list-group-item-action">لینک معمولی</a>
  <button type="button" class="list-group-item list-group-item-action">دکمه</button>
</div>

۳. لیست شماره‌دار همراه با نشان (Numbered & Badges)

در بوت‌استرپ ۵ با کلاس list-group-numbered می‌توانید لیست‌های شماره‌دار جذابی بسازید. در این مثال از کلاس‌های Flexbox برای قرار دادن نشان‌ها (Badges) در انتهای سطر نیز استفاده شده است.

صندوق ورودی
پیام‌های جدید خوانده نشده
14
بروزرسانی‌ها
بروزرسانی‌های سیستم عامل
2
هرزنامه‌ها
پاکسازی شده در ۲ روز پیش
0

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">صندوق ورودی</div>
      محتوای زیرعنوان...
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>

🚀 زمین بازی کد (Playground)

مهم‌ترین کامپوننت‌های Bootstrap را همین‌جا ویرایش کن و زنده ببین. از منوی بالا یک مثال انتخاب کن (Grid، دکمه، کارت، فرم، مودال، دراپ‌داون، آکاردئون، تب، تولتیپ و…)، کلاس‌ها را تغییر بده و ▶ اجرا را بزن. نسخهٔ ۵.۳.۳ (CSS + Bundle JS) همین صفحه آفلاین بارگذاری می‌شود.

💡 کامپوننت‌های تعاملی (مودال، دراپ‌داون، آکاردئون، تب، آفکانواس) فقط با اتریبیوت‌های data-bs-* کار می‌کنند. تولتیپ/پاپ‌اوور/توست به مقداری JS نیاز دارند (مثال «تولتیپ و توست»).

Property	توضیح	Side	توضیح
`m`	margin	`t`	top
`p`	padding	`b`	bottom
		`s`	start (راست در RTL)
		`e`	end (چپ در RTL)
		`x`	start + end
		`y`	top + bottom

آموزش جامع Bootstrap 5