Include all of Bootstrap’s Sass

Import one stylesheet and you're off to the races with every feature of our CSS.

+ {{ highlight (printf `// Variable overrides first +$primary: #900; +$enable-shadows: true; +$prefix: "mo-"; + +// Then import Bootstrap +@import "../node_modules/bootstrap/scss/bootstrap"; +`) "scss" "" }} +

Learn more about our global Sass options.

Include what you need

The easiest way to customize Bootstrap—include only the CSS you need.

+{{ highlight (printf `// Functions first +@import "../node_modules/bootstrap/scss/functions"; + +// Variable overrides second +$primary: #900; +$enable-shadows: true; +$prefix: "mo-"; + +// Required Bootstrap imports +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/maps"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// Optional components +@import "../node_modules/bootstrap/scss/utilities"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/helpers"; +@import "../node_modules/bootstrap/scss/utilities/api"; +`) "scss" "" }} +

Learn more about using Bootstrap with Sass.

+ +

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

+ + Learn more about CSS variables + + +

Using CSS variables

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.

+ {{ highlight (printf `.component { + color: var(--bs-gray-800); + background-color: var(--bs-gray-100); + border: 1px solid var(--bs-gray-200); + border-radius: .25rem; +} + +.component-header { + color: var(--bs-purple); +}`) "scss" "" }} +

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.

+ {{ highlight (printf `body { + --bs-body-font-family: var(--bs-font-monospace); + --bs-body-line-height: 1.4; + --bs-body-bg: var(--bs-gray-100); +} + +.table { + --bs-table-color: var(--bs-gray-600); + --bs-table-bg: var(--bs-gray-100); + --bs-table-border-color: transparent; +}`) "scss" "" }} +

+ +

+ + + +

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

+ + Learn more about utilities + + + + Explore customized components + + +

Quickly customize components

+ {{ highlight (printf `// Create and extend utilities with the Utility API + +@import "bootstrap/scss/bootstrap"; + +$utilities: map-merge( + $utilities, + ( + "cursor": ( + property: cursor, + class: cursor, + responsive: true, + values: auto pointer grab, + ) + ) +); +`) "scss" "" }} +

+ +

Powerful JavaScript plugins without jQuery

+ Easily add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. JavaScript in Bootstrap is HTML-first, which means adding plugins is as easy as adding data attributes. Need more control? Include individual plugins programmatically. +

+ + Learn more about Bootstrap JavaScript + + +

Data attribute API

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.

+ +

+ + {{ highlight (printf ` +`) "html" "" }} +

Learn more about our JavaScript as modules and using the programmatic API.

Comprehensive set of plugins

Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.

+ {{- range $plugin := .Site.Data.plugins -}} + {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }} +

+ +

+ {{ $plugin.description }} + +

+ {{- end }} +

+ +

+ -

Bootstrap Icons

Personalize it with Bootstrap Icons

- For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation. + Bootstrap Icons is an open source SVG icon library featuring over 1,500 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.

- Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implemented in several ways, and can be styled with CSS. +

+ + Get Bootstrap Icons + +

- Get Bootstrap Icons

+ -

Official Themes

Make it yours with official Bootstrap Themes

- Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. + 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.

- Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. +

+ + Browse Bootstrap Themes + +

- Browse themes

- {{ partial "icons/homepage-hero.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "600" "height" "533") }} -

Build fast, responsive sites with Bootstrap

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

- -

- Get started - Download +

+ + + CSS variables, responsive offcanvas, new utilities, and more! + +

Build fast, responsive sites with Bootstrap

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

+ {{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }}

- Currently v{{ .Site.Params.current_version }} - · - v4.6.x docs - · - All releases -

+ + + Read the docs +

+ Currently v{{ .Site.Params.current_version }} + · + Download + · + v4.6.x docs + · + All releases +

+ {{ partial "ads" . }}

- {{ partial "ads" . }}

diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons.html b/vendor/twbs/bootstrap/site/layouts/partials/icons.html new file mode 100644 index 000000000..9841e143a --- /dev/null +++ b/vendor/twbs/bootstrap/site/layouts/partials/icons.html @@ -0,0 +1,72 @@ + diff --git a/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md b/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md new file mode 100644 index 000000000..e99ff7112 --- /dev/null +++ b/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md @@ -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/vendor/twbs/bootstrap/site/layouts/partials/scripts.html b/vendor/twbs/bootstrap/site/layouts/partials/scripts.html index d25add3ff..3378a230e 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/scripts.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/scripts.html @@ -5,7 +5,8 @@ {{- end }} {{ if eq .Page.Layout "docs" -}} - + + {{- end }} {{- $vendor := resources.Match "js/vendor/*.js" -}} @@ -18,3 +19,54 @@ {{- end }} + +{{ if eq .Page.Layout "docs" -}} + +{{- end }} diff --git a/vendor/twbs/bootstrap/site/layouts/partials/stylesheet.html b/vendor/twbs/bootstrap/site/layouts/partials/stylesheet.html index cc4473383..1aa329699 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/stylesheet.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/stylesheet.html @@ -1,4 +1,7 @@ -{{- "" | safeHTML }} +{{ if eq .Page.Layout "docs" -}} + +{{- end }} + {{ if eq hugo.Environment "production" -}} {{ if eq .Page.Params.direction "rtl" -}} -- cgit v1.2.3

Read our getting started guides

Customize everything with Sass

Include all of Bootstrap’s Sass

Include what you need

Build and extend in real-time with CSS variables

Using CSS variables

Customizing via CSS variables

Components, meet the Utility API

Quickly customize components

Powerful JavaScript plugins without jQuery

Data attribute API

Comprehensive set of plugins

{{ $plugin.name }}

Bootstrap Icons

Personalize it with Bootstrap Icons

Official Themes

Make it yours with official Bootstrap Themes

Build fast, responsive sites with Bootstrap

Build fast, responsive sites with Bootstrap