أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+
+
+
+ 9 دقائق
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site-new/src/assets/examples/album/index.astro b/site-new/src/assets/examples/album/index.astro
new file mode 100644
index 000000000000..3872ca83f77d
--- /dev/null
+++ b/site-new/src/assets/examples/album/index.astro
@@ -0,0 +1,209 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Album example'
+---
+
+
+
+
+
+
+
About
+
Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.
+
+
يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.
+
+
تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية
+
+
تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.
+
عنوان
+
تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!
+
عنوان فرعي
+
ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.
+
Example code block
+
وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.
+
عنوان فرعي
+
بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.
+
يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:
+
+
البروتينات
+
الكربوهيدرات
+
الدهون
+
+
وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:
+
+
الكربون
+
الهيدروجين
+
الأكسجين
+
النيتروجين
+
+
ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.
في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.
+
+
تم تصنيع اللحوم بأنواع عديدة
+
+
إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.
+
وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.
كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).
+
وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.
+
وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:
+
+
توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء
+
تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة
+
تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م
+
+
فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!
+
+
+
+
+
+
+
+
+
+
حول
+
أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.
This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.
+
+
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
Blockquotes
+
This is an example blockquote in action:
+
+
Quoted text goes here.
+
+
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
Example lists
+
This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:
+
+
First list item
+
Second list item with a longer description
+
Third list item to close it out
+
+
And this is an ordered list:
+
+
First list item
+
Second list item with a longer description
+
Third list item to close it out
+
+
And this is a definition list:
+
+
HyperText Markup Language (HTML)
+
The language used to describe and define the content of a Web page
+
Cascading Style Sheets (CSS)
+
Used to describe the appearance of Web content
+
JavaScript (JS)
+
The programming language used to build advanced Web sites and applications
+
+
Inline HTML elements
+
HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.
+
+
To bold text, use <strong>.
+
To italicize text, use <em>.
+
Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
+
Citations, like — Mark Otto, should use <cite>.
+
Deleted text should use <del> and inserted text should use <ins>.
+
Superscript text uses <sup> and subscript text uses <sub>.
+
+
Most of these elements are styled by browsers with few modifications on our part.
+
Heading
+
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
Sub-heading
+
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
Example code block
+
This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
+
Longer quote goes here, maybe with some emphasized text in the middle of it.
+
+
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
Example table
+
And don't forget about tables in these posts:
+
+
+
+
Name
+
Upvotes
+
Downvotes
+
+
+
+
+
Alice
+
10
+
11
+
+
+
Bob
+
4
+
3
+
+
+
Charlie
+
7
+
9
+
+
+
+
+
Totals
+
21
+
23
+
+
+
+
+
This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
+
First list item
+
Second list item with a longer description
+
Third list item to close it out
+
+
This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
+
+
+
+
+
+
+
+
+
+
About
+
Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.
حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.
الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.
تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.
إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.
بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.
وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.
+
+
+
+
+
+
+
+
+
+
+
أوه نعم، هذا جيد. شاهد بنفسك.
+
عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.
+
+
+
+
+
+
+
+
+
+
+
وأخيرًا، هذا. كش ملك.
+
إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site-new/src/assets/examples/carousel/carousel.css b/site-new/src/assets/examples/carousel/carousel.css
new file mode 100644
index 000000000000..be0af524a6a2
--- /dev/null
+++ b/site-new/src/assets/examples/carousel/carousel.css
@@ -0,0 +1,82 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ color: rgb(var(--bs-tertiary-color-rgb));
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+ margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+ bottom: 3rem;
+ z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+ height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+/* rtl:begin:ignore */
+.marketing .col-lg-4 p {
+ margin-right: .75rem;
+ margin-left: .75rem;
+}
+/* rtl:end:ignore */
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+ margin: 5rem 0; /* Space out the Bootstrap more */
+}
+
+/* Thin out the marketing headings */
+/* rtl:begin:remove */
+.featurette-heading {
+ letter-spacing: -.05rem;
+}
+
+/* rtl:end:remove */
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+ /* Bump up size of carousel content */
+ .carousel-caption p {
+ margin-bottom: 1.25rem;
+ font-size: 1.25rem;
+ line-height: 1.4;
+ }
+
+ .featurette-heading {
+ font-size: 50px;
+ }
+}
+
+@media (min-width: 62em) {
+ .featurette-heading {
+ margin-top: 7rem;
+ }
+}
diff --git a/site-new/src/assets/examples/carousel/carousel.rtl.css b/site-new/src/assets/examples/carousel/carousel.rtl.css
new file mode 100644
index 000000000000..9ff275d4ea5e
--- /dev/null
+++ b/site-new/src/assets/examples/carousel/carousel.rtl.css
@@ -0,0 +1,74 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ color: rgb(var(--bs-tertiary-color-rgb));
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+ margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+ bottom: 3rem;
+ z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+ height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+.marketing .col-lg-4 p {
+ margin-right: .75rem;
+ margin-left: .75rem;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+ margin: 5rem 0; /* Space out the Bootstrap more */
+}
+
+/* Thin out the marketing headings */
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+ /* Bump up size of carousel content */
+ .carousel-caption p {
+ margin-bottom: 1.25rem;
+ font-size: 1.25rem;
+ line-height: 1.4;
+ }
+
+ .featurette-heading {
+ font-size: 50px;
+ }
+}
+
+@media (min-width: 62em) {
+ .featurette-heading {
+ margin-top: 7rem;
+ }
+}
diff --git a/site-new/src/assets/examples/carousel/index.astro b/site-new/src/assets/examples/carousel/index.astro
new file mode 100644
index 000000000000..15d823228ac5
--- /dev/null
+++ b/site-new/src/assets/examples/carousel/index.astro
@@ -0,0 +1,164 @@
+---
+export const title = 'Carousel Template'
+export const extra_css = ['carousel.css']
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example headline.
+
Some representative placeholder content for the first slide of the carousel.
Some great placeholder content for the first featurette here. Imagine some exciting prose here.
+
+
+
+
+
+
+
+
+
+
+
Oh yeah, it’s that good. See for yourself.
+
Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.
+
+
+
+
+
+
+
+
+
+
+
And lastly, this one. Checkmate.
+
And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.
+ هذا هو محتوى عنصر المطوية الأول. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+
+
+
+
+
+
+
+
+
+ هذا هو محتوى عنصر المطوية الثاني. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+
+
+
+
+
+
+
+
+
+ هذا هو محتوى عنصر المطوية الثالث. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+
+ تنبيه ${themeColor.name} بسيط مع رابط مثال. أعطها نقرة إذا أردت.
+
+
+ `)} />
+
+
+
أحسنت!
+
لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.
+
+
كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.
محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.
+
+
+
محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.
+
+
+
محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.
محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.
+
@mdo
+
بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.
+
واحد
+
وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.
+
اثنان
+
مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.
+
ثلاثة
+
وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!
لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.
+
+
+
+
+
+
+
+
+
+
عنوان الصندوق العائم
+
+
+
+
نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير
+
في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.
+
يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.
+
وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته "ديلي ميل" البريطانية.
+
وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.
+
وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.
+
كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.
+
+
+
+
+
+
+
+
+
+
صندوق عائم يملأ الشاشة
+
+
+
+
في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.
+
تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.
+
التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".
+
وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.
+
يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.
+
ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.
+
ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.
+
وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.
+
وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+ A simple ${themeColor.name} alert with an example link. Give it a click if you like.
+
+
+ `)} />
+
+
+
Well done!
+
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+
+
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Second heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Third heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Fourth heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Fifth heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
I will not close if you click outside me. Don't even try to press escape key.
+
+
+
+
+
+
+
+
+
+
Modal title
+
+
+
+
This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
+
+
This content should appear at the bottom after you scroll.
فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.
+
+
+
+
+
+ عربة التسوق
+ 3
+
+
+
+
+
اسم المنتج
+ وصف مختصر
+
+ $12
+
+
+
+
المنتج الثاني
+ وصف مختصر
+
+ $8
+
+
+
+
البند الثالث
+ وصف مختصر
+
+ $5
+
+
+
+
رمز ترويجي
+ EXAMPLECODE
+
+ -$5
+
+
+ مجموع (USD)
+ $20
+
+
+
+
+
+
+
عنوان الفوترة
+
+
+
+
+
+
diff --git a/site-new/src/assets/examples/checkout/checkout.css b/site-new/src/assets/examples/checkout/checkout.css
new file mode 100644
index 000000000000..e5ea31c405fd
--- /dev/null
+++ b/site-new/src/assets/examples/checkout/checkout.css
@@ -0,0 +1,3 @@
+.container {
+ max-width: 960px;
+}
diff --git a/site-new/src/assets/examples/checkout/checkout.js b/site-new/src/assets/examples/checkout/checkout.js
new file mode 100644
index 000000000000..30ea0aa6b1e0
--- /dev/null
+++ b/site-new/src/assets/examples/checkout/checkout.js
@@ -0,0 +1,19 @@
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(() => {
+ 'use strict'
+
+ // Fetch all the forms we want to apply custom Bootstrap validation styles to
+ const forms = document.querySelectorAll('.needs-validation')
+
+ // Loop over them and prevent submission
+ Array.from(forms).forEach(form => {
+ form.addEventListener('submit', event => {
+ if (!form.checkValidity()) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ form.classList.add('was-validated')
+ }, false)
+ })
+})()
diff --git a/site-new/src/assets/examples/checkout/index.astro b/site-new/src/assets/examples/checkout/index.astro
new file mode 100644
index 000000000000..5c45ac50dfa0
--- /dev/null
+++ b/site-new/src/assets/examples/checkout/index.astro
@@ -0,0 +1,231 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Checkout example'
+export const extra_css = ['checkout.css']
+export const extra_js = [{ src: 'checkout.js' }]
+export const body_class = 'bg-body-tertiary'
+---
+
+
+
+
+
+
Checkout form
+
Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
+
+
+
Features with title
+
+
+
+
Left-aligned title explaining these awesome features
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
+
In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
+
+
Five grid tiers
+
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
+
+
+
.col-4
+
.col-4
+
.col-4
+
+
+
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+
+
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+
+
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+
+
+
.col-xxl-4
+
.col-xxl-4
+
.col-xxl-4
+
+
+
Three equal columns
+
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+
+
Three equal columns alternative
+
By using the .row-cols-* classes, you can easily create a grid with equal columns.
+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+
+
Three unequal columns
+
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+
+
Two columns
+
Get two columns starting at desktops and scaling to large desktops.
+
+
.col-md-8
+
.col-md-4
+
+
+
Full width, single column
+
+ No grid classes are necessary for full-width elements.
+
+
+
+
+
Two columns with two nested columns
+
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
+
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
+
+
+
+ .col-md-8
+
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+
+
+
+
Mixed: mobile and desktop
+
The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
+
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.
+
+
.col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+
+
+
+
Mixed: mobile, tablet, and desktop
+
+
.col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+
+
+
+
Gutters
+
With .gx-* classes, the horizontal gutters can be adjusted.
+
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
+
Use the .gy-* classes to control the vertical gutters.
+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+
With .g-* classes, the gutters in both directions can be adjusted.
+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+
+
+
+
+
Containers
+
Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.
+
+
+
+
diff --git a/site-new/src/assets/examples/heroes/bootstrap-docs.png b/site-new/src/assets/examples/heroes/bootstrap-docs.png
new file mode 100644
index 000000000000..471a9eddfe57
Binary files /dev/null and b/site-new/src/assets/examples/heroes/bootstrap-docs.png differ
diff --git a/site-new/src/assets/examples/heroes/bootstrap-themes.png b/site-new/src/assets/examples/heroes/bootstrap-themes.png
new file mode 100644
index 000000000000..13c32337d6e1
Binary files /dev/null and b/site-new/src/assets/examples/heroes/bootstrap-themes.png differ
diff --git a/site-new/src/assets/examples/heroes/heroes.css b/site-new/src/assets/examples/heroes/heroes.css
new file mode 100644
index 000000000000..e9deaf744f34
--- /dev/null
+++ b/site-new/src/assets/examples/heroes/heroes.css
@@ -0,0 +1,3 @@
+@media (min-width: 992px) {
+ .rounded-lg-3 { border-radius: .3rem; }
+}
diff --git a/site-new/src/assets/examples/heroes/index.astro b/site-new/src/assets/examples/heroes/index.astro
new file mode 100644
index 000000000000..853776e7bc90
--- /dev/null
+++ b/site-new/src/assets/examples/heroes/index.astro
@@ -0,0 +1,124 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Heroes'
+export const extra_css = ['heroes.css']
+---
+
+
+
Heroes examples
+
+
+
+
Centered hero
+
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+
+
+
+
+
+
+
+
+
+
Centered screenshot
+
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Responsive left-aligned hero with image
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Vertically centered hero sign-up form
+
Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
+
+
+
+
+
+
+
+
+
+
+
+
+
Border hero with cropped image and shadows
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dark color hero
+
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.
+
+
+
+
+
+
+
+
Change the background
+
Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.
+
+
+
+
+
+
Add borders
+
Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.
+ This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive .col-* class, and a customized call to action.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Placeholder jumbotron
+
+ This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
+
+
+
+
+
+
+
+
+
+
+
Full-width jumbotron
+
+ This takes the basic jumbotron above and makes its background edge-to-edge with a .container inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.
+
+
+
+
+
+
+
+
+
+
Basic jumbotron
+
+ This is a simple Bootstrap jumbotron that sits within a .container, recreated with built-in utility classes.
+
By adding data-masonry='}"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.
+
+
+
+
+
+
+
+
+
Card title that wraps to a new line
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
+
+
+
+
+
Card title
+
This card has supporting text below as a natural lead-in to additional content.
+
Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
Card title
+
This card has a regular title and short paragraph of text below it.
+
Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Card title
+
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
+
+
diff --git a/site-new/src/assets/examples/navbar-fixed/index.astro b/site-new/src/assets/examples/navbar-fixed/index.astro
new file mode 100644
index 000000000000..956f18cfc2fc
--- /dev/null
+++ b/site-new/src/assets/examples/navbar-fixed/index.astro
@@ -0,0 +1,40 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Fixed top navbar example'
+export const extra_css = ['navbar-fixed.css']
+---
+
+
+
+
+
+
Navbar example
+
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
+
diff --git a/site-new/src/assets/examples/navbar-fixed/navbar-fixed.css b/site-new/src/assets/examples/navbar-fixed/navbar-fixed.css
new file mode 100644
index 000000000000..c77c0c1475bd
--- /dev/null
+++ b/site-new/src/assets/examples/navbar-fixed/navbar-fixed.css
@@ -0,0 +1,5 @@
+/* Show it is fixed to the top */
+body {
+ min-height: 75rem;
+ padding-top: 4.5rem;
+}
diff --git a/site-new/src/assets/examples/navbar-static/index.astro b/site-new/src/assets/examples/navbar-static/index.astro
new file mode 100644
index 000000000000..17d5bd5f52e0
--- /dev/null
+++ b/site-new/src/assets/examples/navbar-static/index.astro
@@ -0,0 +1,40 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Top navbar example'
+export const extra_css = ['navbar-static.css']
+---
+
+
+
+
+
+
Navbar example
+
This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
+
diff --git a/site-new/src/assets/examples/navbar-static/navbar-static.css b/site-new/src/assets/examples/navbar-static/navbar-static.css
new file mode 100644
index 000000000000..25bbdde09464
--- /dev/null
+++ b/site-new/src/assets/examples/navbar-static/navbar-static.css
@@ -0,0 +1,4 @@
+/* Show it's not fixed to the top */
+body {
+ min-height: 75rem;
+}
diff --git a/site-new/src/assets/examples/navbars-offcanvas/index.astro b/site-new/src/assets/examples/navbars-offcanvas/index.astro
new file mode 100644
index 000000000000..faa93c824fdc
--- /dev/null
+++ b/site-new/src/assets/examples/navbars-offcanvas/index.astro
@@ -0,0 +1,147 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Navbar Template'
+export const extra_css = ['navbars-offcanvas.css']
+---
+
+
+
+
+
+
+
+
+
+
+
+
Navbar with offcanvas examples
+
This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the top and fixed top examples.
+
From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.
This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the top and fixed top examples.
+
At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.
+ @username
+ Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
+
+
+
+
+
+ @username
+ Some more representative placeholder content, related to this other user. Another status update, perhaps.
+
+
+
+
+
+ @username
+ This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
+
Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.
Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.
Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.
diff --git a/site-new/src/components/home/CSSVariables.astro b/site-new/src/components/home/CSSVariables.astro
new file mode 100644
index 000000000000..f22a0bccd761
--- /dev/null
+++ b/site-new/src/components/home/CSSVariables.astro
@@ -0,0 +1,71 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+import Code from '@shortcodes/Code.astro'
+---
+
+
+
+
+
+
+
Build and extend in real-time with CSS variables
+
+ Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual
+ components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily
+ be modified.
+
+ Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children
+ elements.
+
+
+
+
+
Customizing via CSS variables
+
+ Override global, component, or utility class variables to customize Bootstrap just how you like. No need to
+ redeclare each rule, just a new variable value.
+
+
+
+
+
diff --git a/site-new/src/components/home/ComponentUtilities.astro b/site-new/src/components/home/ComponentUtilities.astro
new file mode 100644
index 000000000000..a1e5fd393582
--- /dev/null
+++ b/site-new/src/components/home/ComponentUtilities.astro
@@ -0,0 +1,158 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+import Code from '@shortcodes/Code.astro'
+---
+
+
+
+
+
+
+
+
+
+
+
Components, meet the Utility API
+
+ New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to
+ add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them
+ custom names.
+
+
+
+
+
Quickly customize components
+
+ Apply any of our included utility classes to our components to customize their appearance, like the navigation
+ example below. There are hundreds of classes available—from positioning and sizing to colors and effects. Mix them with CSS variable overrides for
+ even more control.
+
+ Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any
+ project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.
+
+
diff --git a/site-new/src/components/home/Customize.astro b/site-new/src/components/home/Customize.astro
new file mode 100644
index 000000000000..07012601f808
--- /dev/null
+++ b/site-new/src/components/home/Customize.astro
@@ -0,0 +1,68 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+import Code from '@shortcodes/Code.astro'
+---
+
+
+
+
+
+
Customize everything with Sass
+
+ Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable
+ global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
+
+ Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed
+ installs don’t include documentation or our full build scripts. You can also use any demo from our Examples repo to quickly jumpstart Bootstrap projects.
+
+ When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also
+ choose to include Popper and our JS separately.
+
+ `}
+ lang="html"
+ />
+ `}
+ lang="html"
+ />
+
+
+
+
Read our getting started guides
+
Get a jump on including Bootstrap's source files in a new project with our official guides.
+
diff --git a/site-new/src/components/home/Icons.astro b/site-new/src/components/home/Icons.astro
new file mode 100644
index 000000000000..4c72294f37e0
--- /dev/null
+++ b/site-new/src/components/home/Icons.astro
@@ -0,0 +1,38 @@
+---
+import { getConfig } from '@libs/config'
+import { getVersionedDocsPath } from '@libs/path'
+import CircleSquareIcon from '@components/icons/CircleSquareIcon.astro'
+---
+
+
+
+
+
+
+
Personalize it with Bootstrap Icons
+
+ Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with
+ more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them
+ as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
+
+ Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid
+ system and components, and bring projects to life with powerful JavaScript plugins.
+
diff --git a/site-new/src/components/home/Plugins.astro b/site-new/src/components/home/Plugins.astro
new file mode 100644
index 000000000000..b27dc89a63ce
--- /dev/null
+++ b/site-new/src/components/home/Plugins.astro
@@ -0,0 +1,90 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+import { getData } from '@libs/data'
+import Code from '@shortcodes/Code.astro'
+
+const plugins = getData('plugins')
+---
+
+
+
+
+
+
+
Powerful JavaScript plugins without jQuery
+
+ Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without
+ jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with data attributes in your
+ HTML. Need more control? Include individual plugins programmatically.
+
+ Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a
+ first-class data API, allowing you to use JavaScript just by adding data attributes.
+
+
+
diff --git a/site-new/src/components/home/Themes.astro b/site-new/src/components/home/Themes.astro
new file mode 100644
index 000000000000..ac019af5863e
--- /dev/null
+++ b/site-new/src/components/home/Themes.astro
@@ -0,0 +1,39 @@
+---
+import { getConfig } from '@libs/config'
+import { getVersionedDocsPath } from '@libs/path'
+import DropletFillIcon from '@components/icons/DropletFillIcon.astro'
+---
+
+
+
+
+
+
+
Make it yours with official Bootstrap Themes
+
+ Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins,
+ documentation, and powerful build tools.
+
+
diff --git a/site-new/src/components/icons/BootstrapWhiteFillIcon.astro b/site-new/src/components/icons/BootstrapWhiteFillIcon.astro
new file mode 100644
index 000000000000..ef40e6a42597
--- /dev/null
+++ b/site-new/src/components/icons/BootstrapWhiteFillIcon.astro
@@ -0,0 +1,18 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/icons/CircleSquareIcon.astro b/site-new/src/components/icons/CircleSquareIcon.astro
new file mode 100644
index 000000000000..506f7a23bbe1
--- /dev/null
+++ b/site-new/src/components/icons/CircleSquareIcon.astro
@@ -0,0 +1,23 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/icons/DropletFillIcon.astro b/site-new/src/components/icons/DropletFillIcon.astro
new file mode 100644
index 000000000000..5254ca7dc734
--- /dev/null
+++ b/site-new/src/components/icons/DropletFillIcon.astro
@@ -0,0 +1,24 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/icons/GitHubIcon.astro b/site-new/src/components/icons/GitHubIcon.astro
new file mode 100644
index 000000000000..faa01434d22d
--- /dev/null
+++ b/site-new/src/components/icons/GitHubIcon.astro
@@ -0,0 +1,24 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/icons/HamburgerIcon.astro b/site-new/src/components/icons/HamburgerIcon.astro
new file mode 100644
index 000000000000..ad6ddc8d97e1
--- /dev/null
+++ b/site-new/src/components/icons/HamburgerIcon.astro
@@ -0,0 +1,22 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/icons/OpenCollectiveIcon.astro b/site-new/src/components/icons/OpenCollectiveIcon.astro
new file mode 100644
index 000000000000..fc501641102c
--- /dev/null
+++ b/site-new/src/components/icons/OpenCollectiveIcon.astro
@@ -0,0 +1,26 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/icons/Symbols.astro b/site-new/src/components/icons/Symbols.astro
new file mode 100644
index 000000000000..f44136bfdd8a
--- /dev/null
+++ b/site-new/src/components/icons/Symbols.astro
@@ -0,0 +1,142 @@
+---
+---
+
+
diff --git a/site-new/src/components/icons/TwitterIcon.astro b/site-new/src/components/icons/TwitterIcon.astro
new file mode 100644
index 000000000000..ba7dd68767c2
--- /dev/null
+++ b/site-new/src/components/icons/TwitterIcon.astro
@@ -0,0 +1,23 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+
diff --git a/site-new/src/components/shortcodes/AddedIn.astro b/site-new/src/components/shortcodes/AddedIn.astro
new file mode 100644
index 000000000000..d9a26ce50e7c
--- /dev/null
+++ b/site-new/src/components/shortcodes/AddedIn.astro
@@ -0,0 +1,16 @@
+---
+/*
+ * Outputs badge to identify the first version something was added
+ */
+
+interface Props {
+ version: string
+}
+
+const { version } = Astro.props
+---
+
+Added in v{version}
diff --git a/site-new/src/components/shortcodes/BsTable.astro b/site-new/src/components/shortcodes/BsTable.astro
new file mode 100644
index 000000000000..df80455ff0c0
--- /dev/null
+++ b/site-new/src/components/shortcodes/BsTable.astro
@@ -0,0 +1,16 @@
+---
+interface Props {
+ /**
+ * The CSS class to apply to the table.
+ * Note that the prop is not used in this component, but in a rehype plugin applying the classes to the table element
+ * directly on the HTML AST (HAST) generated by Astro.
+ * @default "table"
+ * @see src/libs/rehype.ts
+ */
+ class?: string
+}
+---
+
+
+
+
diff --git a/site-new/src/components/shortcodes/Callout.astro b/site-new/src/components/shortcodes/Callout.astro
new file mode 100644
index 000000000000..11243c848271
--- /dev/null
+++ b/site-new/src/components/shortcodes/Callout.astro
@@ -0,0 +1,44 @@
+---
+import { getCalloutByName } from '@libs/content'
+import type { MarkdownInstance } from 'astro'
+
+interface Props {
+ /**
+ * The name of an existing callout to display located in `src/content/callouts`.
+ * This will override any content passed in via the default slot.
+ */
+ name?:
+ | 'danger-async-methods'
+ | 'info-mediaqueries-breakpoints'
+ | 'info-npm-starter'
+ | 'info-prefersreducedmotion'
+ | 'info-sanitizer'
+ | 'warning-color-assistive-technologies'
+ | 'warning-data-bs-title-vs-title'
+ | 'warning-input-support'
+ /**
+ * The type of callout to display. One of `info`, `danger`, or `warning`.
+ * @default 'info'
+ */
+ type?: 'danger' | 'info' | 'warning'
+}
+
+const { name, type = 'info' } = Astro.props
+
+let Content: MarkdownInstance<{}>['Content'] | undefined
+
+if (name) {
+ const callout = await getCalloutByName(name)
+
+ if (!callout) {
+ throw new Error(`Could not find callout with name '${name}'.`)
+ }
+
+ const namedCallout = await callout.render()
+ Content = namedCallout.Content
+}
+---
+
+
+ {Content ? : }
+
diff --git a/site-new/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro b/site-new/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro
new file mode 100644
index 000000000000..4033900d96e0
--- /dev/null
+++ b/site-new/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro
@@ -0,0 +1,19 @@
+---
+/*
+ * Outputs message about dark mode component variants being deprecated in v5.3.
+ */
+
+interface Props {
+ component: string
+}
+
+const { component } = Astro.props
+---
+
+
+
+ Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes.
+ Instead of adding .{component}-dark, set data-bs-theme="dark" on the root element, a parent
+ wrapper, or the component itself.
+
+
diff --git a/site-new/src/components/shortcodes/Code.astro b/site-new/src/components/shortcodes/Code.astro
new file mode 100644
index 000000000000..0a440870c02c
--- /dev/null
+++ b/site-new/src/components/shortcodes/Code.astro
@@ -0,0 +1,156 @@
+---
+import fs from 'node:fs'
+import path from 'node:path'
+import { Prism } from '@astrojs/prism'
+
+interface Props {
+ /**
+ * The CSS class(es) to be added to the `pre` HTML element when rendering code blocks in Markdown.
+ * Note that this prop is not used when the component is invoked directly.
+ */
+ class?: string
+ /**
+ * The code to highlight.
+ * If an array is passed, elements will be joined with a new line.
+ */
+ code?: string | string[]
+ /**
+ * The CSS class(es) to be added to the `div` wrapper HTML element.
+ */
+ containerClass?: string
+ /**
+ * The language to use for highlighting.
+ * @see https://prismjs.com/#supported-languages
+ */
+ lang?: string
+ /**
+ * If the `filePath` prop is defined, this prop can be used to specify a regex containing a match group to extract
+ * only a part of the file.
+ */
+ fileMatch?: string
+ /**
+ * A path to the file containing the code to highlight relative to the root of the repository.
+ * This takes precedence over the `code` prop.
+ */
+ filePath?: string
+}
+
+const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props
+
+let codeToDisplay = filePath
+ ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8')
+ : Array.isArray(code)
+ ? code.join('\n')
+ : code
+
+if (filePath && fileMatch && codeToDisplay) {
+ const match = codeToDisplay.match(new RegExp(fileMatch))
+
+ if (!match || !match[1]) {
+ throw new Error(`The file at ${filePath} does not contains a match for the regex '${fileMatch}'.`)
+ }
+
+ codeToDisplay = match[1]
+}
+---
+
+
+
+
diff --git a/site-new/src/components/shortcodes/DeprecatedIn.astro b/site-new/src/components/shortcodes/DeprecatedIn.astro
new file mode 100644
index 000000000000..50ba42b95d0d
--- /dev/null
+++ b/site-new/src/components/shortcodes/DeprecatedIn.astro
@@ -0,0 +1,17 @@
+---
+/*
+ * Outputs badge to identify the version something was deprecated
+ */
+
+interface Props {
+ version: string
+}
+
+const { version } = Astro.props
+---
+
+
+ Deprecated in v{version}
+
diff --git a/site-new/src/components/shortcodes/Example.astro b/site-new/src/components/shortcodes/Example.astro
new file mode 100644
index 000000000000..083ee21bb8c4
--- /dev/null
+++ b/site-new/src/components/shortcodes/Example.astro
@@ -0,0 +1,105 @@
+---
+import { replacePlaceholdersInHtml } from '@libs/placeholder'
+import Code from '@shortcodes/Code.astro'
+
+interface Props {
+ /**
+ * Defines if extra JS snippet should be added to StackBlitz or not.
+ * @default false
+ */
+ addStackblitzJs?: boolean
+ /**
+ * The example code.
+ * If an array is passed, elements will be joined with a new line.
+ */
+ code: string | string[]
+ /**
+ * The CSS class(es) to be added to the preview wrapping `div` element.
+ */
+ class?: string
+ /**
+ * The preview wrapping `div` element ID.
+ */
+ id?: string
+ /**
+ * Language used to display the code.
+ * @default 'html'
+ */
+ lang?: string
+ /**
+ * Defines if the markup should be visible or not.
+ * @default true
+ */
+ showMarkup?: boolean
+ /**
+ * Defines if the preview should be visible or not.
+ * @default true
+ */
+ showPreview?: boolean
+}
+
+const {
+ addStackblitzJs = false,
+ code,
+ class: className,
+ id,
+ lang = 'html',
+ showMarkup = true,
+ showPreview = true,
+} = Astro.props
+
+let markup = Array.isArray(code) ? code.join('\n') : code
+markup = replacePlaceholdersInHtml(markup)
+
+const simplifiedMarkup = markup
+ .replace(
+ //g,
+ ''
+ )
+ .replace(
+ //g,
+ ''
+ )
+---
+
+{
+ showMarkup ? (
+
+ {showPreview && (
+
+
+
+
+
+ {lang}
+
+
+
+
+
+
+ )}
+
+ ) : (
+
+ {showPreview && (
+
+
+
+ )}
+
+ )
+}
diff --git a/site-new/src/components/shortcodes/GuideFooter.mdx b/site-new/src/components/shortcodes/GuideFooter.mdx
new file mode 100644
index 000000000000..426a71f271c2
--- /dev/null
+++ b/site-new/src/components/shortcodes/GuideFooter.mdx
@@ -0,0 +1,3 @@
+
+
+_See something wrong or out of date here? Please [open an issue on GitHub]([[config:repo]]/issues/new/choose). Need help troubleshooting? [Search or start a discussion]([[config:repo]]/discussions) on GitHub._
diff --git a/site-new/src/components/shortcodes/JsDataAttributes.mdx b/site-new/src/components/shortcodes/JsDataAttributes.mdx
new file mode 100644
index 000000000000..e99ff7112ce3
--- /dev/null
+++ b/site-new/src/components/shortcodes/JsDataAttributes.mdx
@@ -0,0 +1,3 @@
+As options can be passed via data attributes or JavaScript, you can append an option name to `data-bs-`, as in `data-bs-animation="{value}"`. Make sure to change the case type of the option name from "_camelCase_" to "_kebab-case_" when passing the options via data attributes. For example, use `data-bs-custom-class="beautifier"` instead of `data-bs-customClass="beautifier"`.
+
+As of Bootstrap 5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{"delay":0, "title":123}'` and `data-bs-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{"show":0,"hide":150}'`.
diff --git a/site-new/src/components/shortcodes/JsDismiss.astro b/site-new/src/components/shortcodes/JsDismiss.astro
new file mode 100644
index 000000000000..0bc26e7ae494
--- /dev/null
+++ b/site-new/src/components/shortcodes/JsDismiss.astro
@@ -0,0 +1,26 @@
+---
+import Code from '@shortcodes/Code.astro'
+
+interface Props {
+ name: string
+}
+
+const { name } = Astro.props
+---
+
+
+ Dismissal can be achieved with the data-bs-dismiss attribute on a button within the {name} as demonstrated
+ below:
+
+
+`}
+ lang="html"
+/>
+
+
or on a button outside the {name} using the additional data-bs-target as demonstrated below:
+
+`}
+ lang="html"
+/>
diff --git a/site-new/src/components/shortcodes/Placeholder.astro b/site-new/src/components/shortcodes/Placeholder.astro
new file mode 100644
index 000000000000..b19e3b01e7c5
--- /dev/null
+++ b/site-new/src/components/shortcodes/Placeholder.astro
@@ -0,0 +1,27 @@
+---
+import { getPlaceholder, type PlaceholderOptions } from '@libs/placeholder'
+
+type Props = Partial
+
+const {
+ options: { background, color, showText, showTitle, text, title },
+ props,
+ type,
+} = getPlaceholder(Astro.props)
+---
+
+{
+ type === 'img' ? (
+
+ ) : (
+
+ )
+}
diff --git a/site-new/src/components/shortcodes/ScssDocs.astro b/site-new/src/components/shortcodes/ScssDocs.astro
new file mode 100644
index 000000000000..527e71b02aab
--- /dev/null
+++ b/site-new/src/components/shortcodes/ScssDocs.astro
@@ -0,0 +1,65 @@
+---
+import fs from 'node:fs'
+import { getConfig } from '@libs/config'
+import Code from '@shortcodes/Code.astro'
+
+// Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"`
+// comments in the docs.
+
+interface Props {
+ /**
+ * Reference name used to find the content to display within the content of the `file` prop.
+ */
+ name: string
+ /**
+ * File path that contains the content to display relative to the root of the repository.
+ */
+ file: string
+}
+
+const { name, file } = Astro.props
+
+if (!name || !file) {
+ throw new Error(
+ `Missing required parameter(s) for the '' component, expected both 'name' and 'file' but got 'name: ${name}' and 'file: ${file}'.`
+ )
+}
+
+let content: string
+
+try {
+ const fileContent = fs.readFileSync(file, 'utf8')
+
+ const matches = fileContent.match(
+ new RegExp(`\/\/ scss-docs-start ${name}\n((?:.|\n)*)\/\/ scss-docs-end ${name}`, 'm')
+ )
+
+ if (!matches || !matches[1]) {
+ throw new Error(
+ `Failed to find the content named '${name}', make sure that '// scss-docs-start ${name}' and '// scss-docs-end ${name}' are defined.`
+ )
+ }
+
+ content = matches[1].replaceAll(' !default', '')
+} catch (error) {
+ throw new Error(`Failed to find the content to render in the '' component at '${file}'.`, {
+ cause: error,
+ })
+}
+---
+
+
+
+
diff --git a/site-new/src/components/shortcodes/Table.astro b/site-new/src/components/shortcodes/Table.astro
new file mode 100644
index 000000000000..cb36144f45b2
--- /dev/null
+++ b/site-new/src/components/shortcodes/Table.astro
@@ -0,0 +1,31 @@
+---
+import Code from '@shortcodes/Code.astro'
+import * as tableContent from '@shortcodes/TableContent.md'
+
+interface Props {
+ /**
+ * Any class(es) to be added to the `
` element (both in the example and code snippet).
+ */
+ class?: string
+ /**
+ * Show a simplified version in the example code snippet by replacing the table content inside `
+
diff --git a/site-new/src/content/callouts/danger-async-methods.md b/site-new/src/content/callouts/danger-async-methods.md
new file mode 100644
index 000000000000..7b7a654b72d8
--- /dev/null
+++ b/site-new/src/content/callouts/danger-async-methods.md
@@ -0,0 +1 @@
+**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/[[config:docs_version]]/getting-started/javascript/#asynchronous-functions-and-transitions)
diff --git a/site-new/src/content/callouts/info-mediaqueries-breakpoints.md b/site-new/src/content/callouts/info-mediaqueries-breakpoints.md
new file mode 100644
index 000000000000..2eea77138b03
--- /dev/null
+++ b/site-new/src/content/callouts/info-mediaqueries-breakpoints.md
@@ -0,0 +1 @@
+**Why subtract .02px?** Browsers don't currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
diff --git a/site-new/src/content/callouts/info-npm-starter.md b/site-new/src/content/callouts/info-npm-starter.md
new file mode 100644
index 000000000000..cc4a50e68fd1
--- /dev/null
+++ b/site-new/src/content/callouts/info-npm-starter.md
@@ -0,0 +1 @@
+**Get started with Bootstrap via npm with our starter project!** Head to the [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.
diff --git a/site-new/src/content/callouts/info-prefersreducedmotion.md b/site-new/src/content/callouts/info-prefersreducedmotion.md
new file mode 100644
index 000000000000..49d81ef8ba93
--- /dev/null
+++ b/site-new/src/content/callouts/info-prefersreducedmotion.md
@@ -0,0 +1 @@
+The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/[[config:docs_version]]/getting-started/accessibility/#reduced-motion).
diff --git a/site-new/src/content/callouts/info-sanitizer.md b/site-new/src/content/callouts/info-sanitizer.md
new file mode 100644
index 000000000000..516975b3206c
--- /dev/null
+++ b/site-new/src/content/callouts/info-sanitizer.md
@@ -0,0 +1 @@
+By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/docs/[[config:docs_version]]/getting-started/javascript/#sanitizer) for more details.
diff --git a/site-new/src/content/callouts/warning-color-assistive-technologies.md b/site-new/src/content/callouts/warning-color-assistive-technologies.md
new file mode 100644
index 000000000000..0e83b1aadc28
--- /dev/null
+++ b/site-new/src/content/callouts/warning-color-assistive-technologies.md
@@ -0,0 +1 @@
+**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
diff --git a/site-new/src/content/callouts/warning-data-bs-title-vs-title.md b/site-new/src/content/callouts/warning-data-bs-title-vs-title.md
new file mode 100644
index 000000000000..e932f22ad971
--- /dev/null
+++ b/site-new/src/content/callouts/warning-data-bs-title-vs-title.md
@@ -0,0 +1 @@
+Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.
diff --git a/site-new/src/content/callouts/warning-input-support.md b/site-new/src/content/callouts/warning-input-support.md
new file mode 100644
index 000000000000..f9d9c0abd67d
--- /dev/null
+++ b/site-new/src/content/callouts/warning-input-support.md
@@ -0,0 +1 @@
+Some date inputs types are [not fully supported](https://caniuse.com/input-datetime) by the latest versions of Safari and Firefox.
diff --git a/site-new/src/content/config.ts b/site-new/src/content/config.ts
new file mode 100644
index 000000000000..8dd161469cbc
--- /dev/null
+++ b/site-new/src/content/config.ts
@@ -0,0 +1,40 @@
+import { z, defineCollection } from 'astro:content'
+
+const docsSchema = z.object({
+ added: z.string().optional(),
+ aliases: z.string().or(z.string().array()).optional(),
+ description: z.string(),
+ direction: z.literal('rtl').optional(),
+ extra_js: z
+ .object({
+ async: z.boolean().optional(),
+ src: z.string(),
+ })
+ .array()
+ .optional(),
+ sections: z
+ .object({
+ description: z.string(),
+ title: z.string(),
+ })
+ .array()
+ .optional(),
+ thumbnail: z.string().optional(),
+ title: z.string(),
+ toc: z.boolean().optional(),
+})
+
+const docsCollection = defineCollection({
+ schema: docsSchema,
+})
+
+const calloutsSchema = z.object({})
+
+const calloutsCollection = defineCollection({
+ schema: calloutsSchema,
+})
+
+export const collections = {
+ docs: docsCollection,
+ callouts: calloutsCollection,
+}
diff --git a/site-new/src/content/docs/about/brand.mdx b/site-new/src/content/docs/about/brand.mdx
new file mode 100644
index 000000000000..bb4e2fb8711d
--- /dev/null
+++ b/site-new/src/content/docs/about/brand.mdx
@@ -0,0 +1,41 @@
+---
+title: Brand guidelines
+description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
+toc: true
+---
+
+Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.
+
+## Logo
+
+When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects.
+
+
+
+
+
+Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
+
+
+
+
+
+
+
+
+
+
+## Name
+
+Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
+
+
+
+
Bootstrap
+ Correct
+
+
+
BootStrap
+ Incorrect
+
+
diff --git a/site-new/src/content/docs/about/license.mdx b/site-new/src/content/docs/about/license.mdx
new file mode 100644
index 000000000000..0b35a7b67634
--- /dev/null
+++ b/site-new/src/content/docs/about/license.mdx
@@ -0,0 +1,32 @@
+---
+title: License FAQs
+description: Commonly asked questions about Bootstrap's open source license.
+---
+
+Bootstrap is released under the MIT license and is copyright {new Date().getFullYear()}. Boiled down to smaller chunks, it can be described with the following conditions.
+
+## It requires you to:
+
+- Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
+
+## It permits you to:
+
+- Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
+- Use Bootstrap in packages or distributions that you create
+- Modify the source code
+- Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
+
+## It forbids you to:
+
+- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
+- Hold the creators or copyright holders of Bootstrap liable
+- Redistribute any piece of Bootstrap without proper attribution
+- Use any marks owned by Bootstrap in any way that might state or imply that Bootstrap endorses your distribution
+- Use any marks owned by Bootstrap in any way that might state or imply that you created the Bootstrap software in question
+
+## It does not require you to:
+
+- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
+- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
+
+The full Bootstrap license is located [in the project repository]([[config:repo]]/blob/v[[config:current_version]]/LICENSE) for more information.
diff --git a/site-new/src/content/docs/about/overview.mdx b/site-new/src/content/docs/about/overview.mdx
new file mode 100644
index 000000000000..b0ceb44235c3
--- /dev/null
+++ b/site-new/src/content/docs/about/overview.mdx
@@ -0,0 +1,27 @@
+---
+title: About
+description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.
+aliases:
+ - "/about/"
+ - "/docs/[[config:docs_version]]/about/"
+---
+
+## Team
+
+Bootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. We're actively looking to grow this team and would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.
+
+## History
+
+Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
+
+Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
+
+Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) on , we've since had over [twenty releases]([[config:repo]]/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
+
+With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
+
+Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
+
+## Get involved
+
+Get involved with Bootstrap development by [opening an issue]([[config:repo]]/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]([[config:repo]]/blob/v[[config:current_version]]/.github/CONTRIBUTING.md) for information on how we develop.
diff --git a/site-new/src/content/docs/about/team.mdx b/site-new/src/content/docs/about/team.mdx
new file mode 100644
index 000000000000..46b03d87746c
--- /dev/null
+++ b/site-new/src/content/docs/about/team.mdx
@@ -0,0 +1,23 @@
+---
+title: Team
+description: An overview of the founding team and core contributors to Bootstrap.
+---
+
+import { getData } from '@libs/data'
+
+Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
+
+
+
+Get involved with Bootstrap development by [opening an issue]([[config:repo]]/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]([[config:repo]]/blob/v[[config:current_version]]/.github/CONTRIBUTING.md) for information on how we develop.
diff --git a/site-new/src/content/docs/about/translations.mdx b/site-new/src/content/docs/about/translations.mdx
new file mode 100644
index 000000000000..a7757baf8460
--- /dev/null
+++ b/site-new/src/content/docs/about/translations.mdx
@@ -0,0 +1,20 @@
+---
+title: Translations
+description: Links to community-translated Bootstrap documentation sites.
+---
+
+import { getData } from '@libs/data'
+
+Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up-to-date.
+
+
+
+**We don't help organize or host translations, we just link to them.**
+
+Finished a new or better translation? Open a pull request to add it to our list.
diff --git a/site-new/src/content/docs/components/accordion.mdx b/site-new/src/content/docs/components/accordion.mdx
new file mode 100644
index 000000000000..633d59345562
--- /dev/null
+++ b/site-new/src/content/docs/components/accordion.mdx
@@ -0,0 +1,155 @@
+---
+title: Accordion
+description: Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
+aliases:
+ - "/components/"
+ - "/docs/[[config:docs_version]]/components/"
+toc: true
+---
+
+## How it works
+
+The accordion uses [collapse]([[docsref:/components/collapse]]) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
+
+
+
+## Example
+
+Click the accordions below to expand/collapse the accordion content.
+
+
+
+
+
+
+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+`} />
+
+### Flush
+
+Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
+
+
+
+
+
+
+
+
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.
+
+
+
+
+
+
+
+
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
+
+
+
+
+
+
+
+
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
+
+
+`} />
+
+### Always open
+
+Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened.
+
+
+
+
+
+
+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+`} />
+
+## Accessibility
+
+Please read the [collapse accessibility section]([[docsref:/components/collapse#accessibility]]) for more information.
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
diff --git a/site-new/src/content/docs/components/alerts.mdx b/site-new/src/content/docs/components/alerts.mdx
new file mode 100644
index 000000000000..6680016cdc78
--- /dev/null
+++ b/site-new/src/content/docs/components/alerts.mdx
@@ -0,0 +1,241 @@
+---
+title: Alerts
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## Examples
+
+Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
+
+
+**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
+
+
+ `
+ A simple ${themeColor.name} alert—check it out!
+
`)} />
+
+
+
+### Live example
+
+Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
+
+
+`} />
+
+We use the following JavaScript to trigger our live alert demo:
+
+```js
+const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+
+const alert = (message, type) => {
+ const wrapper = document.createElement('div')
+ wrapper.innerHTML = [
+ `
`,
+ `
${message}
`,
+ ' ',
+ '
'
+ ].join('')
+
+ alertPlaceholder.append(wrapper)
+}
+
+const alertTrigger = document.getElementById('liveAlertBtn')
+if (alertTrigger) {
+ alertTrigger.addEventListener('click', () => {
+ alert('Nice, you triggered this alert message!', 'success')
+ })
+}
+```
+
+### Link color
+
+Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
+
+ `
+ A simple ${themeColor.name} alert with an example link. Give it a click if you like.
+
`)} />
+
+### Additional content
+
+Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
+
+
+
Well done!
+
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+
+
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+`} />
+
+### Icons
+
+Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Bootstrap Icons]([[config:icons]]) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+
+
+
+
+ An example alert with an icon
+
+`} />
+
+Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ An example alert with an icon
+
+
+
+
+
+ An example success alert with an icon
+
+
+
+
+
+ An example warning alert with an icon
+
+
+
+
+
+ An example danger alert with an icon
+
+
`} />
+
+### Dismissing
+
+Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
+
+- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
+- Add a [close button]([[docsref:/components/close-button]]) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
+- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the ``} />
+
+Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
+
+Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
+
+### Positioned
+
+Use utilities to modify a `.badge` and position it in the corner of a link or button.
+
+
+ Inbox
+
+ 99+
+ unread messages
+
+`} />
+
+You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.
+
+
+ Profile
+
+ New alerts
+
+`} />
+
+## Background colors
+
+
+
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
+
+ `${themeColor.title}`)} />
+
+
+
+## Pill badges
+
+Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
+
+ `${themeColor.title}`)} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
diff --git a/site-new/src/content/docs/components/breadcrumb.mdx b/site-new/src/content/docs/components/breadcrumb.mdx
new file mode 100644
index 000000000000..a00833fa1c83
--- /dev/null
+++ b/site-new/src/content/docs/components/breadcrumb.mdx
@@ -0,0 +1,98 @@
+---
+title: Breadcrumb
+description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
+toc: true
+---
+
+## Example
+
+Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
+
+
+
+
Home
+
+
+
+
+
+`} />
+
+## Dividers
+
+Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
+
+
+
+
+
+`} />
+
+When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
+
+```scss
+$breadcrumb-divider: quote(">");
+```
+
+It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
+
+
+**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]([[docsref:/customize/sass#escape-svg]]). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info.
+
+
+
+
+
+
+`} />
+
+```scss
+$breadcrumb-divider: url("data:image/svg+xml,");
+```
+
+You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
+
+
+
+
+
+`} />
+
+
+```scss
+$breadcrumb-divider: none;
+```
+
+## Accessibility
+
+Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the ``} />
+
+## Directions
+
+
+**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.
+
+
+### Centered
+
+Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
+
+
+
+ Centered dropdown
+
+
+`} />
+
+### Active
+
+Add `.active` to items in the dropdown to **style them as active**. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for the current page, or `true` for the current item in a set.
+
+
+
+`} />
+
+## Menu alignment
+
+By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes.
+
+Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side.
+
+
+**Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar.
+
+
+
+
+ Right-aligned menu example
+
+
+
Action
+
Another action
+
Something else here
+
+`} />
+
+### Responsive alignment
+
+If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
+
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
+
+
+
+ Left-aligned but right aligned when large screen
+
+
+
Action
+
Another action
+
Something else here
+
+`} />
+
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
+
+
+
+ Right-aligned but left aligned when large screen
+
+
+
Action
+
Another action
+
Something else here
+
+`} />
+
+Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars.
+
+### Alignment options
+
+Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place.
+
+
+
+ Dropdown
+
+
+`} />
+
+### Text
+
+Place any freeform text within a dropdown menu with text and use [spacing utilities]([[docsref:/utilities/spacing]]). Note that you'll likely need additional sizing styles to constrain the menu width.
+
+
+
+ Some example text that's free-flowing within the dropdown menu.
+
+
+ And this is more example text.
+
+`} />
+
+### Forms
+
+Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]([[docsref:/utilities/spacing]]) to give it the negative space you require.
+
+
+
+
+ New around here? Sign up
+ Forgot password?
+`} />
+
+
+
+ Dropdown form
+
+
+`} />
+
+## Dropdown options
+
+Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.
+
+
+
+`} />
+
+### Auto close behavior
+
+By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.
+
+
+
+ Default dropdown
+
+
`} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+
+Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
+
+- `--bs-dropdown-item-border-radius`
+
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+
+
+
+### Sass variables
+
+Variables for all dropdowns:
+
+
+
+Variables for the [dark dropdown](#dark-dropdowns):
+
+
+
+Variables for the CSS-based carets that indicate a dropdown's interactivity:
+
+
+
+### Sass mixins
+
+Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
+
+
+
+## Usage
+
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
+
+
+On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed.
+
+
+### Via data attributes
+
+Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
+
+```html
+
+
+ Dropdown trigger
+
+
+ ...
+
+
+```
+
+### Via JavaScript
+
+
+Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api.
+
+
+Call the dropdowns via JavaScript:
+
+```js
+const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
+const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
+```
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing Esc key)
`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
Note: the dropdown can always be closed with the Esc key. |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
+| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
+| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
+
+
+#### Using function with `popperConfig`
+
+```js
+const dropdown = new bootstrap.Dropdown(element, {
+ popperConfig(defaultBsPopperConfig) {
+ // const newPopperConfig = {...}
+ // use defaultBsPopperConfig if needed...
+ // return newPopperConfig
+ }
+})
+```
+
+### Methods
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. |
+| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
+| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
+| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
+| `update` | Updates the position of an element's dropdown. |
+
+
+### Events
+
+All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.
+
+
+| Event type | Description |
+| --- | --- |
+| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. |
+| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
+| `show.bs.dropdown` | Fires immediately when the `show` instance method is called. |
+| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. |
+
+
+```js
+const myDropdown = document.getElementById('myDropdown')
+myDropdown.addEventListener('show.bs.dropdown', event => {
+ // do something...
+})
+```
diff --git a/site-new/src/content/docs/components/list-group.mdx b/site-new/src/content/docs/components/list-group.mdx
new file mode 100644
index 000000000000..0bec4f1c3be6
--- /dev/null
+++ b/site-new/src/content/docs/components/list-group.mdx
@@ -0,0 +1,460 @@
+---
+title: List group
+description: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## Basic example
+
+The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
+
+
+
An item
+
A second item
+
A third item
+
A fourth item
+
And a fifth one
+`} />
+
+## Active items
+
+Add `.active` to a `.list-group-item` to indicate the current active selection.
+
+
+
An active item
+
A second item
+
A third item
+
A fourth item
+
And a fifth one
+`} />
+
+## Disabled items
+
+Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links).
+
+
+
+`} />
+
+## Custom content
+
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]([[docsref:/utilities/flex]]).
+
+
+
+
+ And some muted small print.
+
+`} />
+
+## Checkboxes and radios
+
+Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `
+Open modal for @fat
+Open modal for @getbootstrap
+
+
+
+
+
+
New message
+
+
+
+
+
+
+
+
+
`} />
+
+```js
+const exampleModal = document.getElementById('exampleModal')
+exampleModal.addEventListener('show.bs.modal', event => {
+ // Button that triggered the modal
+ const button = event.relatedTarget
+ // Extract info from data-bs-* attributes
+ const recipient = button.getAttribute('data-bs-whatever')
+ // If necessary, you could initiate an Ajax request here
+ // and then do the updating in a callback.
+ //
+ // Update the modal's content.
+ const modalTitle = exampleModal.querySelector('.modal-title')
+ const modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+ modalTitle.textContent = `New message to ${recipient}`
+ modalBodyInput.value = recipient
+})
+```
+
+### Toggle between modals
+
+Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.
+
+
+
+
+
+
Modal 1
+
+
+
+ Show a second modal and hide this one with the button below.
+
+
+
+
+
+
+
+
+
+
Modal 2
+
+
+
+ Hide this modal and show the first with the button below.
+
+
+
+
+
+Open first modal`} />
+
+### Change animation
+
+The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
+
+If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.
+
+### Remove animation
+
+For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
+
+```html
+
+ ...
+
+```
+
+### Dynamic heights
+
+If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+
+### Accessibility
+
+Be sure to add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don't need to add `role="dialog"` since we already add it via JavaScript.
+
+### Embedding YouTube videos
+
+Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
+
+## Optional sizes
+
+Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
+
+
+| Size | Class | Modal max-width
+| --- | --- | --- |
+| Small | `.modal-sm` | `300px` |
+| Default | None | `500px` |
+| Large | `.modal-lg` | `800px` |
+| Extra large | `.modal-xl` | `1140px` |
+
+
+Our default modal without modifier class constitutes the "medium" size modal.
+
+
+ Extra large modal
+ Large modal
+ Small modal
+
+
+```html
+
...
+
...
+
...
+```
+
+
+
+
+
+
Extra large modal
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
Large modal
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
Small modal
+
+
+
+ ...
+
+
+
+
+
+## Fullscreen Modal
+
+Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
+
+
+| Class | Availability |
+| --- | --- | --- |
+| `.modal-fullscreen` | Always |
+| `.modal-fullscreen-sm-down` | `576px` |
+| `.modal-fullscreen-md-down` | `768px` |
+| `.modal-fullscreen-lg-down` | `992px` |
+| `.modal-fullscreen-xl-down` | `1200px` |
+| `.modal-fullscreen-xxl-down` | `1400px` |
+
+
+
+ Full screen
+ Full screen below sm
+ Full screen below md
+ Full screen below lg
+ Full screen below xl
+ Full screen below xxl
+
+
+```html
+
+
+ ...
+
+```
+
+
+
+
+
+
Full screen modal
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
Full screen below sm
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
Full screen below md
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
Full screen below lg
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
Full screen below xl
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
Full screen below xxl
+
+
+
+ ...
+
+
+
+
+
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+
+
+### Sass variables
+
+
+
+### Sass loop
+
+[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
+
+
+
+## Usage
+
+The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
+
+### Via data attributes
+
+#### Toggle
+
+Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
+
+```html
+Launch modal
+```
+
+#### Dismiss
+
+
+
+
+While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk.
+
+
+### Via JavaScript
+
+Create a modal with a single line of JavaScript:
+
+```js
+const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
+// or
+const myModalAlternative = new bootstrap.Modal('#myModal', options)
+```
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. |
+| `focus` | boolean | `true` | Puts the focus on the modal when initialized. |
+| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |
+
+
+### Methods
+
+
+
+#### Passing options
+
+Activates your content as a modal. Accepts an optional options `object`.
+
+```js
+const myModal = new bootstrap.Modal('#myModal', {
+ keyboard: false
+})
+```
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
+| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. |
+| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
+| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
+| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. |
+| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
+
+
+### Events
+
+Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`).
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+
+
+```js
+const myModalEl = document.getElementById('myModal')
+myModalEl.addEventListener('hidden.bs.modal', event => {
+ // do something...
+})
+```
diff --git a/site-new/src/content/docs/components/navbar.mdx b/site-new/src/content/docs/components/navbar.mdx
new file mode 100644
index 000000000000..4dfc2312944c
--- /dev/null
+++ b/site-new/src/content/docs/components/navbar.mdx
@@ -0,0 +1,762 @@
+---
+title: Navbar
+description: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
+toc: true
+---
+
+import { getConfig } from '@libs/config'
+
+## How it works
+
+Here's what you need to know before getting started with the navbar:
+
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
+- Use our [spacing]([[docsref:/utilities/spacing]]) and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.
+- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
+- Ensure accessibility by using a `
+`} />
+
+## Placement
+
+Use our [position utilities]([[docsref:/utilities/position]]) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).
+
+Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements.
+
+
+
+`} />
+
+## Scrolling
+
+Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.
+
+Please note that this behavior comes with a potential drawback of `overflow`—when setting `overflow-y: auto` (required to scroll the content here), `overflow-x` is the equivalent of `auto`, which will crop some horizontal content.
+
+Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
+
+
+
+`} />
+
+## Responsive behaviors
+
+Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+
+For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
+
+### Toggler
+
+Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
+
+With no `.navbar-brand` shown at the smallest breakpoint:
+
+
+
+`} />
+
+### External content
+
+Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done!
+
+
+
+
Collapsed content
+ Toggleable via the navbar brand.
+
+
+
+
+
+
+
+
+`} />
+
+When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
+
+### Offcanvas
+
+Transform your expanding and collapsing navbar into an offcanvas drawer with the [offcanvas component]([[docsref:/components/offcanvas]]). We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
+
+In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
+
+
+
+`} />
+
+To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
+
+```html
+
+ Offcanvas navbar
+
+
+
+
+ ...
+
+
+```
+
+When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas.
+
+
+
+`} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+Some additional CSS variables are also present on `.navbar-nav`:
+
+
+
+Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
+
+
+
+### Sass variables
+
+Variables for all navbars:
+
+
+
+Variables for the [dark navbar](#color-schemes):
+
+
+
+### Sass loop
+
+[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
+
+
diff --git a/site-new/src/content/docs/components/navs-tabs.mdx b/site-new/src/content/docs/components/navs-tabs.mdx
new file mode 100644
index 000000000000..13ff3c264eb6
--- /dev/null
+++ b/site-new/src/content/docs/components/navs-tabs.mdx
@@ -0,0 +1,662 @@
+---
+title: Navs and tabs
+description: Documentation and examples for how to use Bootstrap's included navigation components.
+aliases: "/docs/[[config:docs_version]]/components/navs/"
+toc: true
+---
+
+## Base nav
+
+Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
+
+The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
+
+
+The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
+
+To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set.
+
+
+
+
+`} />
+
+Classes are used throughout, so your markup can be super flexible. Use `
`s like above, `` if the order of your items is important, or roll your own with a `` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.
+
+
+ Active
+ Link
+ Link
+ Disabled
+`} />
+
+## Available styles
+
+Change the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own.
+
+### Horizontal alignment
+
+Change the horizontal alignment of your nav with [flexbox utilities]([[docsref:/layout/grid#horizontal-alignment]]). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+
+Centered with `.justify-content-center`:
+
+
+
+`} />
+
+### Vertical
+
+Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
+
+
+
+`} />
+
+As always, vertical navigation is possible without `
`s, too.
+
+
+ Active
+ Link
+ Link
+ Disabled
+`} />
+
+### Tabs
+
+Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
+
+
+
+`} />
+
+### Fill and justify
+
+Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+
+
+`} />
+
+When using a ``-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `` elements.
+
+
+ Active
+ Much longer nav link
+ Link
+ Disabled
+`} />
+
+For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
+
+
+
+`} />
+
+Similar to the `.nav-fill` example using a ``-based navigation.
+
+
+ Active
+ Much longer nav link
+ Link
+ Disabled
+
+`} />
+## Working with flex utilities
+
+If you need responsive nav variations, consider using a series of [flexbox utilities]([[docsref:/utilities/flex]]). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+
+
+ Active
+ Longer nav link
+ Link
+ Disabled
+`} />
+
+## Regarding accessibility
+
+If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `
`, or wrap a `` element around the whole navigation. Do not add the role to the `
` itself, as this would prevent it from being announced as an actual list by assistive technologies.
+
+Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.
+
+## Using dropdowns
+
+Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]([[docsref:/components/dropdowns#usage]]).
+
+### Tabs with dropdowns
+
+
+
`} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+
+
+On the `.nav-tabs` modifier class:
+
+
+
+On the `.nav-pills` modifier class:
+
+
+
+
+
+On the `.nav-underline` modifier class:
+
+
+
+### Sass variables
+
+
+
+## JavaScript behavior
+
+Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
+
+
+
+
+ Home
+
+
+ Profile
+
+
+ Contact
+
+
+ Disabled
+
+
+
+
+
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Disabled tab's associated content.
+
+
+
+
+```html
+
+
+ Home
+
+
+ Profile
+
+
+ Contact
+
+
+ Disabled
+
+
+
+
...
+
...
+
...
+
...
+
+```
+
+To help fit your needs, this works with `
`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using ``, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `
`) and wrap the `` around it.
+
+
+
+
+ Home
+ Profile
+ Contact
+ Disabled
+
+
+
+
+
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Disabled tab's associated content.
+
+
+
+
+```html
+
+
+ Home
+ Profile
+ Contact
+ Disabled
+
+
+
+
...
+
...
+
...
+
...
+
+```
+
+The tabs plugin also works with pills.
+
+
+
+
+ Home
+
+
+ Profile
+
+
+ Contact
+
+
+ Disabled
+
+
+
+
+
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Disabled tab's associated content.
+
+
+
+
+```html
+
+
+ Home
+
+
+ Profile
+
+
+ Contact
+
+
+ Disabled
+
+
+
+
...
+
...
+
...
+
...
+
+```
+
+And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
+
+
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Disabled tab's associated content.
+
+
+
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+```
+
+### Accessibility
+
+Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
+
+In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
+
+
+In general, to facilitate keyboard navigation, it's recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you'll need to explicitly make your tab panels focusable by adding `tabindex="0"` in your markup.
+
+
+
+The tab JavaScript plugin **does not** support tabbed interfaces that contain dropdown menus, as these cause both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
+
+
+### Using data attributes
+
+You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-bs-toggle="tab"` or `data-bs-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
+
+```html
+
+
+
+ Home
+
+
+ Profile
+
+
+ Messages
+
+
+ Settings
+
+
+
+
+
+
...
+
...
+
...
+
...
+
+```
+
+### Via JavaScript
+
+Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
+
+```js
+const triggerTabList = document.querySelectorAll('#myTab button')
+triggerTabList.forEach(triggerEl => {
+ const tabTrigger = new bootstrap.Tab(triggerEl)
+
+ triggerEl.addEventListener('click', event => {
+ event.preventDefault()
+ tabTrigger.show()
+ })
+})
+```
+
+You can activate individual tabs in several ways:
+
+```js
+const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
+bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
+
+const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
+bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
+```
+
+### Fade effect
+
+To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
+
+```html
+
+
...
+
...
+
...
+
...
+
+```
+
+### Methods
+
+
+
+Activates your content as a tab element.
+
+You can create a tab instance with the constructor, for example:
+
+```js
+const bsTab = new bootstrap.Tab('#myTab')
+```
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's tab. |
+| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. |
+| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). |
+
+
+### Events
+
+When showing a new tab, the events fire in the following order:
+
+1. `hide.bs.tab` (on the current active tab)
+2. `show.bs.tab` (on the to-be-shown tab)
+3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event)
+4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event)
+
+If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
+
+
+| Event type | Description |
+| --- | --- |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+
+
+```js
+const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
+tabEl.addEventListener('shown.bs.tab', event => {
+ event.target // newly activated tab
+ event.relatedTarget // previous active tab
+})
+```
diff --git a/site-new/src/content/docs/components/offcanvas.mdx b/site-new/src/content/docs/components/offcanvas.mdx
new file mode 100644
index 000000000000..30d79dc94ad2
--- /dev/null
+++ b/site-new/src/content/docs/components/offcanvas.mdx
@@ -0,0 +1,329 @@
+---
+title: Offcanvas
+description: Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
+toc: true
+---
+
+## How it works
+
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+
+- Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
+- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
+- When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
+- Similar to modals, only one offcanvas can be shown at a time.
+
+**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.
+
+
+
+## Examples
+
+### Offcanvas components
+
+Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
+
+
+
+
Offcanvas
+
+
+
+ Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
+
+
`} />
+
+### Live demo
+
+Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.
+
+- `.offcanvas` hides content (default)
+- `.offcanvas.show` shows content
+
+You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="offcanvas"` is required.
+
+
+ Link with href
+
+
+ Button with data-bs-target
+
+
+
+
+
Offcanvas
+
+
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+
`} />
+
+### Body scrolling
+
+Scrolling the `` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `` scrolling.
+
+Enable body scrolling
+
+
+
+
Offcanvas with body scrolling
+
+
+
+
Try scrolling the rest of the page to see this option in action.
+
+
`} />
+
+### Body scrolling and backdrop
+
+You can also enable `` scrolling with a visible backdrop.
+
+Enable both scrolling & backdrop
+
+
+
+
Backdrop with scrolling
+
+
+
+
Try scrolling the rest of the page to see this option in action.
+
+
`} />
+
+### Static backdrop
+
+When backdrop is set to static, the offcanvas will not close when clicking outside of it.
+
+
+ Toggle static offcanvas
+
+
+
+
+
Offcanvas
+
+
+
+
+ I will not close if you click outside of me.
+
+
+
`} />
+
+## Dark offcanvas
+
+
+
+Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
+
+
+Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
+
+
+
+
+
Offcanvas
+
+
+
+
Place offcanvas content here.
+
+`} />
+
+## Responsive
+
+
+
+Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint.
+
+Toggle offcanvas
+
+
Resize your browser to show the responsive offcanvas toggle.
+
+
+
+
Responsive offcanvas
+
+
+
+
This is content within an .offcanvas-lg.
+
+
`} />
+
+Responsive offcanvas classes are available across for each breakpoint.
+
+- `.offcanvas`
+- `.offcanvas-sm`
+- `.offcanvas-md`
+- `.offcanvas-lg`
+- `.offcanvas-xl`
+- `.offcanvas-xxl`
+
+## Placement
+
+There's no default placement for offcanvas components, so you must add one of the modifier classes below.
+
+- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
+- `.offcanvas-end` places offcanvas on the right of the viewport
+- `.offcanvas-top` places offcanvas on the top of the viewport
+- `.offcanvas-bottom` places offcanvas on the bottom of the viewport
+
+Try the top, right, and bottom examples out below.
+
+Toggle top offcanvas
+
+
+
+
Offcanvas top
+
+
+
+ ...
+
+
`} />
+
+Toggle right offcanvas
+
+
+
+
Offcanvas right
+
+
+
+ ...
+
+
`} />
+
+Toggle bottom offcanvas
+
+
+
+
Offcanvas bottom
+
+
+
+ ...
+
+
`} />
+
+## Accessibility
+
+Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript.
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
+
+- `.offcanvas` hides the content
+- `.offcanvas.show` shows the content
+- `.offcanvas-start` hides the offcanvas on the left
+- `.offcanvas-end` hides the offcanvas on the right
+- `.offcanvas-top` hides the offcanvas on the top
+- `.offcanvas-bottom` hides the offcanvas on the bottom
+
+Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `` element with it for proper behavior across all devices.
+
+### Via data attributes
+
+#### Toggle
+
+Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-bs-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`.
+
+#### Dismiss
+
+
+
+
+While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk.
+
+
+### Via JavaScript
+
+Enable manually with:
+
+```js
+const offcanvasElementList = document.querySelectorAll('.offcanvas')
+const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))
+```
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backdrop` | boolean or the string `static` | `true` | Apply a backdrop on body while offcanvas is open. Alternatively, specify `static` for a backdrop which doesn't close the offcanvas when clicked. |
+| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed. |
+| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open. |
+
+
+### Methods
+
+
+
+Activates your content as an offcanvas element. Accepts an optional options `object`.
+
+You can create an offcanvas instance with the constructor, for example:
+
+```js
+const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
+```
+
+
+| Method | Description |
+| --- | --- |
+| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). |
+| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs). |
+| `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). |
+
+
+### Events
+
+Bootstrap's offcanvas class exposes a few events for hooking into offcanvas functionality.
+
+
+| Event type | Description |
+| --- | --- |
+| `hide.bs.offcanvas` | This event is fired immediately when the `hide` method has been called. |
+| `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
+| `hidePrevented.bs.offcanvas` | This event is fired when the offcanvas is shown, its backdrop is `static` and a click outside of the offcanvas is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
+
+
+```js
+const myOffcanvas = document.getElementById('myOffcanvas')
+myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
+ // do something...
+})
+```
diff --git a/site-new/src/content/docs/components/pagination.mdx b/site-new/src/content/docs/components/pagination.mdx
new file mode 100644
index 000000000000..681f8e3abda0
--- /dev/null
+++ b/site-new/src/content/docs/components/pagination.mdx
@@ -0,0 +1,159 @@
+---
+title: Pagination
+description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
+toc: true
+---
+
+## Overview
+
+We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `` element to identify it as a navigation section to screen readers and other assistive technologies.
+
+In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
+
+
+
+`} />
+
+## Working with icons
+
+Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes.
+
+
+
+`} />
+
+You can optionally swap out active or disabled anchors for ``, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
+
+
+
+`} />
+
+## Alignment
+
+Change the alignment of pagination components with [flexbox utilities]([[docsref:/utilities/flex]]). For example, with `.justify-content-center`:
+
+
+
+`} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+### Sass mixins
+
+
diff --git a/site-new/src/content/docs/components/placeholders.mdx b/site-new/src/content/docs/components/placeholders.mdx
new file mode 100644
index 000000000000..15246a47c9e7
--- /dev/null
+++ b/site-new/src/content/docs/components/placeholders.mdx
@@ -0,0 +1,134 @@
+---
+title: Placeholders
+description: Use loading placeholders for your components or pages to indicate something may still be loading.
+toc: true
+added: "5.1"
+---
+
+import { getData } from '@libs/data'
+
+## About
+
+Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.
+
+## Example
+
+In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.
+
+
+
+
+
+
Card title
+
Some quick example text to build on the card title and make up the bulk of the card's content.
+```
+
+## How it works
+
+Create placeholders with the `.placeholder` class and a grid column class (e.g., `.col-6`) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component.
+
+We apply additional styling to `.btn`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a ` ` within the element to reflect the height when actual text is rendered in its place.
+
+
+
+
+
+`} />
+
+
+The use of `aria-hidden="true"` only indicates that the element should be hidden to screen readers. The *loading* behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update.
+
+
+### Width
+
+You can change the `width` through grid column classes, width utilities, or inline styles.
+
+
+
+`} />
+
+### Color
+
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+
+
+ `,
+ ...getData('theme-colors').map((themeColor) => ``)
+]} />
+
+### Sizing
+
+The size of `.placeholder`s are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
+
+
+
+
+`} />
+
+### Animation
+
+Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being *actively* loaded.
+
+
+
+
+
+
+
+
`} />
+
+## CSS
+
+### Sass variables
+
+
diff --git a/site-new/src/content/docs/components/popovers.mdx b/site-new/src/content/docs/components/popovers.mdx
new file mode 100644
index 000000000000..5ce8fd4277af
--- /dev/null
+++ b/site-new/src/content/docs/components/popovers.mdx
@@ -0,0 +1,258 @@
+---
+title: Popovers
+description: Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
+toc: true
+---
+
+## Overview
+
+Things to know when using the popover plugin:
+
+- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]([[config:cdn.popper]]) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
+- Popovers require the [popover plugin]([[docsref:/components/popovers]]) as a dependency.
+- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
+- Zero-length `title` and `content` values will never show a popover.
+- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
+- Triggering popovers on hidden elements will not work.
+- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `.text-nowrap` on your ``s to avoid this behavior.
+- Popovers must be hidden before their corresponding elements have been removed from the DOM.
+- Popovers can be triggered thanks to an element inside a shadow DOM.
+
+
+
+
+
+Keep reading to see how popovers work with some examples.
+
+## Examples
+
+### Enable popovers
+
+As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute, like so:
+
+```js
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+```
+
+### Live demo
+
+We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-bs-title` and body content is set via `data-bs-content`.
+
+
+
+Click to toggle popover`} />
+
+### Four directions
+
+Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction.
+
+
+ Popover on top
+
+
+ Popover on right
+
+
+ Popover on bottom
+
+
+ Popover on left
+`} />
+
+### Custom `container`
+
+When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. This is common in responsive tables, input groups, and the like.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+ container: 'body'
+})
+```
+
+Another situation where you'll want to set an explicit custom `container` are popovers inside a [modal dialog]([[docsref:/components/modal]]), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won't be able to focus or activate these interactive elements.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+ container: '.modal-body'
+})
+```
+
+### Custom popovers
+
+
+
+You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
+
+
+
+
+ Custom popover
+`} />
+
+### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element.
+
+
+**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `` elements, not ``s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
+
+
+Dismissible popover`} />
+
+```js
+const popover = new bootstrap.Popover('.popover-dismiss', {
+ trigger: 'focus'
+})
+```
+
+### Disabled elements
+
+Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
+
+For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
+
+
+ Disabled button
+`} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+Enable popovers via JavaScript:
+
+```js
+const exampleEl = document.getElementById('example')
+const popover = new bootstrap.Popover(exampleEl, options)
+```
+
+
+**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users.
+
+Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover's content to be announced to assistive technology users as one long, uninterrupted stream.
+
+Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links), as it may lead to an illogical focus order or make the popover content itself completely unreachable for keyboard users. In cases where you must use these elements, consider using a modal dialog instead.
+
+
+### Options
+
+
+
+
+Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `allowList` | object | [Default value]([[docsref:/getting-started/javascript#sanitizer]]) | Object which contains allowed attributes and tags. |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
+| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
+| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
+| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
+| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
+| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
+| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
+| `offset` | number, string, function | `[0, 0]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'top'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
+| `template` | string | `'
'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
+| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
+| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+
+
+
+#### Data attributes for individual popovers
+
+Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
+
+
+#### Using function with `popperConfig`
+
+```js
+const popover = new bootstrap.Popover(element, {
+ popperConfig(defaultBsPopperConfig) {
+ // const newPopperConfig = {...}
+ // use defaultBsPopperConfig if needed...
+ // return newPopperConfig
+ }
+})
+```
+
+### Methods
+
+
+
+
+| Method | Description |
+| --- | --- |
+| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. |
+| `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** |
+| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
+| `getOrCreateInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `setContent` | Gives a way to change the popover's content after its initialization. |
+| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
+| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. |
+| `update` | Updates the position of an element's popover. |
+
+
+
+```js
+// getOrCreateInstance example
+const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
+
+// setContent example
+myPopover.setContent({
+ '.popover-header': 'another title',
+ '.popover-body': 'another content'
+})
+
+```
+
+
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
+
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.popover` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.popover` | This event is fired after the `show.bs.popover` event when the popover template has been added to the DOM. |
+| `show.bs.popover` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
+
+
+```js
+const myPopoverTrigger = document.getElementById('myPopover')
+myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
+ // do something...
+})
+```
diff --git a/site-new/src/content/docs/components/progress.mdx b/site-new/src/content/docs/components/progress.mdx
new file mode 100644
index 000000000000..91dc9b143cca
--- /dev/null
+++ b/site-new/src/content/docs/components/progress.mdx
@@ -0,0 +1,176 @@
+---
+title: Progress
+description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
+toc: true
+---
+
+
+**New markup in v5.3.0 —** We've deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what's changed in our migration guide.]([[docsref:/migration#improved-markup-for-progress-bars]])
+
+
+## How it works
+
+Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `
+
+
+
+
+
+
+
+
+
+
+
+
`} />
+
+## Bar sizing
+
+### Width
+
+Bootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/sizing]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
+
+
+
+`} />
+
+### Height
+
+You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
+
+
+
+
+
+
+
`} />
+
+## Labels
+
+Add labels to your progress bars by placing text within the `.progress-bar`.
+
+
+
25%
+`} />
+
+Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]([[docsref:/utilities/overflow]]), but make sure to also define an explicit [text color]([[docsref:/utilities/colors#colors]]) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]([[docsref:/customize/color-modes]]).
+
+
+
Long label text for the progress bar, set to a dark color
+`} />
+
+## Backgrounds
+
+Use background utility classes to change the appearance of individual progress bars.
+
+
+
+
+
+
+
+
+
+
+
+
+
`} />
+
+
+
+If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast.
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
`} />
+
+Alternatively, you can use the new combined [color and background]([[docsref:/helpers/color-background]]) helper classes.
+
+
+
75%
+`} />
+
+## Multiple bars
+
+You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
+
+
+
+
+
+
+
+
+
+
+
+`} />
+
+## Striped
+
+Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
+
+
+
+
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Second heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Third heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Fourth heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Fifth heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+```
+
+### Nested nav
+
+Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
+
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 1-1
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 1-2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 3
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 3-1
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 3-2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 3
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 4
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 3
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 4
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 5
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+```
+
+## Non-visible elements
+
+Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
+
+```js
+document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+ el.addEventListener('shown.bs.tab', () => {
+ const target = el.getAttribute('data-bs-target')
+ const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
+ bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
+ })
+})
+```
+
+## Usage
+
+### Via data attributes
+
+To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the ``). Then add the `data-bs-target` attribute with the `id` or class name of the parent element of any Bootstrap `.nav` component.
+
+```html
+
+ ...
+
+
+ ...
+
+
+ ...
+
+```
+
+### Via JavaScript
+
+```js
+const scrollSpy = new bootstrap.ScrollSpy(document.body, {
+ target: '#navbar-example'
+})
+```
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `rootMargin` | string | `0px 0px -25%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
+| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
+| `target` | string, DOM element | `null` | Specifies element to apply Scrollspy plugin. |
+| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position. |
+
+
+
+
+**Deprecated Options**
+
+Up until v5.1.3 we were using `offset` & `method` options, which are now deprecated and replaced by `rootMargin`.
+To keep backwards compatibility, we will continue to parse a given `offset` to `rootMargin`, but this feature will be removed in **v6**.
+
+
+### Methods
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) |
+| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn't initialized. |
+| `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. |
+
+
+Here's an example using the refresh method:
+
+```js
+const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
+dataSpyList.forEach(dataSpyEl => {
+ bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
+})
+```
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `activate.bs.scrollspy` | This event fires on the scroll element whenever an anchor is activated by the scrollspy. |
+
+
+```js
+const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
+firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
+ // do something...
+})
+```
diff --git a/site-new/src/content/docs/components/spinners.mdx b/site-new/src/content/docs/components/spinners.mdx
new file mode 100644
index 000000000000..9bae5ac12f1e
--- /dev/null
+++ b/site-new/src/content/docs/components/spinners.mdx
@@ -0,0 +1,175 @@
+---
+title: Spinners
+description: Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## About
+
+Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
+
+For accessibility purposes, each loader here includes `role="status"` and a nested `Loading...`.
+
+
+
+## Border spinner
+
+Use the border spinners for a lightweight loading indicator.
+
+
+ Loading...
+`} />
+
+### Colors
+
+The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
+
+ `
+ Loading...
+
`)} />
+
+
+**Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
+
+
+## Growing spinner
+
+If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
+
+
+ Loading...
+`} />
+
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants.
+
+ `
+ Loading...
+
`)} />
+
+## Alignment
+
+Spinners in Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.
+
+### Margin
+
+Use [margin utilities][margin] like `.m-5` for easy spacing.
+
+
+ Loading...
+`} />
+
+### Placement
+
+Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation.
+
+#### Flex
+
+
+
+`} />
+
+## Size
+
+Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components.
+
+
+ Loading...
+
+
+ Loading...
+
`} />
+
+Or, use custom CSS or inline styles to change the dimensions as needed.
+
+
+ Loading...
+
+
+ Loading...
+
`} />
+
+## Buttons
+
+Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
+
+
+
+ Loading...
+
+
+
+ Loading...
+`} />
+
+
+
+ Loading...
+
+
+
+ Loading...
+`} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+Border spinner variables:
+
+
+
+Growing spinner variables:
+
+
+
+For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
+
+
+
+### Sass variables
+
+
+
+### Keyframes
+
+Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`.
+
+
+
+
+
+
+[color]: [[docsref:/utilities/colors]]
+[flex]: [[docsref:/utilities/flex]]
+[float]: [[docsref:/utilities/float]]
+[margin]: [[docsref:/utilities/spacing]]
+[text]: [[docsref:/utilities/text]]
diff --git a/site-new/src/content/docs/components/toasts.mdx b/site-new/src/content/docs/components/toasts.mdx
new file mode 100644
index 000000000000..175589d903a4
--- /dev/null
+++ b/site-new/src/content/docs/components/toasts.mdx
@@ -0,0 +1,373 @@
+---
+title: Toasts
+description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
+toc: true
+---
+
+Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built with flexbox, so they're easy to align and position.
+
+## Overview
+
+Things to know when using the toast plugin:
+
+- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
+- Toasts will automatically hide if you do not specify `autohide: false`.
+
+
+
+## Examples
+
+### Basic
+
+To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.
+
+Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+`} />
+
+
+Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
+
+
+### Live example
+
+Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+
+
+ Show live toast
+
+
+```html
+Show live toast
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+```
+
+We use the following JavaScript to trigger our live toast demo:
+
+```js
+const toastTrigger = document.getElementById('liveToastBtn')
+const toastLiveExample = document.getElementById('liveToast')
+
+if (toastTrigger) {
+ const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
+ toastTrigger.addEventListener('click', () => {
+ toastBootstrap.show()
+ })
+}
+```
+
+### Translucent
+
+Toasts are slightly translucent to blend in with what's below them.
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+`} />
+
+### Stacking
+
+You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
+
+
+
+
+
+ Bootstrap
+ just now
+
+
+
+ See? Just like this.
+
+
+
+
+
+
+ Bootstrap
+ 2 seconds ago
+
+
+
+ Heads up, toasts will stack automatically
+
+
+`} />
+
+### Custom content
+
+Customize your toasts by removing sub-components, tweaking them with [utilities]([[docsref:/utilities/api]]), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]([[config:icons]]), and using some [flexbox utilities]([[docsref:/utilities/flex]]) to adjust the layout.
+
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+`} />
+
+Alternatively, you can also add additional controls and components to toasts.
+
+
+
+ Hello, world! This is a toast message.
+
+ Take action
+ Close
+
+
+`} />
+
+### Color schemes
+
+Building on the above example, you can create different toast color schemes with our [color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+`} />
+
+## Placement
+
+Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
+
+
+
+ Toast placement
+
+
+
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+ Hello, world! This is a toast message.
+
+
+
+
`} />
+
+For systems that generate more notifications, consider using a wrapping element so they can easily stack.
+
+
+
+
+
+
+
+
+
+
+
+
+ Bootstrap
+ just now
+
+
+
+ See? Just like this.
+
+
+
+
+
+
+ Bootstrap
+ 2 seconds ago
+
+
+
+ Heads up, toasts will stack automatically
+
+
+
+`} />
+
+You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
+
+
+
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+
+
`} />
+
+## Accessibility
+
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]([[docsref:/components/alerts]]) instead of toast.
+
+Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
+
+You also need to adapt the `role` and `aria-live` level depending on the content. If it's an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes.
+
+As the content you're displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
+
+```html
+
+
...
+
+```
+
+When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+`} />
+
+While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+Initialize toasts via JavaScript:
+
+```js
+const toastElList = document.querySelectorAll('.toast')
+const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
+```
+
+### Triggers
+
+
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the toast. |
+| `autohide` | boolean | `true` | Automatically hide the toast after the delay. |
+| `delay` | number | `5000` | Delay in milliseconds before hiding the toast. |
+
+
+### Methods
+
+
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. |
+| `getInstance` | *Static* method which allows you to get the toast instance associated with a DOM element. For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance. |
+| `getOrCreateInstance` | *Static* method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn't initialized. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance. |
+| `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
+| `isShown` | Returns a boolean according to toast's visibility state. |
+| `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. |
+
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. |
+| `show.bs.toast` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. |
+
+
+```js
+const myToastEl = document.getElementById('myToast')
+myToastEl.addEventListener('hidden.bs.toast', () => {
+ // do something...
+})
+```
diff --git a/site-new/src/content/docs/components/tooltips.mdx b/site-new/src/content/docs/components/tooltips.mdx
new file mode 100644
index 000000000000..044d6d2ac925
--- /dev/null
+++ b/site-new/src/content/docs/components/tooltips.mdx
@@ -0,0 +1,276 @@
+---
+title: Tooltips
+description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
+toc: true
+---
+
+## Overview
+
+Things to know when using the tooltip plugin:
+
+- Tooltips rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]([[config:cdn.popper]]) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
+- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
+- Tooltips with zero-length titles are never displayed.
+- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
+- Triggering tooltips on hidden elements will not work.
+- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior.
+- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
+- Tooltips can be triggered thanks to an element inside a shadow DOM.
+
+Got all that? Great, let's see how they work with some examples.
+
+
+
+
+
+## Examples
+
+### Enable tooltips
+
+As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
+
+```js
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+```
+
+### Tooltips on links
+
+Hover over the links below to see tooltips:
+
+Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.`} />
+
+
+
+### Custom tooltips
+
+
+
+You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
+
+
+
+
+
+ Custom tooltip
+`} />
+
+### Directions
+
+Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
+
+
+
+ Tooltip on top
+ Tooltip on right
+ Tooltip on bottom
+ Tooltip on left
+ Tooltip with HTML
+
+
+
+```html
+
+ Tooltip on top
+
+
+ Tooltip on right
+
+
+ Tooltip on bottom
+
+
+ Tooltip on left
+
+```
+
+And with custom HTML added:
+
+```html
+
+ Tooltip with HTML
+
+```
+
+With an SVG:
+
+
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
+
+```js
+const exampleEl = document.getElementById('example')
+const tooltip = new bootstrap.Tooltip(exampleEl, options)
+```
+
+
+Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
+
+```js
+const tooltip = new bootstrap.Tooltip('#example', {
+ boundary: document.body // or document.querySelector('#boundary')
+})
+```
+
+
+### Markup
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
+
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
+
+
+```html
+
+Hover over me
+
+
+
+
+
+ Some tooltip text!
+
+
+```
+
+### Disabled elements
+
+Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
+
+
+
+ Disabled button
+`} />
+
+
+### Options
+
+
+
+
+Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `allowList` | object | [Default value]([[docsref:/getting-started/javascript#sanitizer]]) | Object which contains allowed attributes and tags. |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
+| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
+| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
+| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
+| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
+| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
+| `offset` | array, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
+| `template` | string | `'
'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
+| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the tooltip is attached to. |
+| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+
+
+
+#### Data attributes for individual tooltips
+
+Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
+
+
+#### Using function with `popperConfig`
+
+```js
+const tooltip = new bootstrap.Tooltip(element, {
+ popperConfig(defaultBsPopperConfig) {
+ // const newPopperConfig = {...}
+ // use defaultBsPopperConfig if needed...
+ // return newPopperConfig
+ }
+})
+```
+
+### Methods
+
+
+
+
+| Method | Description |
+| --- | --- |
+| `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. |
+| `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** |
+| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
+| `setContent` | Gives a way to change the tooltip's content after its initialization. |
+| `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. |
+| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
+| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. |
+| `update` | Updates the position of an element's tooltip. |
+
+
+```js
+const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
+
+// setContent example
+tooltip.setContent({ '.tooltip-inner': 'another title' })
+
+```
+
+
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null`
+
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. |
+| `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
+
+
+```js
+const myTooltipEl = document.getElementById('myTooltip')
+const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)
+
+myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ // do something...
+})
+
+tooltip.hide()
+```
diff --git a/site-new/src/content/docs/content/figures.mdx b/site-new/src/content/docs/content/figures.mdx
new file mode 100644
index 000000000000..0024f4eab469
--- /dev/null
+++ b/site-new/src/content/docs/content/figures.mdx
@@ -0,0 +1,27 @@
+---
+title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
+toc: true
+---
+
+Anytime you need to display a piece of content—like an image with an optional caption, consider using a ``} />
+
+## CSS
+
+### Sass variables
+
+
diff --git a/site-new/src/content/docs/content/images.mdx b/site-new/src/content/docs/content/images.mdx
new file mode 100644
index 000000000000..11bcc8950dc8
--- /dev/null
+++ b/site-new/src/content/docs/content/images.mdx
@@ -0,0 +1,51 @@
+---
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
+toc: true
+---
+
+## Responsive images
+
+Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
+
+`} />
+
+## Image thumbnails
+
+In addition to our [border-radius utilities]([[docsref:/utilities/borders]]), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+`} />
+
+## Aligning images
+
+Align images with the [helper float classes]([[docsref:/utilities/float]]) or [text alignment classes]([[docsref:/utilities/text#text-alignment]]). `block`-level images can be centered using [the `.mx-auto` margin utility class]([[docsref:/utilities/spacing#horizontal-centering]]).
+
+
+`} />
+
+
+`} />
+
+
+
+