profile
viewpoint
Mark Otto mdo GitHub San Francisco, CA http://mdo.fm Principal Design & Brand Architect at @GitHub. Creator of Bootstrap (@twbs). Previously at Twitter. Huge nerd.

mdo/code-guide 7318

Standards for developing consistent, flexible, and sustainable HTML and CSS.

mdo/wtf-forms 2632

Friendlier HTML form controls with a little CSS magic.

mdo/github-buttons 2562

Showcase the success of any GitHub repo or user with these simple, static buttons with dynamic counts.

mdo/preboot 1711

A collection of LESS mixins and variables for writing better CSS.

mdo/wtf-html-css 1387

Common reasons your HTML and CSS may be fucked.

integrations/slack 1135

Bring your code to the conversations you care about with the GitHub and Slack integration

atom/github 734

:octocat: Git and GitHub integration for Atom

mdo/css-perf 585

**Archived.** Derping around with measuring CSS performance.

mdo/jekyll-snippets 542

Library of commonly used snippets for Jekyll sites.

mdo/config 504

Personal checklist for setting up a new Mac's dev environment.

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>
  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle right offcanvas</button>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>
  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasColored" aria-expanded="false" aria-controls="offcanvasColored">Colored offcanvas</button>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>+  </div>+</div>+{{< /example >}}++## Accessibility++Make sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.

Do we need to update the language here to be changed from collapsible to offcanvas? Or, to avoid duplication, should we point folks to this section in the collapse docs?

GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>+  </div>+</div>+{{< /example >}}++## Accessibility++Make sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.++If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.++## Usage++The offcanvas plugin utilizes a few classes to handle the heavy lifting:++- `.offcanvas` hides the content+- `.offcanvas.show` shows the content+- `.offcanvas-right` hides the offcanvas on the right+- `.offcanvas-bottom` hides the offcanvas on the bottom+- `data-body="scroll"` enables body scrollbar when offcanvas is open
- `data-body="scroll"` enables `<body>` scrolling when offcanvas is open
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>+  </div>+</div>+{{< /example >}}++## Accessibility++Make sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.++If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.++## Usage++The offcanvas plugin utilizes a few classes to handle the heavy lifting:++- `.offcanvas` hides the content+- `.offcanvas.show` shows the content+- `.offcanvas-right` hides the offcanvas on the right+- `.offcanvas-bottom` hides the offcanvas on the bottom+- `data-body="scroll"` enables body scrollbar when offcanvas is open+- `data-body="backdrop"` hides scrollBar and add backdrop to body, when offcanvas is open
- `data-body="backdrop"` disables `<body>` scrolling and adds backdrop when offcanvas is open
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

 layout: examples title: Offcanvas template extra_css:-  - "offcanvas.css"-extra_js:-  - src: "offcanvas.js"-body_class: "bg-light"+- "offcanvas.css" ---

This entire file needs to be rethought. There's no reason to remove the custom page content from this. I imagine this should instead be updated to leave the page content as-is, and change the behavior of the navigation sidebar.

GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>
    <div class="h4">Offcanvas with backdrop</div>
    <p>Try clicking on the page's content to toggle the offcanvas.</p>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open
- `data-body="backdrop"` disables scrolling and creates a backdrop over the `<body>` when offcanvas is open
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>+  </div>+</div>+{{< /example >}}++## Accessibility++Make sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.++If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.++## Usage++The offcanvas plugin utilizes a few classes to handle the heavy lifting:
The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>
    <div class="h4">Offcanvas bottom</div>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result

Safe to delete this, this is self explanatory.

GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>
    <div class="h4">Colored offcanvas</div>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open
- `data-body="scroll"` enables scrolling on the `<body>` when offcanvas is open
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>+  </div>+</div>+{{< /example >}}++## Accessibility++Make sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.++If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.++## Usage++The offcanvas plugin utilizes a few classes to handle the heavy lifting:++- `.offcanvas` hides the content+- `.offcanvas.show` shows the content+- `.offcanvas-right` hides the offcanvas on the right+- `.offcanvas-bottom` hides the offcanvas on the bottom+- `data-body="scroll"` enables body scrollbar when offcanvas is open+- `data-body="backdrop"` hides scrollBar and add backdrop to body, when offcanvas is open+- Add a dismiss button with the `data-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.

Separate this out from the list of classes/attributes:


Add a dismiss button with the `data-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>
    <div class="h4">Offcanvas with scrolling</div>
    <p>Try scrolling the rest of the page to see this option in action.</p>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side
- `.offcanvas-right` places offcanvas on the right of the viewport
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:++- `data-body="scroll"` enables scrollBar on body when offcanvas is open+- `data-body="backdrop"` hides scrollBar and creates a backdrop on body, when offcanvas is open++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample4" aria-expanded="false" aria-controls="offcanvasExample4">Enable body scrolling </button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample5" aria-expanded="false" aria-controls="offcanvasExample5">Body backdrop</button>+</p>+<div class="offcanvas bg-dark text-white" data-body="scroll" tabindex="-1" id="offcanvasExample4">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Wow, body scroller is with us again</div>+  </div>+</div>+<div class="offcanvas bg-dark text-white" data-body="backdrop" tabindex="-1" id="offcanvasExample5">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Body is covered by a backdrop</div>+  </div>+</div>+{{< /example >}}++## Accessibility++Make sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.++If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.++## Usage++The offcanvas plugin utilizes a few classes to handle the heavy lifting:++- `.offcanvas` hides the content+- `.offcanvas.show` shows the content+- `.offcanvas-right` hides the offcanvas on the right+- `.offcanvas-bottom` hides the offcanvas on the bottom+- `data-body="scroll"` enables body scrollbar when offcanvas is open+- `data-body="backdrop"` hides scrollBar and add backdrop to body, when offcanvas is open+- Add a dismiss button with the `data-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.++### Via data attributes++Just add `data-toggle="offcanvas"` and a `data-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`.
Add `data-toggle="offcanvas"` and a `data-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`.
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options
## Options
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">
<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasColored">
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen
- `.offcanvas-bottom` places offcanvas on the bottom of the viewport
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).
Easily style an offcanvas element with a different `background-color` or `color` with our [color utilities]({{< docsref "/utilities/colors" >}}).
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers+

Add an intro line:

Change the placement of an offcanvas element with modifier classes:

GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers

We use sentence case in Bootstrap, so this would be Position modifiers, but I think we can leave just as Position for brevity's sake.

## Position
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.
Given how CSS handles animations, you cannot use `margin` or `translate` on a `.offcanvas` element. Instead, use the class as an independent wrapping element.
GeoSot

comment created time in 6 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+<div class="offcanvas bg-dark text-white offcanvas-bottom" tabindex="-1" id="offcanvasExample3">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Bottom</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+</div>+{{< /example >}}++## Color schemes++Theming offcanvas is very easy by using our [color utilities]({{< docsref "/utilities/colors" >}}).+Any combination of `bg-*` and `text-{color}` utilities, can give a different result++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample31" aria-expanded="false" aria-controls="offcanvasExample31">Colored Offcanvas</button>+</p>+<div class="offcanvas bg-primary text-white" data-body="scroll" tabindex="-1" id="offcanvasExample31">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Hey I got New Colors</div>+  </div>+</div>++{{< /example >}}++## Body Options++By default, when an offcanvas is visible, body cannot be scrolled. You can use the following data-options:
By default, when an offcanvas is visible, the `<body>` of your page cannot be scrolled. You can use the following data-options to change this behavior:
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>+</p>+<div class="offcanvas bg-dark text-white offcanvas-right" tabindex="-1" id="offcanvasExample2">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas Right Side</div>
    <div class="h4">Offcanvas right</div>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:
Click the buttons below to show and hide an offcanvas element via class changes:
GeoSot

comment created time in 6 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.+  </div>++  <div class="dropdown mt-3">+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">+      Dropdown button+    </button>+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">+      <li><a class="dropdown-item" href="#">Action</a></li>+      <li><a class="dropdown-item" href="#">Another action</a></li>+      <li><a class="dropdown-item" href="#">Something else here</a></li>+    </ul>+  </div>+</div>+{{< /example >}}++## Position Modifiers++- `.offcanvas-right` modifier, places offcanvas on the right side+- `.offcanvas-bottom` modifier, places offcanvas on the bottom of the screen++{{< example >}}+<p>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample2" aria-expanded="false" aria-controls="offcanvasExample2">Toggle Right offcanvas</button>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle Bottom offcanvas</button>
  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample3" aria-expanded="false" aria-controls="offcanvasExample3">Toggle bottom offcanvas</button>
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.
description: Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
GeoSot

comment created time in 6 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">

offanvas-push-body?

GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

 @import "syntax"; @import "anchor"; @import "algolia";+++.offcanvas{+  z-index: 1072 // over .bd-subnavbar+}

Move these styles to the appropriate section in _component-examples.scss, please. Also remember to add a space before the opening curly brace.

GeoSot

comment created time in 6 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>+    <button type="button" class="close text-reset" data-dismiss="offcanvas" aria-label="Close">+      <span aria-hidden="true">&times;</span>+    </button>+  </div>+  <div class="card card-body text-dark ">

I'd suggest nixing the bulk of this custom content and replacing it with something more functional and expected:

  • Navigation elements (perhaps a stacked pill nav or a list group?)
  • Simple <p>s of content
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.++Given how CSS handles animations, you cannot use `margin` & `translate` on a `.offcanvas` element. Use the class on an independent wrapping element.++## Example++Click the buttons below to show and hide another element via class changes:++- `.offcanvas` hides content+- `.offcanvas.show` shows content++You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="offcanvas"` is required.++{{< example >}}+<p>+  <a class="btn btn-primary" data-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">+    Link with href+  </a>+  <button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">+    Button with data-target+  </button>+</p>+<div class="offcanvas offanvas-push-body bg-dark text-white" tabindex="-1" id="offcanvasExample">+  <div class="offcanvas-header">+    <div class="h4 col text-center">Offcanvas</div>
    <div class="h4">Offcanvas</div>
GeoSot

comment created time in 6 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

 $close-color:                       $black !default; $close-text-shadow:                 0 1px 0 $white !default;  +//Offcanvas++$offcanvas-padding-y:               $modal-inner-padding !default;+$offcanvas-padding-x:               $modal-inner-padding * 2 !default;
$offcanvas-padding-x:               $modal-inner-padding !default;
GeoSot

comment created time in 5 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+// stylelint-disable declaration-no-important+.offcanvas {+  position: fixed;+  top: 0;+  bottom: 0;+  left: 0;+  z-index: $zindex-offcanvas;+  width: $offcanvas-horizontal-width-mobile;+  max-width: 100%;+  padding: $offcanvas-padding-y $offcanvas-padding-x;+  overflow-y: auto;+  color: $offcanvas-color;+  background-color: $offcanvas-bg-color;+  border: $offcanvas-border-width solid $offcanvas-border-color;+  // Remove focus outline from opened offcanvas
GeoSot

comment created time in 6 hours

Pull request review commenttwbs/bootstrap

Offcanvas as component

+---+layout: docs+title: Offcanvas+description: Toggle the visibility sidebars across your project with a few classes and our JavaScript plugin.+group: components+toc: true+---++## How it works++The offcanvas JavaScript plugin is used to show and hide a sidebar (or bottom-bar). Buttons or anchors are used as triggers, to specific elements you toggle.
The offcanvas JavaScript plugin shows and hides sidebar on the left, right, or bottom of your viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle.
GeoSot

comment created time in 6 hours

issue closedtwbs/bootstrap

Responsive class names and size class names, identifying overlapping names(sm/md/lg/xl)

Some examples are incomplete and I'd love to see someone willing to complete by type.

Responsive variations
d-sm-block d-md-block d-lg-block d-xl-block
flex-sm-row flex-md-row flex-lg-row flex-xl-row
text-sm-left text-md-left text-lg-left text-xl-left
p-sm-1 p-md-1 p-lg-1 p-xl-1
container-sm container-md container-lg container-xl
...

Sizes
input-group-sm input-group-lg
btn-sm btn-lg
modal-sm modal-lg modal-xl
shadow-sm shadow-lg
btn-group-sm btn-group-lg
...

Text translated by Google

The two tables above illustrate the use of (sm / lg / xl) in two tables for different purposes, which is confusing. If it takes time later, such as (btn-sm-sm btn-lg-lg), how can it be easily and clearly understood? Even if it doesn't appear, naming the class name like this is not a good way to name it.

There are many other words in English that indicate size. I will not give any examples. After all, it is not my mother tongue and I do n’t know more.

closed time in a day

zhangchenglin

issue commenttwbs/bootstrap

Responsive class names and size class names, identifying overlapping names(sm/md/lg/xl)

Just need to change 2 characters. Need to do so much?

It'd be a breaking change and a departure from how we've done things for several years, so yes, it's a bit more work than simply swapping a couple characters :).

It could be nice to differentiate, but the class names have been working well for us overall. I think in v6 when we make even broader changes we can tackle something like this.

zhangchenglin

comment created time in a day

pull request commenttwbs/bootstrap

Add Microsoft Edge for MacOS to supported browsers

This can land as long as we have an issue to track the rewording part.

Done in #30194.

coliff

comment created time in a day

issue openedtwbs/bootstrap

Revisit browser and device docs

Per https://github.com/twbs/bootstrap/pull/29956.

created time in a day

pull request commenttwbs/bootstrap

Add pointer event utilities

  • pe-none/pe-auto

This is my vote. I can't think of anything else that would be confused with this, and it fits with our other shorthand notations.

MartijnCuppens

comment created time in a day

pull request commenttwbs/bootstrap

Remove confusing "Equal-width multi-line" section from Grid docs.

This can probably go away with .row-cols classes, right @twbs/css-review?

mikelehen

comment created time in 2 days

pull request commenttwbs/bootstrap

Remove map merges

Yay! Thanks for getting this merged!

MartijnCuppens

comment created time in 2 days

issue commenttwbs/bootstrap

Remove dist files from the repo

We could also drastically reduce the number of files we generate and track in the dist directory. At this point, there's no reason to be including bootstrap.css when we have bootstrap.min.css—the former should just be to start.

If we do that, we nix eight CSS files (CSS and their source maps, since those are duplicated for regular and minified CSS) and another six JS files (once again for source maps and regular/minified duplication).

I don't mind the files being there. I remember there being some issues with changing around our files strategy for package managers previously—including dropping Bower—and that was a bit of an issue.

XhmikosR

comment created time in 3 days

pull request commenttwbs/bootstrap

Documentation skip links

Is this a common practice? I haven't seen this many tabs in front of my ability to get to a clearly focusable element. Also, tabbing to the search form applies the focus style, but it's not focused with my cursor—at least in Safari, I cannot type in the field with tab-tab-tab-enter. Feels like an incomplete implementation with that.

I'd also echo the feedback of this being a little tough to see given the colors. It matches, yes, but it could be more obvious.

ffoodd

comment created time in 3 days

issue openedtwbs/bootstrap

Explore a .content class for broad margin changes and more

Capturing ideas from https://github.com/twbs/bootstrap/pull/29491#issuecomment-538315322.

created time in 3 days

PR closed twbs/bootstrap

Indent the last element, for example css v5

Indent the last element, for example, for the <p> tag

+4 -0

4 comments

1 changed file

leshasmp

pr closed time in 3 days

pull request commenttwbs/bootstrap

Indent the last element, for example

Per the conversation here, let's punt this to a separate effort. Arbitrary margin changes like this are a recipe for unintended consequences. We should avoid them where possible.

leshasmp

comment created time in 3 days

issue closedtwbs/bootstrap

form-control-plaintext ignores input-group-$size

Bug reports must include:

  • macOS 10.14.6 (18G95)
  • Chrome Version 77.0.3865.120 (Official Build) (64-bit)
  • Compare the difference here:
<div class="container">
  <div class="row">
    <div class="col">
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <button class="btn btn-primary">Button</button>
        </div>
        <input class="form-control" value="hello world" readonly />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <button class="btn btn-primary">Button</button>
        </div>
        <input class="form-control-plaintext" value="hello world" readonly />
      </div>
    </div>
  </div>
</div>

You'll see that the .form-control-plaintext has issues with both width and sizing. The fix is to add .form-control-sm to .form-control-plaintext.

closed time in 3 days

kratsg

issue commenttwbs/bootstrap

form-control-plaintext ignores input-group-$size

Closing per https://github.com/twbs/bootstrap/pull/29803#issuecomment-586540017

kratsg

comment created time in 3 days

PR closed twbs/bootstrap

Fix: avoid ignore plain text in input-group-$size

Fixes #29605

+10 -0

5 comments

1 changed file

mendozagioo

pr closed time in 3 days

pull request commenttwbs/bootstrap

Fix: avoid ignore plain text in input-group-$size

This PR need some additional tweaks to fix the issues with the border. Not sure if it's worth fixing this if we drop this if we drop this in master anyway.

It is indeed not worth it :).

mendozagioo

comment created time in 3 days

issue closedtwbs/bootstrap

Custom control border color missing on focus and checked

Focus border color is missing when a custom checkbox is checked.

It's because of the following line of code:

&:focus:not(:checked) ~ .custom-control-label::before {
  border-color: $custom-control-indicator-focus-border-color;
}

It should be without :not(:checked)

Resulting in:

&:focus ~ .custom-control-label::before {
  border-color: $custom-control-indicator-focus-border-color;
}

closed time in 3 days

QballDevelop

issue commenttwbs/bootstrap

Custom control border color missing on focus and checked

Closing per https://github.com/twbs/bootstrap/pull/29836#issuecomment-586539937

QballDevelop

comment created time in 3 days

pull request commenttwbs/bootstrap

Fixed checked custom control focus border color (#29774)

Given this component was rewritten for v5, and since you can accomplish this by modifying the focus styles, I'm closing as a won't fix. Here's an example of your turquoise applied to the box-shadow.

Screen Shot 2020-02-14 at 5 34 36 PM

QballDevelop

comment created time in 3 days

pull request commenttwbs/bootstrap

Add Microsoft Edge for MacOS to supported browsers

Understand the feedback that we can reword this section perhaps, but for the time being, we can fix one small problem here and show that it's supported on Mac :). I'll open an issue to revisit the docs more thoroughly later.

coliff

comment created time in 3 days

pull request commenttwbs/bootstrap

V5 form validations

So with this change, there is no built-in and functional form validation in Bootstrap? Because everything would need to be controlled by another JS library or framework?

ysds

comment created time in 3 days

create barnchtwbs/bootstrap

branch : docs-toc-fix

created branch time in 3 days

PR opened twbs/bootstrap

Docs table of contents list style fix css docs v5
+1 -6

0 comment

2 changed files

pr created time in 3 days

issue closedtwbs/bootstrap

Different :focus color on "a" link and "a.text-primary"

I've found a little "bug" imho.

If I use a basic link (primary), there is a hover color but not a focus color.

But if I use a link with the class -text-primary (identical looking) there is a darker color on focus

https://jsfiddle.net/ogj1edzq/

closed time in 3 days

endcoreAK

issue commenttwbs/bootstrap

Different :focus color on "a" link and "a.text-primary"

Our work in progress v5 docs in master are out of date, but we're removing hover and focus styles from those text utilities in v5. The explicit omission of focus styles in our default <a> styles is on purpose as we don't want to be unsetting that for every single stylized link. It's similar in choice to not styling :visited much these days.

endcoreAK

comment created time in 3 days

pull request commenttwbs/bootstrap

Add .dropdown-menu-dark

Yeah, I agree on that concern, but we can still say no to most.

I mostly wanted to do this because of how prominent our dark navbar component is. Completing the style there and connecting the two components (navbar and dropdown) makes a lot of sense to me. The rest, I'm not as sold on, though we might as well discuss our options further beyond this.

mdo

comment created time in 3 days

pull request commenttwbs/bootstrap

Add utility class for the user-select property

@MartijnCuppens I pushed a change to their branch for them, and edited the title description while I was there. Let me know if I missed anything with a quick review, please.

JensLuyten

comment created time in 4 days

push eventJensLuyten/bootstrap

Mark Otto

commit sha 1035f1c847e0ca894ff15b0642481ecb894a7edd

Update and rename behaviors.md to interactions.md

view details

push time in 4 days

push eventtwbs/bootstrap

dependabot-preview[bot]

commit sha 31e69475d8b92a246473f680d7293dc3263947ae

Bump rollup from 1.26.5 to 1.27.14 (#29896) Bumps [rollup](https://github.com/rollup/rollup) from 1.26.5 to 1.27.14. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v1.26.5...v1.27.14) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

view details

Martijn Cuppens

commit sha b39f704954cda9c5d62b7142d6ba678588629e3c

Cleanup algolia theming (#29888)

view details

Martijn Cuppens

commit sha 538f4f10c9cd5cd3803f43dc0ccc2d8c6cdb6e7b

Allow percentages in container widths (#29819)

view details

XhmikosR

commit sha 036a40c3dd6e7917429364bd352029045935bff1

Regenerate package-lock.json (#29917)

view details

Martijn Cuppens

commit sha 5c37724d4996c10eee931debfb60e57d99d7ab99

Escape brackets (#29857) Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

XhmikosR

commit sha 167a93a0f31799d150b2e866625b676fbadf6b6c

Add lockfile-lint (#29920)

view details

Martijn Cuppens

commit sha 4387038421bc52d0b7c579c134e682ac8a22f50a

Simplify disabled styles (#29296) * Simplify disabled styles * Mention pointer-events usage

view details

Martijn Cuppens

commit sha c30abbe112024b41a7cbdb3882e868955ceb5b0f

README.md: show sponsors first (#29931)

view details

Martijn Cuppens

commit sha bd278341989e115e95fe29bc4738b440087f6d75

Drop `.text-justify` class (#29793) Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

dependabot-preview[bot]

commit sha 082d5ef087a6bc4989310e8289a8f90bf1badea7

Bump serve from 11.2.0 to 11.3.0 (#29932) Bumps [serve](https://github.com/zeit/serve) from 11.2.0 to 11.3.0. - [Release notes](https://github.com/zeit/serve/releases) - [Commits](https://github.com/zeit/serve/compare/11.2.0...11.3.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

view details

dependabot-preview[bot]

commit sha 4ba7248308ab9cfc5c6e573fc40590fc4df093aa

Bump stylelint-config-twbs-bootstrap from 1.0.0 to 1.1.0 (#29933) Bumps [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) from 1.0.0 to 1.1.0. - [Release notes](https://github.com/twbs/stylelint-config-twbs-bootstrap/releases) - [Commits](https://github.com/twbs/stylelint-config-twbs-bootstrap/compare/v1.0.0...v1.1.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

XhmikosR

commit sha 8295ad7629644e0cd942c01b2b05b186704b14db

package.json: move funding property higher. (#29936)

view details

XhmikosR

commit sha 7b990eb2f4790912734d699cdc6e83b5b5c4274c

Bump copyright year to 2020. (#29944)

view details

XhmikosR

commit sha e2530d38aab03ccdbc2b169ce5bb13769146831f

reboot.md: Add missing Noto Sans font (#29937) * reboot.md: Add missing Noto Sans font * Sans serif order fix Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

view details

XhmikosR

commit sha 27cc7926151643505a43b799215a61bde2c12f28

reboot.md: Fix rendering for the recent Hugo versions (#29938)

view details

Florian Lacreuse

commit sha d5270cb811f1cd39b02e7a18b955a693de1f22cd

Use word-wrap in .text-break for IE and Edge compatibility.

view details

Martijn Cuppens

commit sha c7ce627ca8da26cbc9cb6edc3355072562ce7c30

Remove redundant `overflow-wrap` property While `overflow-wrap` is the more recommanded option, `word-wrap` alone has a wider support.

view details

XhmikosR

commit sha 5d9dd3b25ea181c1b0d426b08fbac26525c66757

Delete icons.md (#29939) This is unused

view details

dependabot-preview[bot]

commit sha 9822f9f3e8fdd898d3f8a0c59737190551b30589

Bump vnu-jar from 19.9.4 to 20.1.2 (#29965) Bumps [vnu-jar](https://github.com/validator/validator) from 19.9.4 to 20.1.2. - [Release notes](https://github.com/validator/validator/releases) - [Changelog](https://github.com/validator/validator/blob/master/CHANGELOG.md) - [Commits](https://github.com/validator/validator/commits/v20.1.2) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

view details

dependabot-preview[bot]

commit sha 9fc4438314422afc9aa242b8ffbcd8f3596e99c0

Bump @rollup/plugin-commonjs from 11.0.0 to 11.0.1 (#29962) Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 11.0.0 to 11.0.1. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/commits) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

view details

push time in 4 days

push eventtwbs/bootstrap

Christopher Morrissey

commit sha 7fd6dd9d58e2b2dac5c8ad69ea21aad70c019131

v5 docs: added wrapping class for rounded utils (#29379) * Added wrapping class for rounded utils Tweak /utilities/borders/#border-radius #29343 * Remove the extra div. Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

push time in 4 days

issue closedtwbs/bootstrap

Tweak /utilities/borders/#border-radius

https://twbs-bootstrap.netlify.com/docs/4.3/utilities/borders/#border-radius

This doesn't look so good, and also on mobile the images don't have any vertical margins. Could be improved IMO.

closed time in 4 days

XhmikosR

pull request commenttwbs/bootstrap

Utility class border radius

@ysds At that point, we might as well use radius instead of abbreviating :). I don't mind that fwiw.

JensLuyten

comment created time in 4 days

push eventtwbs/bootstrap

Mark Otto

commit sha 6eeff551b145684d46ffacc992d1af28bf540c93

Match background color to navbar dark

view details

Mark Otto

commit sha 0a12ceb5cf4411522c4ebeffa509ee80fe8ea251

Update docs to include a navbar example

view details

push time in 4 days

issue commenttwbs/bootstrap

Bootstrap Examples

Dunno if it's practical or not, but maybe we end up pushing these things to another repo instead and they live at examples.getbootstrap.com. We could build the templates still in solid HTML without a preprocessor (save for perhaps an index page), so little to no compilation within each example. Perhaps we could invoke some Sass via JS or something in the browser (shoutout to Bootstrap v1 days with Less.js)? External repo could have advantages of user submissions, too, or categories. Could also then already include supported versions of Bootstrap's compiled CSS and JS to build on.

I tried this years ago but the thing I didn't like was not being able to keep them up to speed with the latest release at the same time, but with version-locked examples, it could be solved. I'll think on it more and paint a clearer picture maybe :).

beatinger

comment created time in 4 days

issue commenttwbs/bootstrap

dropdown-dark

Proposed a basic implementation at https://github.com/twbs/bootstrap/pull/30171 to get conversation started.

VelizarVESSELINOV

comment created time in 4 days

PR opened twbs/bootstrap

Add .dropdown-menu-dark css feature v5

Screen Shot 2020-02-13 at 5 35 41 PM

Fixes #30105.

+75 -1

0 comment

3 changed files

pr created time in 4 days

create barnchtwbs/bootstrap

branch : dropdown-menu-dark

created branch time in 4 days

issue closedtwbs/bootstrap

Nested list-group-horizontal inside list-group-flush renders without proper borders

Bug reports must include:

  • Operating system and version (Windows)
  • Browser and version (Tested on Chrome and Firefox)
  • Test Case : https://codepen.io/jarodhanko/pen/vYEaoKr
  • Bootstrap Version: 4.4.1

Perhaps this is a bit of an edge case or simply unsupported behavior, but if you attempt to nest a list-group-horizontal inside of a custom list-group that is using list-group-flush, the list-group-horizontal renders with the inner borders, the side borders, or the top border of the first item. It is inheriting the css from .list-group-flush .list-group-item. Any nested list groups that are not horizontal list groups render as list-group-flush as well.

It works fine with a normal list group.

closed time in 4 days

jarodhanko

issue commenttwbs/bootstrap

Nested list-group-horizontal inside list-group-flush renders without proper borders

Closing per https://github.com/twbs/bootstrap/pull/30110#issuecomment-585988983

jarodhanko

comment created time in 4 days

PR closed twbs/bootstrap

Fix borders of list-group using horizontal & flush

Fix issue: #30027

+39 -14

1 comment

2 changed files

mendozagioo

pr closed time in 4 days

pull request commenttwbs/bootstrap

Fix borders of list-group using horizontal & flush

I don't see much use case in nesting horizontal list groups in vertical ones, nor much of an interest from folks in seeing this added. This complicates the selectors quite a lot as well. Given that, I'm inclined to pass on this for the time being. Thanks though!

mendozagioo

comment created time in 4 days

pull request commenttwbs/bootstrap

Use WCAG contrast algo

Agreed with the team on this—my biggest gripes with these expanded functions has always been approachability and the volume of (source) code we bring in. For myself, and for the millions of folks using the project :).

ffoodd

comment created time in 4 days

pull request commenttwbs/bootstrap

Adding version number to documentation <title>

I'm good with backporting this to v4 btw.

MikeRogers0

comment created time in 4 days

issue closedtwbs/bootstrap

Missing RFS helper mixins (for paddings and margins)

Hi I installed Bootstrap via npm

npm install bootstrap

But in this file /node_modules/bootstrap/scss/vendor/_rfs.scss there aren't any helper mixins (@mixin padding(), @mixin padding-top(), ...) while I can see them on the repo here: https://github.com/twbs/bootstrap/blob/master/scss/vendor/_rfs.scss from line 267

Why I have not them? To have them I need to install bootstrap directly from Github with a command like:

npm install https://github.com/twbs/bootstrap.git --save

Well, installing with that I have the mixins, but I don't want to install Bootstrap in that awful way.

Some help?

closed time in 6 days

dangelion

issue closedtwbs/bootstrap

Add Scroll-to-Top FAB for docs on mobile screens

#Before opening:

[x] Search for duplicate or closed issues [x] Read the contributing guidelines

It's harder to scroll all the way to top to move to another page. Or keep the navbar floating

closed time in 6 days

nainardev

issue commenttwbs/bootstrap

Add Scroll-to-Top FAB for docs on mobile screens

Don't know if this exists for Android, but on iOS you table the status bar to go to the top. Or you swipe down briefly to see the browser UI on either major OS. In our docs, we have fixed navbars though, so this shouldn't be an issue.

Closing as a won't fix.

nainardev

comment created time in 6 days

pull request commenttwbs/bootstrap

Add Full-Screen size to Modal and Responsive variations for breakpoints

Sounds fine by me!

GeoSot

comment created time in 10 days

issue closedtwbs/bootstrap

Background gradient is not set on the main Bootstrap website

https://getbootstrap.com/docs/4.1/utilities/colors/#background-gradient

closed time in 11 days

functionali

pull request commenttwbs/bootstrap

Add utility class for the user-select property

Eh, behaviors might be the best group option if we don't want to have each utility on its own page. Some more ideas related to that one if we're open to brainstorming:

  • Mouse events
  • Mouse behaviors
  • Interactions
JensLuyten

comment created time in 13 days

issue commenttwbs/icons

Switch to https://www.npmjs.com/package/gh-pages

Thoughts on using an Action instead? https://github.com/marketplace/actions/hugo-deploy-github-pages

XhmikosR

comment created time in 14 days

PR opened twbs/bootstrap

Update migration guide for removal of .form-text docs v5

Closes #29630

+1 -0

0 comment

1 changed file

pr created time in 14 days

create barnchtwbs/bootstrap

branch : migration-form-text

created branch time in 14 days

issue closedtwbs/bootstrap

min and max width classes using -xs, -sm, ... postfixes

I often like to use flexbox and combine it with wrapping to get responsive layouts. I find it to be more flexible and intuitive than the grid. A big part of making this work is specifying min-widths. Max widths can be useful too if you are dealing with large screens. Unfortunately the sizing utilities of bootstrap have been quite limited forcing me to write my own utility classes for this purpose.

It would be nice to have the following classes added to bootstrap and documented:

.min-xs {
    min-width: 180px;
}
.min-sm {
    min-width: 200px;
}

.min-md {
    min-width: 375px;
}

.
.
.

.max-md {
     max-width: 750px;
}

.max-lg {
    max-width: 1060px;
}

.max-xl {
    max-width: 1900px;
}

The widths chosen here are slightly smaller than half the iphone 6/7/8, iphone6/7/8 plus, ipad, vertical hd screen and horizontal hd screen horizontal resolutions for min, and slightly less than the full horizontal resolution on max. The 14-20 pixels subtracted from actual screen sizes are to account for margins paddings and borders.

closed time in 14 days

kaan-atakan

issue commenttwbs/bootstrap

min and max width classes using -xs, -sm, ... postfixes

No plans to do this ourselves, but with v5's upcoming utility API, you'd be able to easily add this for yourself.

kaan-atakan

comment created time in 14 days

issue commenttwbs/bootstrap

Bootstrap + Parcel / Webpack error importing bootstrap/dist/css/bootstrap.css

I'm not experiences with Webpack or Parcel, can anyone else help? If not, you may need to jump into our Slack or StackOverflow.

yonatankarimish

comment created time in 14 days

issue closedtwbs/bootstrap

open modal when another modal already open

I have tried open modal with id "exampleModal2" from anchor. this anchor inside other modal already open with id exampleModal1

by adding: data-toggle="modal" data-target="exampleModal2" to anchor,

it's working fine , it's closing the current modal "exampleModal1" and open new modal "exampleModal2" ,

problem: scroll work on body not on modal "exampleModal2".

note: modal-open class not added when open model2 , when i added to body it's working fine.

closed time in 14 days

exxizor

issue commenttwbs/bootstrap

open modal when another modal already open

Sorry, but modals on top of modals aren't supported. This is mentioned in our docs.

exxizor

comment created time in 14 days

issue commenttwbs/bootstrap

w-100 randomly adds way too much padding and a scroll bar on a responsive table

Not sure what you're after exactly, but .w-100 only has a width property on it. It doesn't add padding or anything else.

zerocarbthirty

comment created time in 14 days

issue closedtwbs/bootstrap

w-100 randomly adds way too much padding and a scroll bar on a responsive table

Windows 10.0.18363.592 Google Chrome | 79.0.3945.130

Bootstrap 4 appears to be adding a ton of padding to columns without any way to control it when using w-100 on a responsive table. It is also adding a horizontal scroll bar that is not required for the size of the screen. On a page with multiple tables using w-100 looks the best because then all of the tables are the same size so it would be great if you guys could fix this problem.

here is an image showing the issue

bootstrap10-why

closed time in 14 days

zerocarbthirty

issue closedtwbs/bootstrap

Missing right border-radius when using valid-feedback or invalid-feedback with input-group

Describe the bug

Missing right (top and bottom) border-radius when using valid-feedback or invalid-feedback with input-group.

To Reproduce

Go and see Username input field in bootstrap official documentation : https://getbootstrap.com/docs/4.4/components/forms/?#custom-styles

Reproducible Example

Live example here : https://getbootstrap.com/docs/4.4/components/forms/?#custom-styles

JSFiddle : https://jsfiddle.net/7am1xfnq/

Sample code :

    <div>
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>

Expected behavior

We should see a right border radius (top and bottom).

Screenshots

Capture d’écran 2020-02-01 à 11 09 45

Capture d’écran 2020-02-01 à 11 10 57

Environment

Operating System: macOS 10.15.2 Browser, Version : Chrome 78.0.3904.108 (Build officiel) (64 bits) Bootstrap Version : 4.4.1

closed time in 14 days

francoisrouault
more