diff --git a/site/content/docs/5.3/examples/badges/badges.css b/site/content/docs/5.3/examples/badges/badges.css new file mode 100644 index 0000000000..37e00d9e87 --- /dev/null +++ b/site/content/docs/5.3/examples/badges/badges.css @@ -0,0 +1,13 @@ +/* +.text-warning { + color: #997404 !important; +} + +.text-info { + color: #087990 !important; +} +*/ + +.badge > a { + color: inherit; +} diff --git a/site/content/docs/5.3/examples/badges/index.html b/site/content/docs/5.3/examples/badges/index.html new file mode 100644 index 0000000000..a452d36665 --- /dev/null +++ b/site/content/docs/5.3/examples/badges/index.html @@ -0,0 +1,149 @@ +--- +layout: examples +title: Badges +extra_css: + - "badges.css" +body_class: "" +--- + + + + + + + +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ +
+ +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ +
+ +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ +
+ +
+ + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + +
+ +
+ +
+ + Primary + + + + Primary + + + + Primary + + +
+ +
+ +
+ + + Primary + + + + + + Secondary + + + + + + Success + + + + + + Danger + + + + + + Warning + + + + + + Info + + + + + + Light + + + + + + Dark + + + +
diff --git a/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css b/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css new file mode 100644 index 0000000000..a6be558618 --- /dev/null +++ b/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css @@ -0,0 +1,50 @@ +.breadcrumb-chevron { + --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); + gap: .5rem; +} +.breadcrumb-chevron .breadcrumb-item { + display: flex; + gap: inherit; + align-items: center; + padding-left: 0; + line-height: 1; +} +.breadcrumb-chevron .breadcrumb-item::before { + gap: inherit; + float: none; + width: 1rem; + height: 1rem; +} + +.breadcrumb-custom .breadcrumb-item { + position: relative; + flex-grow: 1; + padding: .75rem 3rem; +} +.breadcrumb-custom .breadcrumb-item::before { + display: none; +} +.breadcrumb-custom .breadcrumb-item::after { + position: absolute; + top: 50%; + right: -25px; + z-index: 1; + display: inline-block; + width: 50px; + height: 50px; + margin-top: -25px; + content: ""; + background-color: var(--bs-tertiary-bg); + border-top-right-radius: .5rem; + box-shadow: 1px -1px var(--bs-border-color); + transform: scale(.707) rotate(45deg); +} +.breadcrumb-custom .breadcrumb-item:first-child { + padding-left: 1.5rem; +} +.breadcrumb-custom .breadcrumb-item:last-child { + padding-right: 1.5rem; +} +.breadcrumb-custom .breadcrumb-item:last-child::after { + display: none; +} diff --git a/site/content/docs/5.3/examples/breadcrumbs/index.html b/site/content/docs/5.3/examples/breadcrumbs/index.html new file mode 100644 index 0000000000..f2e6e5dff0 --- /dev/null +++ b/site/content/docs/5.3/examples/breadcrumbs/index.html @@ -0,0 +1,101 @@ +--- +layout: examples +title: Breadcrumbs +extra_css: + - "breadcrumbs.css" +body_class: "" +--- + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/site/content/docs/5.3/examples/buttons/index.html b/site/content/docs/5.3/examples/buttons/index.html new file mode 100644 index 0000000000..82b59e64d0 --- /dev/null +++ b/site/content/docs/5.3/examples/buttons/index.html @@ -0,0 +1,94 @@ +--- +layout: examples +title: Buttons +body_class: "" +--- + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ +
+ +
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ +
diff --git a/site/content/docs/5.3/examples/jumbotrons/index.html b/site/content/docs/5.3/examples/jumbotrons/index.html new file mode 100644 index 0000000000..bd915d9771 --- /dev/null +++ b/site/content/docs/5.3/examples/jumbotrons/index.html @@ -0,0 +1,85 @@ +--- +layout: examples +title: Jumbotrons +extra_css: + - "jumbotrons.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + +
+
+ +

Jumbotron with icon

+

+ 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. +

+
+
+ +
diff --git a/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css b/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css new file mode 100644 index 0000000000..d7d065ed64 --- /dev/null +++ b/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css @@ -0,0 +1 @@ +.border-dashed { --bs-border-style: dashed; } diff --git a/site/content/docs/5.3/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html index 5900623688..6c9c82cb46 100644 --- a/site/content/docs/5.3/examples/pricing/index.html +++ b/site/content/docs/5.3/examples/pricing/index.html @@ -16,16 +16,16 @@ include_js: false
- + Bootstrap Pricing example
diff --git a/site/content/docs/5.3/examples/pricing/pricing.css b/site/content/docs/5.3/examples/pricing/pricing.css index c7304d10be..eb03cead5e 100644 --- a/site/content/docs/5.3/examples/pricing/pricing.css +++ b/site/content/docs/5.3/examples/pricing/pricing.css @@ -1,5 +1,5 @@ body { - background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); + background-image: linear-gradient(180deg, var(--bs-body-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); } .container { diff --git a/site/data/examples.yml b/site/data/examples.yml index b8db98638e..017aaa7c5e 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -43,6 +43,14 @@ description: "Extend list groups with utilities and custom styles for any content." - name: Modals description: "Transform modals to serve any purpose, from feature tours to dialogs." + - name: Badges + description: "Make badges work with custom inner HTML and new looks." + - name: Breadcrumbs + description: "Integrate custom icons and create stepper components." + - name: Buttons + description: "Create custom buttons for just about any use case with utilities." + - name: Jumbotrons + description: "Create modernized versions of the classic Bootstrap component." - category: Custom Components description: "Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." diff --git a/site/static/docs/5.3/assets/img/examples/badges.png b/site/static/docs/5.3/assets/img/examples/badges.png new file mode 100644 index 0000000000..8e5fd9fd7e Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/badges.png differ diff --git a/site/static/docs/5.3/assets/img/examples/badges@2x.png b/site/static/docs/5.3/assets/img/examples/badges@2x.png new file mode 100644 index 0000000000..5fff196a20 Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/badges@2x.png differ diff --git a/site/static/docs/5.3/assets/img/examples/breadcrumbs.png b/site/static/docs/5.3/assets/img/examples/breadcrumbs.png new file mode 100644 index 0000000000..b67c355c99 Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/breadcrumbs.png differ diff --git a/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png b/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png new file mode 100644 index 0000000000..3083e9ea42 Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png differ diff --git a/site/static/docs/5.3/assets/img/examples/buttons.png b/site/static/docs/5.3/assets/img/examples/buttons.png new file mode 100644 index 0000000000..1f6983daaf Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/buttons.png differ diff --git a/site/static/docs/5.3/assets/img/examples/buttons@2x.png b/site/static/docs/5.3/assets/img/examples/buttons@2x.png new file mode 100644 index 0000000000..caf7bd37e4 Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/buttons@2x.png differ diff --git a/site/static/docs/5.3/assets/img/examples/jumbotrons.png b/site/static/docs/5.3/assets/img/examples/jumbotrons.png new file mode 100644 index 0000000000..c6feef08c5 Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/jumbotrons.png differ diff --git a/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png b/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png new file mode 100644 index 0000000000..880c027e98 Binary files /dev/null and b/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png differ