v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< div class = "container-xxl bd-gutter masthead-followup" >
< div class = "col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center" >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bd-violet-rgb);" >
< svg class = "bi fs-1" > < use xlink:href = "#code" > < / use > < / svg >
2020-05-31 04:00:08 +02:00
< / div >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Get started any way you want< / h2 >
< p class = "lead fw-normal" >
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
< / p >
< p class = "d-flex justify-content-md-start justify-content-md-center lead fw-normal" >
< a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class = "icon-link fw-semibold justify-content-center ps-md-4" >
Read installation docs
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
< / p >
< / div >
2019-01-08 17:33:28 +01:00
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< section class = "row g-3 g-md-5 mb-5 pb-5 justify-content-center" >
< div class = "col-lg-6 py-lg-4 pe-lg-5" >
< svg class = "bi mb-2 fs-2 text-muted" > < use xlink:href = "#box-seam" > < / use > < / svg >
< h3 class = "fw-semibold" > Install via package manager< / h3 >
< p class = "pe-lg-5" >
Install Bootstrap’ ’ < a href = "https://github.com/twbs/bootstrap-npm-starter" > use our npm template repo< / a > to quickly generate a Bootstrap project via npm.
2020-05-31 04:00:08 +02:00
< / p >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
{{ highlight "npm install bootstrap" "sh" "" }}
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
2020-05-31 04:00:08 +02:00
< p >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/download/" > Read our installation docs< / a > for more info and additional package managers.
2020-05-31 04:00:08 +02:00
< / p >
< / div >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< div class = "col-lg-6 py-lg-4 ps-lg-5 border-lg-start" >
< svg class = "bi mb-2 fs-2 text-muted" > < use xlink:href = "#globe2" > < / use > < / svg >
< h3 class = "fw-semibold" > Include via CDN< / h3 >
< p class = "pe-lg-5" >
2022-04-21 07:27:28 +02:00
When you only need to include Bootstrap’ < a href = "https://www.jsdelivr.com/package/npm/bootstrap" > jsDelivr< / a > . See it in action with our simple < a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start" > quick start< / a > , or < a href = "/docs/{{ .Site.Params.docs_version }}/examples/" > browse the examples< / a > to jumpstart your next project. You can also choose to include Popper and our JS < a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate" > separately< / a > .
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< / p >
2020-05-31 04:00:08 +02:00
{{ highlight (printf (`<!-- CSS only -->
2020-11-11 17:18:47 +01:00
< link href = "%s" rel = "stylesheet" integrity = %q crossorigin = "anonymous" >
`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
2020-11-21 15:22:08 +01:00
{{ highlight (printf (`<!-- JavaScript Bundle with Popper -->
2020-11-11 17:18:47 +01:00
< script src = "%s" integrity = %q crossorigin = "anonymous" > < / script >
`) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
2020-05-31 04:00:08 +02:00
< / div >
2020-09-10 11:26:26 +02:00
< / section >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< section class = "col-lg-7 mb-5" >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bs-primary-rgb);" >
< svg class = "bi fs-1" > < use xlink:href = "#palette2" > < / use > < / svg >
< / div >
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Customize everything with Sass< / h2 >
< p class = "lead fw-normal" >
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.
< / p >
< p class = "d-flex justify-content-start lead fw-normal" >
< a href = "/docs/{{ .Site.Params.docs_version }}/customize/overview/" class = "icon-link fw-semibold" >
Learn more about customizing
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
< / p >
< / section >
< section class = "row g-md-5 mb-5 pb-md-5" >
< div class = "col-lg-6" >
< h3 > Include all of Bootstrap’ < / h3 >
< p > Import one stylesheet and you're off to the races with every feature of our CSS.< / p >
{{ highlight (printf `// Variable overrides first
$primary: #900;
$enable-shadows: true;
$variable-prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
`) "scss" "" }}
< p > Learn more about our < a href = "/docs/{{ .Site.Params.docs_version }}/customize/options/" > global Sass options< / a > .< / p >
< / div >
< div class = "col-lg-6" >
< h3 > Include what you need< / h3 >
< p > The easiest way to customize Bootstrap—include only the CSS you need.< / p >
{{ highlight (printf `// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$variable-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" "" }}
< p > Learn more about < a href = "/docs/{{ .Site.Params.docs_version }}/customize/sass/" > using Bootstrap with Sass< / a > .< / p >
< / div >
< / section >
< section class = "row g-md-5 pb-md-5 mb-5 align-items-center" >
< div class = "col-lg-8 mb-5" >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bd-pink-rgb);" >
< svg class = "bi fs-1" > < use xlink:href = "#braces" > < / use > < / svg >
< / div >
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Build and extend in real-time with CSS variables< / h2 >
< p class = "lead fw-normal" >
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 < code > :root< / code > level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
< / p >
< p class = "d-flex align-items-start flex-column lead fw-normal mb-0" >
< a href = "/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class = "icon-link fw-semibold mb-3" >
Learn more about CSS variables
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
< / p >
< / div >
< div class = "row gx-md-5" >
< div class = "col-lg-6 mb-3" >
< h3 class = "fw-semibold" > Using CSS variables< / h3 >
< p > Use any of our < a href = "/docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables" > global < code > :root< / code > variables< / a > to write new styles. CSS variables use the < code > var(--bs-variableName)< / code > syntax and can be inherited by children elements.< / p >
{{ 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" "" }}
< / div >
< div class = "col-lg-6 mb-3" >
< h3 class = "fw-semibold" > Customizing via CSS variables< / h3 >
< p > 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.< / p >
{{ 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" "" }}
< / div >
< / div >
< / section >
< section class = "row g-md-5 pb-md-5 mb-5 align-items-center" >
< div class = "col-lg-6 mb-5 mb-md-0" >
< div class = "masthead-followup-icon d-inline-block mb-3 me-2" style = "--bg-rgb: var(--bs-danger-rgb);" >
< svg class = "bi fs-1" > < use xlink:href = "#menu-button-wide-fill" > < / use > < / svg >
< / div >
< svg class = "bi me-2 fs-2 text-muted" > < use xlink:href = "#plus" > < / use > < / svg >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bs-info-rgb);" >
< svg class = "bi fs-1" > < use xlink:href = "#braces-asterisk" > < / use > < / svg >
< / div >
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Components, meet the Utility API< / h2 >
< p class = "lead fw-normal" >
New in Bootstrap 5, our utilities are now generated by our < a href = "/docs/{{ .Site.Params.docs_version }}/utilities/api/" > Utility API< / a > . 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.
< / p >
< p class = "d-flex align-items-start flex-column lead fw-normal mb-0" >
< a href = "/docs/{{ .Site.Params.docs_version }}/utilities/api/" class = "icon-link fw-semibold mb-3" >
Learn more about utilities
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
< a href = "/docs/{{ .Site.Params.docs_version }}/examples#snippets" class = "icon-link fw-semibold" >
Explore customized components
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
< / p >
< / div >
< div class = "col-lg-6" >
< div class = "p-4 border rounded-3 mb-4" >
< h6 > Quickly customize components< / h6 >
< hr class = "mb-4" >
< ul class = "nav nav-pills mb-4" id = "pillNav" role = "tablist" >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link active" id = "home-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "true" > Home< / button >
< / li >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link" id = "profile-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "false" > Profile< / button >
< / li >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "false" > Contact< / button >
< / li >
< / ul >
< ul class = "nav nav-pills nav-fill gap-2 p-1 small bg-white border rounded-5 shadow-sm" id = "pillNav2" role = "tablist" >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link active rounded-5" id = "home-tab2" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "true" > Home< / button >
< / li >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link rounded-5" id = "profile-tab2" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "false" > Profile< / button >
< / li >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link rounded-5" id = "contact-tab2" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "false" > Contact< / button >
< / li >
< / ul >
< / div >
{{ 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" "" }}
< / div >
< / section >
< section class = "pb-md-5 mb-5" >
< div class = "col-lg-8 mb-5" >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bs-warning-rgb);" >
< svg class = "bi fs-1" > < use xlink:href = "#plugin" > < / use > < / svg >
< / div >
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Powerful JavaScript plugins without jQuery< / h2 >
< p class = "lead fw-normal" >
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 < code > data< / code > attributes. Need more control? Include individual plugins programmatically.
< / p >
< p class = "d-flex justify-content-start lead fw-normal mb-md-0" >
< a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class = "icon-link fw-semibold" >
Learn more about Bootstrap JavaScript
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
< / p >
< / div >
< div class = "row gx-md-5" >
< div class = "col-lg-6 mb-3" >
< h3 class = "fw-semibold" > Data attribute API< / h3 >
< p > 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 < code > data< / code > attributes.< / p >
< div class = "p-4 mb-3 border rounded-3" >
< div class = "dropdown" >
< button class = "btn btn-primary dropdown-toggle" type = "button" id = "dropdown" data-bs-toggle = "dropdown" aria-expanded = "false" >
Dropdown
< / button >
< ul class = "dropdown-menu" aria-labelledby = "dropdown" >
< li > < a class = "dropdown-item" href = "#" > Dropdown item< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Dropdown item< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Dropdown item< / a > < / li >
< / ul >
< / div >
< / div >
{{ highlight (printf `< div class = "dropdown" >
< button class = "btn btn-primary dropdown-toggle" type = "button" id = "dropdown" data-bs-toggle = "dropdown" aria-expanded = "false" >
Dropdown
< / button >
< ul class = "dropdown-menu" aria-labelledby = "dropdown" >
< li > < a class = "dropdown-item" href = "#" > Dropdown item< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Dropdown item< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Dropdown item< / a > < / li >
< / ul >
< / div >
`) "html" "" }}
< p > Learn more about < a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module" > our JavaScript as modules< / a > and < a href = "/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api" > using the programmatic API< / a > .< / p >
< / div >
< div class = "col-lg-6 mb-3" >
< h3 class = "fw-semibold" > Comprehensive set of plugins< / h3 >
< p > 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.< / p >
< hr class = "my-4" >
< div class = "row g-3" >
{{- range $plugin := .Site.Data.plugins -}}
{{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
< div class = "col-sm-6 mb-2" >
< a class = "d-block pe-lg-4 text-decoration-none lh-sm" href = "{{ $href }}" >
< h4 class = "mb-0 fs-5 fw-semibold" > {{ $plugin.name }}< / h4 >
< small class = "text-muted" > {{ $plugin.description }}< / small >
< / a >
< / div >
{{- end }}
< / div >
< / div >
< / div >
< / section >
< section class = "row g-3 g-md-5 pb-md-5 mb-5 align-items-center" >
< div class = "col-lg-6" >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bd-teal-rgb);" >
2020-05-31 04:00:08 +02:00
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
< / div >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Personalize it with Bootstrap Icons< / h2 >
2020-10-31 18:27:30 +01:00
< p class = "lead fw-normal" >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< a href = "{{ .Site.Params.icons }}" > Bootstrap Icons< / a > 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.
2020-05-31 04:00:08 +02:00
< / p >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< p class = "d-flex justify-content-start lead fw-normal mb-md-0" >
< a href = "{{ .Site.Params.icons }}" class = "icon-link fw-semibold" >
Get Bootstrap Icons
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
2020-05-31 04:00:08 +02:00
< / p >
< / div >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< div class = "col-lg-6" >
2020-05-31 04:00:08 +02:00
< img class = "img-fluid mt-3 mx-auto" srcset = "/docs/{{ . Site . Params . docs_version } } / assets / img / bootstrap-icons . png ,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
2020-11-11 17:18:47 +01:00
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
alt="Bootstrap Icons" width="700" height="425" loading="lazy">
2020-05-31 04:00:08 +02:00
< / div >
2020-09-10 11:26:26 +02:00
< / section >
2020-05-31 04:00:08 +02:00
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< section class = "row g-3 g-md-5 pb-md-5 mb-5 align-items-center" >
< div class = "col-lg-6" >
< div class = "masthead-followup-icon d-inline-block mb-3" style = "--bg-rgb: var(--bd-violet-rgb);" >
2020-05-31 04:00:08 +02:00
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
< / div >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< h2 class = "display-5 mb-3 fw-semibold lh-sm" > Make it yours with official Bootstrap Themes< / h2 >
2020-10-31 18:27:30 +01:00
< p class = "lead fw-normal" >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
Take Bootstrap to the next level with premium themes from the < a href = "{{ .Site.Params.themes }}" > official Bootstrap Themes marketplace< / a > . Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
2020-05-31 04:00:08 +02:00
< / p >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< p class = "d-flex justify-content-start lead fw-normal mb-md-0" >
< a href = "{{ .Site.Params.themes }}" class = "icon-link fw-semibold" >
Browse Bootstrap Themes
< svg class = "bi" > < use xlink:href = "#arrow-right-short" > < / use > < / svg >
< / a >
2020-05-31 04:00:08 +02:00
< / p >
< / div >
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
< div class = "col-lg-6" >
2020-05-31 04:00:08 +02:00
< img class = "img-fluid mt-3 mx-auto" srcset = "/docs/{{ . Site . Params . docs_version } } / assets / img / bootstrap-themes . png ,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
2020-11-11 17:18:47 +01:00
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
2020-11-25 17:31:34 +01:00
alt="Bootstrap Themes" width="700" height="500" loading="lazy">
2020-05-31 04:00:08 +02:00
< / div >
2020-09-10 11:26:26 +02:00
< / section >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< / div >
