Bootstrap 6 منتشر شد؛ بررسی قابلیت‌ها و تغییرات جدید Bootstrap 6 Alpha

مهر 20, 1405 · mytag_6166

Bootstrap 6 بالاخره معرفی شد. تیم Bootstrap در تاریخ 8 اکتبر 2026 اولین نسخه Alpha از Bootstrap 6 را با شماره 6.0.0-alpha.1 منتشر کرد.

این نسخه فقط یک به‌روزرسانی کوچک نسبت به Bootstrap 5 نیست؛ بلکه بخش‌های زیادی از Framework از Sass و JavaScript گرفته تا Grid، Utilityها، Componentها، Formها و سیستم شخصی‌سازی بازطراحی شده‌اند.

در این مقاله مهم‌ترین تغییرات Bootstrap 6 Alpha، Componentهای جدید، تغییرات کلاس‌ها و روش نصب نسخه جدید را بررسی می‌کنیم.

توجه: Bootstrap 6 در زمان نگارش این مقاله هنوز در مرحله Alpha قرار دارد؛ بنابراین برخی APIها، کلاس‌ها یا Componentها ممکن است تا نسخه نهایی تغییر کنند.

Bootstrap 6 چیست؟

Bootstrap یکی از محبوب‌ترین Frameworkهای Front-end برای طراحی رابط کاربری Responsive است.

Bootstrap 6 نسل جدید این Framework است که با تمرکز روی قابلیت‌های جدید CSS، APIهای Native مرورگر، Sass Modules، JavaScript مدرن و Customization بهتر طراحی شده است.

در این نسخه Bootstrap وابستگی بیشتری به قابلیت‌های جدید مرورگر دارد و بخش‌هایی که قبلاً با JavaScript یا Sass پیچیده پیاده‌سازی می‌شدند، حالا تا حد امکان به CSS و APIهای Native مرورگر منتقل شده‌اند.

نسخه فعلی Bootstrap 6

ویژگی	مقدار
نسخه	Bootstrap 6.0.0-alpha.1
وضعیت	Alpha
تاریخ انتشار Alpha 1	8 اکتبر 2026
JavaScript	ESM Only
زبان Source JavaScript	TypeScript
Sass	@use و @forward

نصب Bootstrap 6

نسخه Alpha اول Bootstrap 6 از طریق npm در دسترس است.

npm install bootstrap@6.0.0-alpha.1

همچنین در مستندات جدید Bootstrap روش نصب با Package Managerهای مختلف پشتیبانی شده است.

نصب با npm

npm install bootstrap

نصب با pnpm

pnpm add bootstrap

نصب با Yarn

yarn add bootstrap

نصب با Bun

bun add bootstrap

استفاده از Bootstrap 6 با CDN

Bootstrap 6 همچنان از طریق CDN قابل استفاده است. اما یک تفاوت بسیار مهم نسبت به Bootstrap 5 وجود دارد.

JavaScript در Bootstrap 6 به‌صورت ESM Only ارائه می‌شود. بنابراین هنگام استفاده از JavaScript از CDN باید type="module" را به Script اضافه کنید.

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css"
  rel="stylesheet"
>

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"
></script>

JavaScript در Bootstrap 6 فقط ESM است

یکی از Breaking Changeهای مهم Bootstrap 6 حذف نسخه UMD و حرکت کامل به سمت ECMAScript Modules یا ESM است.

به همین دلیل دیگر Global Object قدیمی مانند window.bootstrap در دسترس نیست.

در پروژه‌های مدرن می‌توانید Componentهای موردنیاز را مستقیماً Import کنید.

import {
  Tooltip,
  Toast,
  Popover
} from 'bootstrap';

این ساختار امکان Tree Shaking بهتر را برای Bundlerهای مدرن فراهم می‌کند.

Bootstrap 6 با TypeScript بازنویسی شده است

Source Code مربوط به JavaScript Pluginهای Bootstrap اکنون با TypeScript نوشته شده است.

Bootstrap همچنین Type Declarationهای خودش را همراه Package ارائه می‌کند. بنابراین در پروژه‌های TypeScript دیگر نیازی به نصب Package جداگانه @types/bootstrap نیست.

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

Bootstrap 6 سطح پشتیبانی مرورگرها را نسبت به Bootstrap 5 به شکل قابل توجهی افزایش داده است.

مرورگر	حداقل نسخه در Bootstrap 6
Chrome	130+
Edge	130+
Firefox	132+
Safari	18+

این تصمیم به Bootstrap اجازه داده است از قابلیت‌های جدید CSS و Browser API بدون نیاز به Polyfill و Fallbackهای قدیمی استفاده کند.

قابلیت‌های جدید CSS در Bootstrap 6

Bootstrap 6 استفاده گسترده‌تری از استانداردهای مدرن CSS دارد.

قابلیت	کاربرد
light-dark()	مدیریت Native حالت Light و Dark
:has()	انتخاب Element براساس فرزندان
Container Queries	Responsive Design براساس Container
oklch()	سیستم رنگ مدرن‌تر
color-mix()	ترکیب Dynamic رنگ‌ها
@property	تعریف Custom Propertyهای CSS
@starting-style	کنترل Transition هنگام ورود Element
interpolate-size	Animation اندازه‌هایی مانند auto

CSS Layers در Bootstrap 6

Bootstrap 6 از CSS Cascade Layers برای کنترل بهتر Specificity استفاده می‌کند.

این ساختار باعث می‌شود ترتیب Styleهای Framework قابل پیش‌بینی‌تر شود و Override کردن CSS راحت‌تر باشد.

Utilityها در بالاترین Layer قرار می‌گیرند تا رفتار آن‌ها قابل پیش‌بینی باقی بماند.

تغییر بزرگ Responsive Classها در Bootstrap 6

یکی از مهم‌ترین Breaking Changeهای Bootstrap 6 تغییر ساختار Responsive Utilityها و Grid Classها است.

در Bootstrap 5 Breakpoint معمولاً وسط Class قرار می‌گرفت:

d-md-none
col-lg-6
justify-content-md-end

اما در Bootstrap 6 Breakpoint به ابتدای Class منتقل شده است:

md:d-none
lg:col-6
md:justify-content-end

Bootstrap 5	Bootstrap 6
d-md-none	md:d-none
col-lg-6	lg:col-6
justify-content-md-end	md:justify-content-end
opacity-50-hover	hover:opacity-50

این Syntax شباهت بیشتری به Utility Frameworkهایی مانند Tailwind دارد.

Offcanvas در Bootstrap 6 به Drawer تغییر کرده است

Component قدیمی Offcanvas در Bootstrap 6 با Drawer جایگزین شده است.

برای نمونه Class قدیمی:

offcanvas-md

در ساختار جدید می‌تواند به شکل زیر باشد:

md:drawer

Drawer جدید در Bootstrap 6

Drawer برای ساخت Sidebar، منوی موبایل، Shopping Cart و Panelهایی که از کناره‌های صفحه باز می‌شوند استفاده می‌شود.

این Component بر پایه Element بومی <dialog> ساخته شده و می‌تواند از چپ، راست، بالا یا پایین Viewport نمایش داده شود.

Drawer همچنین قابلیت Responsive Placement و Swipe برای بستن را دارد.

Dialog جایگزین Modal شده است

یکی از تغییرات مهم Bootstrap 6 معرفی Component جدید Dialog است.

Dialog روی Element استاندارد HTML زیر ساخته شده است:

<dialog>

در Bootstrap 6 این Component جایگزین Modal قدیمی شده و از قابلیت‌های Native مرورگر برای Focus Management، Backdrop و Accessibility استفاده می‌کند.

<dialog class="dialog" id="exampleDialog">

  <div class="dialog-header">
    <h2 class="dialog-title">
      Dialog title
    </h2>
  </div>

  <div class="dialog-body">
    Content
  </div>

</dialog>

Accordion جدید بدون JavaScript

Accordion در Bootstrap 6 بازطراحی شده و از Elementهای Native HTML یعنی <details> و <summary> استفاده می‌کند.

در نتیجه بخش اصلی باز و بسته شدن Accordion بدون JavaScript قابل انجام است.

Bootstrap همچنین برای Animation آن از قابلیت‌های جدید CSS مانند interpolate-size و ::details-content استفاده می‌کند.

Transition System جدید Bootstrap 6

در Bootstrap 6 مسئولیت Animation Componentها تا حد زیادی به CSS منتقل شده است.

JavaScript معمولاً فقط State Class را تغییر می‌دهد و منتظر پایان Transition می‌ماند.

Componentهای Animated دارای Custom Propertyهایی برای تنظیم Property، Duration و Timing Function هستند.

--bs-toast-transition-property
--bs-toast-transition-duration
--bs-toast-transition-timing

بنابراین تغییر Motion یک Component بدون بازنویسی JavaScript امکان‌پذیر است.

Sass در Bootstrap 6 کاملاً تغییر کرده است

Bootstrap 6 از Sass Module System استفاده می‌کند.

روش قدیمی @import دیگر برای Customization پشتیبانی نمی‌شود و باید از:

@use
@forward

استفاده کنید.

Token Maps در Bootstrap 6

یکی از مهم‌ترین تغییرات سیستم Customization معرفی Token Mapها است.

بسیاری از Sass Variableهای Bootstrap 5 در نسخه جدید به CSS Variableهایی تبدیل شده‌اند که داخل Sass Mapها مدیریت می‌شوند.

این معماری اجازه می‌دهد Theme و Componentها را هم هنگام Build و هم در Runtime شخصی‌سازی کنید.

@use "../node_modules/bootstrap/scss/bootstrap" with (

  $root-tokens: (
    --spacer: 1.5rem,
    --focus-ring-width: 3px,
  )

);

Prose؛ قابلیت جدید برای محتوای طولانی

Bootstrap 6 یک Class جدید به نام .prose معرفی کرده است.

این Class برای صفحات محتوایی، مقاله‌ها، Documentation، Markdown و MDX طراحی شده است.

<article class="prose">

  <h2>Article title</h2>

  <p>
    Long form content...
  </p>

</article>

با استفاده از .prose فاصله Headingها، Line Height، Listها، Blockquote، Code و سایر Elementهای محتوایی به شکل مناسب تنظیم می‌شوند.

Formهای جدید Bootstrap 6

Bootstrap 6 مجموعه Form Componentهای بسیار گسترده‌تری دارد. در مستندات نسخه 6 چندین مورد با برچسب New مشخص شده‌اند.

Form Component	وضعیت در Bootstrap 6
Field	New
Range	New
Form Adorn	New
Chips	New
Combobox	New
Datepicker	New
OTP Input	New
Password Strength	New

Datepicker جدید Bootstrap 6

Bootstrap 6 حالا Datepicker رسمی دارد.

این Component امکان انتخاب تاریخ، Date Range، چند تاریخ و چند ماه را فراهم می‌کند و با Dark Mode نیز سازگار است.

برای فعال‌سازی ساده Datepicker می‌توان از Data Attribute استفاده کرد:

<input
  type="text"
  class="form-control"
  data-bs-toggle="datepicker"
  autocomplete="off"
  placeholder="Choose date..."
>

Bootstrap Datepicker در نسخه فعلی Wrapperای روی Vanilla Calendar Pro است.

OTP Input جدید Bootstrap 6

Bootstrap 6 یک Component مخصوص One-Time Password یا OTP اضافه کرده است.

این Component برای Login Code، تأیید شماره موبایل، Two-Factor Authentication و PIN مناسب است.

نکته جالب این است که در پشت ظاهر چند Box، تنها یک <input> واقعی وجود دارد.

<div class="otp" data-bs-otp>

  <input
    type="text"
    class="otp-input"
    maxlength="6"
    aria-label="Verification code"
  >

</div>

این ساختار باعث سازگاری بهتر با Screen Reader، Password Manager و SMS Autofill می‌شود.

Componentهای جدید Bootstrap 6

در بخش Components مستندات Bootstrap 6 موارد زیادی با نشان New مشخص شده‌اند.

Component	وضعیت
Accordion	New
Avatar	New
Carousel	New
Dialog	New
Drawer	New
Menu	New
Nav Overflow	New
Navbar	New
Scrollspy	New
Stepper	New
Toggler	New

Utilities جدید Bootstrap 6

بخش Utilityهای Bootstrap نیز قابلیت‌های جدیدی دریافت کرده است.

Utility	وضعیت
Color Scheme	New
Theme	New
Space	New
Motion	New

Hover Lift Helper جدید

در بخش Helpers نیز قابلیت جدید Hover Lift اضافه شده است.

این Helper برای ایجاد حالت Elevation یا حرکت ظریف Element هنگام Hover قابل استفاده است.

Container Query در Bootstrap 6

Bootstrap 6 استفاده جدی‌تری از Container Query دارد.

در Responsive Design سنتی تصمیم‌گیری براساس عرض Viewport انجام می‌شد؛ اما Container Query اجازه می‌دهد Component براساس اندازه Parent خودش تغییر کند.

این قابلیت به‌خصوص برای Componentهای Reusable و Design Systemها اهمیت زیادی دارد.

Dark Mode با light-dark()

Bootstrap 6 از تابع CSS جدید light-dark() استفاده می‌کند.

این قابلیت باعث شده بسیاری از Styleهای مربوط به Dark Mode بدون تکرار مقادیر Light و Dark در Selectorهای جدا مدیریت شوند.

سیستم رنگ جدید با OKLCH

Bootstrap 6 برای سیستم رنگ خود از oklch() و color-mix() استفاده می‌کند.

OKLCH امکان تولید Paletteهایی با تغییرات بصری یکنواخت‌تر را فراهم می‌کند و در Themeهای Dynamic کاربرد زیادی دارد.

Range Media Queryهای مدرن

در Bootstrap 6 Syntax جدید Media Query بیشتر مورد استفاده قرار می‌گیرد.

به‌جای ساختارهایی مانند:

@media (min-width: 768px)

می‌توان از Range Syntax جدید استفاده کرد:

@media (width >= 768px)

Bootstrap 6 برای AI Agentها آماده شده است

یکی از تغییرات جالب Bootstrap 6 توجه مستقیم به ابزارهای هوش مصنوعی و Coding Agentها است.

Bootstrap نسخه Text-only مستندات خود را برای LLMها ارائه کرده و فایل‌های Skill مخصوص Agentها نیز به Repository اضافه شده‌اند.

این Skillها برای کارهایی مانند Migration به Bootstrap 6، استفاده با Build Toolهای مختلف و ساخت Componentها طراحی شده‌اند.

تفاوت Bootstrap 5 و Bootstrap 6

ویژگی	Bootstrap 5	Bootstrap 6
JavaScript	UMD / Module	ESM Only
JavaScript Source	JavaScript	TypeScript
Sass	@import	@use / @forward
Responsive Class	col-lg-6	lg:col-6
Modal	Modal	Dialog
Offcanvas	Offcanvas	Drawer
CSS Colors	Traditional	OKLCH + color-mix()
Dark Mode	CSS Variables	light-dark()
Container Queries	محدودتر	بخش مهم Responsive System
Type Definitions	@types/bootstrap	Built-in

آیا Bootstrap 6 برای پروژه Production مناسب است؟

نسخه فعلی Bootstrap 6 هنوز Alpha است.

Alpha به این معناست که APIها، Componentها، Classها و حتی ساختار برخی بخش‌ها ممکن است قبل از Beta و نسخه Stable تغییر کنند.

برای پروژه آزمایشی، آموزش و بررسی قابلیت‌های جدید می‌توان از Bootstrap 6 استفاده کرد؛ اما برای پروژه Production حساس بهتر است قبل از مهاجرت وضعیت نسخه Stable را بررسی کنید.

آیا باید پروژه Bootstrap 5 را همین الان به Bootstrap 6 منتقل کنیم؟

اگر پروژه شما در Production است، عجله برای Migration منطقی نیست. Bootstrap 5 همچنان در دسترس و پشتیبانی می‌شود.

اما توسعه‌دهندگانی که پروژه جدید آزمایشی دارند یا می‌خواهند برای نسخه آینده آماده شوند، بهتر است Bootstrap 6 Alpha را تست کنند و Breaking Changeهای آن را بشناسند.

مهم‌ترین Breaking Changeهای Bootstrap 6

مهاجرت از Bootstrap 5 به Bootstrap 6 فقط با تغییر شماره Package انجام نمی‌شود.

تغییر Responsive Prefixها، حذف UMD، انتقال JavaScript به ESM، تغییر سیستم Sass، جایگزینی Modal با Dialog و Offcanvas با Drawer از مواردی هستند که هنگام Migration باید بررسی شوند.

سوالات متداول درباره Bootstrap 6

Bootstrap 6 منتشر شده است؟

بله. اولین نسخه Alpha از Bootstrap 6 با شماره 6.0.0-alpha.1 منتشر شده است. اما این نسخه هنوز Stable نیست.

چطور Bootstrap 6 را نصب کنیم؟

برای نصب نسخه Alpha می‌توانید از npm استفاده کنید:

npm install bootstrap@6.0.0-alpha.1

آیا Bootstrap 6 از TypeScript استفاده می‌کند؟

بله. Source مربوط به JavaScript Pluginهای Bootstrap 6 با TypeScript نوشته شده و Package نیز Type Declarationهای خودش را ارائه می‌کند.

آیا @types/bootstrap هنوز لازم است؟

در Bootstrap 6 Type Declarationها همراه خود Package ارائه می‌شوند و در حالت معمول دیگر نیازی به Package جداگانه @types/bootstrap نیست.

آیا Bootstrap 6 از CommonJS پشتیبانی می‌کند؟

JavaScript Pluginهای Bootstrap 6 به ESM منتقل شده‌اند. پروژه‌هایی که از require() استفاده می‌کنند باید به ESM Import مهاجرت کنند.

Modal در Bootstrap 6 چه شده است؟

Component جدید Dialog که روی Element بومی <dialog> ساخته شده، جایگزین Modal شده است.

Offcanvas در Bootstrap 6 چه شده است؟

Offcanvas با Component جدید Drawer جایگزین شده است.

Responsive Classها در Bootstrap 6 تغییر کرده‌اند؟

بله. Breakpointها از Infix به Prefix منتقل شده‌اند. برای مثال col-lg-6 به lg:col-6 تغییر کرده است.

آیا Bootstrap 6 Datepicker دارد؟

بله. Datepicker یکی از Form Componentهای جدید Bootstrap 6 است و قابلیت‌هایی مانند Date Range، انتخاب چند تاریخ و چند ماه را ارائه می‌دهد.

آیا Bootstrap 6 OTP Input دارد؟

بله. OTP Input جدید برای Verification Code، PIN و Two-Factor Authentication طراحی شده است.

آیا Bootstrap 6 برای پروژه Production مناسب است؟

نسخه فعلی Alpha است؛ بنابراین برای پروژه‌های Production حساس بهتر است تا پایدار شدن APIها و انتشار نسخه Stable منتظر بمانید.

آیا Bootstrap 5 هنوز پشتیبانی می‌شود؟

بله. تیم Bootstrap اعلام کرده است که Bootstrap 5 همچنان در دسترس و پشتیبانی‌شده باقی می‌ماند و نسخه 5.4 نیز پیش از اعلام End of Life منتشر خواهد شد.

جمع‌بندی

Bootstrap 6 یکی از بزرگ‌ترین بازطراحی‌های این Framework در سال‌های اخیر است.

حرکت به سمت ESM و TypeScript، استفاده از Sass Modules، CSS Variables و Token Mapها، پشتیبانی از Container Queries، OKLCH، light-dark و APIهای Native مرورگر نشان می‌دهد Bootstrap تلاش کرده خودش را با نسل جدید توسعه Front-end هماهنگ کند.

در کنار این تغییرات، Componentهایی مانند Dialog، Drawer، Datepicker، OTP Input، Stepper، Combobox و Password Strength امکانات بیشتری را بدون نیاز به Libraryهای جانبی در اختیار توسعه‌دهندگان قرار می‌دهند.

با این حال Bootstrap 6 هنوز در مرحله Alpha قرار دارد. بنابراین فعلاً بهترین کار این است که آن را در پروژه‌های آزمایشی بررسی کنیم، Migration Guide را مطالعه کنیم و برای Breaking Changeهای نسخه نهایی آماده باشیم.

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

Bootstrap 6 چیست؟

نسخه فعلی Bootstrap 6

نصب Bootstrap 6

نصب با npm

نصب با pnpm

نصب با Yarn

نصب با Bun

استفاده از Bootstrap 6 با CDN

JavaScript در Bootstrap 6 فقط ESM است

Bootstrap 6 با TypeScript بازنویسی شده است

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

قابلیت‌های جدید CSS در Bootstrap 6

CSS Layers در Bootstrap 6

تغییر بزرگ Responsive Classها در Bootstrap 6

Offcanvas در Bootstrap 6 به Drawer تغییر کرده است

Drawer جدید در Bootstrap 6

Dialog جایگزین Modal شده است

Accordion جدید بدون JavaScript

Transition System جدید Bootstrap 6

Sass در Bootstrap 6 کاملاً تغییر کرده است

Token Maps در Bootstrap 6

Prose؛ قابلیت جدید برای محتوای طولانی

Formهای جدید Bootstrap 6

Datepicker جدید Bootstrap 6

OTP Input جدید Bootstrap 6

Componentهای جدید Bootstrap 6

Utilities جدید Bootstrap 6

Hover Lift Helper جدید

Container Query در Bootstrap 6

Dark Mode با light-dark()

سیستم رنگ جدید با OKLCH

Range Media Queryهای مدرن

Bootstrap 6 برای AI Agentها آماده شده است

تفاوت Bootstrap 5 و Bootstrap 6

آیا Bootstrap 6 برای پروژه Production مناسب است؟

آیا باید پروژه Bootstrap 5 را همین الان به Bootstrap 6 منتقل کنیم؟

مهم‌ترین Breaking Changeهای Bootstrap 6

سوالات متداول درباره Bootstrap 6

Bootstrap 6 منتشر شده است؟

چطور Bootstrap 6 را نصب کنیم؟

آیا Bootstrap 6 از TypeScript استفاده می‌کند؟

آیا @types/bootstrap هنوز لازم است؟

آیا Bootstrap 6 از CommonJS پشتیبانی می‌کند؟

Modal در Bootstrap 6 چه شده است؟

Offcanvas در Bootstrap 6 چه شده است؟

Responsive Classها در Bootstrap 6 تغییر کرده‌اند؟

آیا Bootstrap 6 Datepicker دارد؟

آیا Bootstrap 6 OTP Input دارد؟

آیا Bootstrap 6 برای پروژه Production مناسب است؟

آیا Bootstrap 5 هنوز پشتیبانی می‌شود؟

جمع‌بندی

دیدگاهتان را بنویسید لغو پاسخ

سبد خرید

منوی MyTag