Ask Your Question

How can the Bootstrap 5 Off-Canvas be adjusted to slide in from left to right?

asked 2022-04-18 11:00:00 +0000

nofretete gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2022-06-10 06:00:00 +0000

scrum gravatar image

To make the Bootstrap 5 Off-Canvas slide in from left to right, you need to do the following:

  1. Open the CSS file that controls the Off-Canvas component

  2. Find the following CSS class, which controls the animation for the Off-Canvas component:

.offcanvas-start {
    transform: translateX(-100%);
    visibility: visible;
  1. Modify the transform property to translate the Off-Canvas component from left to right:
.offcanvas-end {
    transform: translateX(100%);
    visibility: visible;
  1. Add the offcanvas-end class to the Off-Canvas component:
<div class="offcanvas offcanvas-end" tabindex="-1" id="myOffcanvas" aria-labelledby="myOffcanvasLabel">
    <!-- Off-Canvas content goes here -->

With these changes, the Off-Canvas component will now slide in from left to right instead of right to left.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2022-04-18 11:00:00 +0000

Seen: 8 times

Last updated: Jun 10 '22