"watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
"watch-js-docs": "nodemon --watch site/src/assets/ --ext js --exec \"npm run js-lint\"",
"astro-clean": "rm -rf site/.astro site/node_modules/.astro",
- "astro-dev": "astro dev --root site",
+ "astro-dev": "astro dev --root site --port ${PORT:-9001}",
"astro-build": "astro build --root site && rm -rf _site && cp -r site/dist _site && pagefind --site _site",
- "astro-preview": "astro preview --root site",
+ "astro-preview": "astro preview --root site --port 9001",
"spellcheck": "cspell --config .cspell.json \"**/*.{md,mdx}\""
},
"peerDependencies": {
$badge-tokens: () !default;
+// stylelint-disable custom-property-no-missing-var-function, scss/dollar-variable-default
+
// scss-docs-start badge-tokens
-// stylelint-disable-next-line scss/dollar-variable-default
$badge-tokens: defaults(
(
--badge-padding-x: .625em,
) !default;
// scss-docs-end badge-variants
+// stylelint-enable custom-property-no-missing-var-function, scss/dollar-variable-default
+
@layer components {
.badge {
@include tokens($badge-tokens);
}
}
+ // stylelint-disable-next-line selector-no-qualifying-type
+ a.badge {
+ text-decoration: none;
+ }
+
// Quick fix for badges in buttons
.btn .badge {
position: relative;
}
}
// scss-docs-end badge-variant-loop
+
+ .badge-lg {
+ --badge-padding-x: 1rem;
+ --badge-padding-y: .5rem;
+ }
}
"line-height": 1.5
),
"lg": (
- "font-size": clamp(1.25rem, 1rem + .625vw, 1.5rem),
+ "font-size": clamp(1.125rem, 1rem + .625vw, 1.25rem),
"line-height": 1.5
),
"xl": (
@include transition(.1s text-decoration-color ease-in-out);
&:hover {
+ color: var(--link-hover-color);
text-decoration-color: var(--link-hover-color);
}
}
import { getVersionedDocsPath } from '@libs/path'
---
-<footer class="bd-footer py-4 md:py-5 mt-5 bg-body-tertiary">
- <div class="container py-4 md:py-5 px-4 md:px-3 fg-2">
+<footer class="bd-footer py-4 md:py-5 mt-5 fg-2">
+ <div class="container bd-gutter">
<div class="row">
<div class="lg:col-3 mb-3">
- <a
- class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"
- href="/"
- aria-label="Bootstrap"
- >
+ <a class="d-inline-flex align-items-center mb-2 fg-body text-decoration-none" href="/" aria-label="Bootstrap">
<BootstrapWhiteFillIcon class="d-block me-2" height={32} width={40} />
- <span class="fs-5">Bootstrap</span>
+ <span class="fs-5 fw-medium">Bootstrap</span>
</a>
<ul class="list-unstyled small">
<li class="mb-2">
</div>
<div class="col-6 lg:col-2 lg:offset-1 mb-3">
<h5>Links</h5>
- <ul class="list-unstyled">
- <li
class="mb-2"><a href="/">Home</a></li>
- <li
class="mb-2"><a href={getVersionedDocsPath('/')}>Docs</a></li>
- <li
class="mb-2"><a href={getVersionedDocsPath('examples')}>Examples</a></li>
- <li
class="mb-2"><a href={getConfig().icons}>Icons</a></li>
- <li
class="mb-2"><a href={getConfig().blog}>Blog</a></li>
- <li
class="mb-2"><a href={getConfig().swag} target="_blank" rel="noopener">Swag Store</a></li>
+ <ul class="list-unstyled vstack gap-2">
+ <li><a href="/">Home</a></li>
+ <li><a href={getVersionedDocsPath('/')}>Docs</a></li>
+ <li><a href={getVersionedDocsPath('examples')}>Examples</a></li>
+ <li><a href={getConfig().icons}>Icons</a></li>
+ <li><a href={getConfig().blog}>Blog</a></li>
+ <li><a href={getConfig().swag} target="_blank" rel="noopener">Swag Store</a></li>
</ul>
</div>
<div class="col-6 lg:col-2 mb-3">
<h5>Guides</h5>
- <ul class="list-unstyled">
- <li
class="mb-2"><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
- <li
class="mb-2"><a href={getVersionedDocsPath('examples/starter-template')}>Starter template</a></li>
- <li
class="mb-2"><a href={getVersionedDocsPath('guides/webpack')}>Webpack</a></li>
- <li
class="mb-2"><a href={getVersionedDocsPath('guides/parcel')}>Parcel</a></li>
- <li
class="mb-2"><a href={getVersionedDocsPath('guides/vite')}>Vite</a></li>
+ <ul class="list-unstyled vstack gap-2">
+ <li><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
+ <li><a href={getVersionedDocsPath('examples/starter-template')}>Starter template</a></li>
+ <li><a href={getVersionedDocsPath('guides/webpack')}>Webpack</a></li>
+ <li><a href={getVersionedDocsPath('guides/parcel')}>Parcel</a></li>
+ <li><a href={getVersionedDocsPath('guides/vite')}>Vite</a></li>
</ul>
</div>
<div class="col-6 lg:col-2 mb-3">
<h5>Projects</h5>
- <ul class="list-unstyled">
- <li class="mb-2">
+ <ul class="list-unstyled vstack gap-2">
+ <li>
<a href={`${getConfig().github_org}/bootstrap`} target="_blank" rel="noopener">Bootstrap 6</a>
</li>
- <li class="mb-2">
+ <li>
<a href={`${getConfig().github_org}/bootstrap/tree/v5-dev`} target="_blank" rel="noopener">Bootstrap 5</a>
</li>
- <li
class="mb-2"><a href={`${getConfig().github_org}/icons`} target="_blank" rel="noopener">Icons</a></li>
- <li class="mb-2">
+ <li><a href={`${getConfig().github_org}/icons`} target="_blank" rel="noopener">Icons</a></li>
+ <li>
<a href={`${getConfig().github_org}/examples`} target="_blank" rel="noopener">Examples repo</a>
</li>
</ul>
</div>
<div class="col-6 lg:col-2 mb-3">
<h5>Community</h5>
- <ul class="list-unstyled">
- <li class="mb-2">
+ <ul class="list-unstyled vstack gap-2">
+ <li>
<a href={`${getConfig().github_org}/bootstrap/issues`} target="_blank" rel="noopener">Issues</a>
</li>
- <li class="mb-2">
+ <li>
<a href={`${getConfig().github_org}/bootstrap/discussions`} target="_blank" rel="noopener">Discussions</a>
</li>
- <li class="mb-2">
+ <li>
<a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a>
</li>
- <li
class="mb-2"><a href={getConfig().opencollective} target="_blank" rel="noopener">Open Collective</a></li>
- <li class="mb-2">
+ <li><a href={getConfig().opencollective} target="_blank" rel="noopener">Open Collective</a></li>
+ <li>
<a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener"
>Stack Overflow</a
>
const activeSection = !layout ? 'Home' : title === 'Examples' ? 'Examples' : 'Docs'
---
-<header class="navbar lg:navbar-expand bd-navbar border-bottom">
+<header class="navbar lg:navbar-expand bd-navbar border-bottom border-inverse border-20">
<nav class="2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start" aria-label="Main navigation">
<div class="d-flex align-items-center gap-2 lg:gap-1">
<a class="navbar-brand p-0 me-0 lg:me-2" href="/" aria-label="Bootstrap" style="color: var(--bs-indigo-500);">
import Code from '@shortcodes/Code.astro'
---
-<div class="lg:col-7 mx-auto pb-3 mb-3 md:mb-5 md:text-center">
- <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use href="#code"></use></svg>
- </div>
- <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you want</h2>
- <p class="fs-lg fw-light">
- Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
- </p>
- <p class="d-flex md:justify-content-center fs-lg fw-light">
- <a href={getVersionedDocsPath('getting-started/install/')} class="icon-link icon-link-hover fw-semibold md:ps-4">
- Read installation docs
- <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
- </a>
- </p>
-</div>
-
<section class="row g-3 md:g-5 mb-5 pb-5 justify-content-center">
- <div class="lg:col-6 lg:py-4 lg:pe-5">
- <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use href="#box-seam"></use></svg>
- <h3 class="fw-semibold">Install via package manager</h3>
- <p class="lg:pe-5">
- 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 <a
- href="https://github.com/twbs/examples/">use any demo from our Examples repo</a
- > to quickly jumpstart Bootstrap projects.
- </p>
- <Code code={`npm install bootstrap@${getConfig().current_version}`} lang="sh" />
- <Code code={`gem install bootstrap -v ${getConfig().current_ruby_version}`} lang="sh" />
- <p>
- <a href={getVersionedDocsPath('getting-started/install')}>Read our installation docs</a> for more info and additional
- package managers.
- </p>
- </div>
- <div class="lg:col-6 lg:py-4 lg:ps-5 border-lg-start">
- <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use href="#globe2"></use></svg>
- <h3 class="fw-semibold">Include via CDN</h3>
- <p class="lg:pe-5">
- When you only need to include Bootstrap’s compiled CSS or JS, you can use <a
- href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a
- >. See it in action with our simple <a href={getVersionedDocsPath('guides/quickstart/')}>quick start</a>, or <a
- href={getVersionedDocsPath('examples')}>browse the examples</a
- > to jumpstart your next project.
- </p>
- <Code
- code={`<link href="${getConfig().cdn.css}" rel="stylesheet" integrity="${
- getConfig().cdn.css_hash
- }" crossorigin="anonymous">`}
- lang="html"
- />
- <Code
- code={`<script type="module" src="${getConfig().cdn.js_bundle}" integrity="${
- getConfig().cdn.js_bundle_hash
- }" crossorigin="anonymous"></script>`}
- lang="html"
- />
- </div>
-
<div class="md:col-8 mx-auto text-center">
<h4 class="fw-semibold">Read our getting started guides</h4>
<p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
import { getVersionedDocsPath } from '@libs/path'
import Ads from '@components/Ads.astro'
import CodeCopy from '@components/shortcodes/CodeCopy.astro'
-import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
---
<div class="bd-masthead mb-3" id="content">
<div class="2xl:container bd-gutter">
- <div class="md:col-8 mx-auto text-center">
+ <div class="md:col-8 mx-auto d-flex flex-column gap-5 align-items-center text-center">
<a
- class="d-flex flex-column lg:flex-row justify-content-center align-items-center mb-4 lh-sm text-decoration-none fs-sm"
+ class="badge badge-subtle badge-lg fs-md fw-normal theme-warning border border-bg border-50 rounded-pill gap-1"
href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol"
rel="noopener"
target="_blank"
>
- <span
- class="sm:d-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 lg:mb-0 rounded-5 masthead-notice theme-subtle theme-warning"
+ Security updates for Bootstrap 3 & 4
+ <svg class="bi" style="width: 20px; height: 20px;" aria-hidden="true"><use href="#arrow-right-short"></use></svg
>
- Get Security Updates for Bootstrap 3 & 4
- <svg class="bi" style="width: 20px; height: 20px; margin-block: -2px;" aria-hidden="true"
- ><use href="#arrow-right-short"></use></svg
- >
- </span>
</a>
- <ResponsiveImage
- imgPath="/assets/brand/bootstrap-logo-shadow.png"
- alt="Bootstrap"
- width={200}
- height={165}
- classes="d-none sm:d-block mx-auto mb-3"
- lazyload={false}
- />
- <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with Bootstrap</h1>
- <p class="fs-lg fw-light mb-4">
- 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.
- </p>
- <div class="d-flex flex-column lg:flex-row md:align-items-stretch md:justify-content-center gap-3 mb-4">
+ <div class="d-flex flex-column gap-3">
+ <h1 class="fw-semibold lh-1 text-balance">Bootstrap is the open source design system for everyone</h1>
+ <p class="fs-lg fg-2 mb-0 text-balance">
+ Bootstrap 6 has been rebuilt for today's web as a framework-agnostic design toolkit that anyone—human or AI,
+ novice or pro—can use to build anything. New standards, new components, an updated visual design, CSS-first
+ theming, and more powerful JavaScript plugins.
+ <!-- <br/><a href="https://blog.getbootstrap.com/2026/07/15/bootstrap-6/" class="underline-30">Read the v6 announcement post.</a> -->
+ </p>
+ </div>
+ <div class="d-flex flex-column lg:flex-row md:align-items-stretch md:my-2 gap-2">
<CodeCopy code={`npm i bootstrap@${getConfig().current_version}`} />
<a
href={getVersionedDocsPath('getting-started/install')}
- class="btn-solid theme-accent btn-lg justify-content-center"
+ class="btn-solid btn-styled theme-accent btn-lg justify-content-center fw-medium"
>
<svg class="bi me-2" aria-hidden="true"><use href="#book-half"></use></svg>
Read the docs
<p class="fg-2 mb-0">
Currently <strong>v{getConfig().current_version}</strong>
<span class="px-1">·</span>
- <a href={getVersionedDocsPath('getting-started/install')} class="theme-secondary">Download</a>
+ <a
+ href={getVersionedDocsPath('getting-started/install')}
+ class="theme-secondary underline-50 underline-secondary">Download</a
+ >
<span class="px-1">·</span>
- <a href="/docs/versions/" class="theme-secondary text-nowrap">All releases</a>
+ <a href="/docs/versions/" class="theme-secondary underline-50 underline-secondary text-nowrap">All releases</a>
</p>
<Ads />
</div>
---
import BaseLayout from '@layouts/BaseLayout.astro'
-import GetStarted from '@components/home/GetStarted.astro'
-import Customize from '@components/home/Customize.astro'
-import CSSVariables from '@components/home/CSSVariables.astro'
-import ComponentUtilities from '@components/home/ComponentUtilities.astro'
import MastHead from '@components/home/MastHead.astro'
-import Plugins from '@components/home/Plugins.astro'
-import Icons from '@components/home/Icons.astro'
---
<BaseLayout>
<MastHead />
- <div class="2xl:container bd-gutter masthead-followup">
- <GetStarted />
- <Customize />
- <CSSVariables />
- <ComponentUtilities />
- <Plugins />
- <Icons />
- </div>
</BaseLayout>
@use "../../../scss/mixins/border-radius" as *;
-// stylelint-disable selector-max-id
+// stylelint-disable selector-max-id, declaration-no-important
@layer custom {
#carbon-responsive .carbon-responsive-wrap {
- @include border-radius(var(--radius-7));
+ padding: 1rem !important;
+ border: 0 !important;
+ @include border-radius(var(--radius-7) !important);
}
.carbon-img {
position: relative;
pre {
margin: 0;
- font-size: var(--bs-font-size-md) !important; // stylelint-disable-line declaration-no-important
+ font-size: 95% !important; // stylelint-disable-line declaration-no-important
background-color: transparent !important; // stylelint-disable-line declaration-no-important
}
-@use "sass:math";
-@use "../../../scss/mixins/border-radius" as *;
-@use "../../../scss/mixins/transition" as *;
+// @use "sass:math";
+@use "../../../scss/layout/breakpoints" as *;
+// @use "../../../scss/mixins/border-radius" as *;
+// @use "../../../scss/mixins/transition" as *;
@layer custom {
.bd-masthead {
- padding: 3rem 0;
+ padding-block: 3rem;
// stylelint-disable
- background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-bg-body) 1%, transparent), var(--bs-bg-body) 85%),
- radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
- radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
- radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
- radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
+ background-image: linear-gradient(180deg, color-mix(in oklch, var(--bs-bg-body) 1%, transparent), var(--bs-bg-body) 85%),
+ radial-gradient(ellipse at top left, color-mix(in oklch, var(--bs-blue-500) 50%, transparent), transparent 50%),
+ radial-gradient(ellipse at top right, color-mix(in oklch, var(--bd-accent) 50%, transparent), transparent 50%),
+ radial-gradient(ellipse at center right, color-mix(in oklch, var(--bd-violet) 50%, transparent), transparent 50%),
+ radial-gradient(ellipse at center left, color-mix(in oklch, var(--bs-pink-500) 50%, transparent), transparent 50%);
// stylelint-enable
h1 {
--bs-heading-color: var(--bs-fg-body);
- font-size: var(--bs-font-size-4xl);
+ font-size: var(--bs-font-size-3xl);
+ letter-spacing: -.025em;
+
+ @include media-breakpoint-up(lg) {
+ font-size: var(--bs-font-size-4xl);
+ }
}
.btn-clipboard {
#carbonads { // stylelint-disable-line selector-max-id
max-width: 400px;
- margin-block: 2rem;
- margin-inline: auto;
+ margin-block-start: 3rem;
}
- }
- .masthead-followup {
- h2,
- h3,
- h4 {
- --bs-heading-color: var(--bs-fg-body);
+ @include media-breakpoint-up(md) {
+ display: grid;
+ place-items: center;
+ height: calc(100vh - var(--bd-navbar-offset));
}
- }
- .masthead-followup-icon {
- padding: 1rem;
- color: rgba(var(--bg-rgb), 1);
- background-color: rgba(var(--bg-rgb), .1);
- background-blend-mode: multiply;
- @include border-radius(1rem);
- mix-blend-mode: darken;
-
- svg {
- filter: drop-shadow(0 1px 1px var(--bs-bg-body));
+ @include media-breakpoint-up(lg) {
+ // padding-block: 6rem;
}
}
- .masthead-notice {
- background-color: var(--bd-accent);
- box-shadow: inset 0 -1px 1px color-mix(in oklch, var(--body-color) #{math.percentage(.15)}, transparent), 0 .25rem 1.5rem color-mix(in oklch, var(--body-bg) #{math.percentage(.75)}, transparent);
- }
+ // .masthead-followup {
+ // h2,
+ // h3,
+ // h4 {
+ // --bs-heading-color: var(--bs-fg-body);
+ // }
- .animate-img {
- > img {
- @include transition(transform .2s ease-in-out);
- }
+ // .lead {
+ // font-size: 1rem;
+ // }
- &:hover > img {
- transform: scale(1.1);
- }
+ // @include media-breakpoint-up(md) {
+ // .lead {
+ // font-size: 1.25rem;
+ // }
+ // }
+ // }
- &:active > img {
- transform: scale(1);
- }
- }
+ // .masthead-followup-icon {
+ // padding: 1rem;
+ // color: rgba(var(--bg-rgb), 1);
+ // background-color: rgba(var(--bg-rgb), .1);
+ // background-blend-mode: multiply;
+ // @include border-radius(1rem);
+ // mix-blend-mode: darken;
+
+ // svg {
+ // filter: drop-shadow(0 1px 1px var(--bs-bg-body));
+ // }
+ // }
+
+ // .masthead-notice {
+ // background-color: var(--bd-accent);
+ // box-shadow: inset 0 -1px 1px color-mix(in oklch, var(--body-color) #{math.percentage(.15)}, transparent), 0 .25rem 1.5rem color-mix(in oklch, var(--body-bg) #{math.percentage(.75)}, transparent);
+ // }
+
+ // .animate-img {
+ // > img {
+ // @include transition(transform .2s ease-in-out);
+ // }
+
+ // &:hover > img {
+ // transform: scale(1.1);
+ // }
+
+ // &:active > img {
+ // transform: scale(1);
+ // }
+ // }
}
projects / thirdparty / bootstrap.git / commitdiff
