Bootstrap 5 Offcanvas Placement

Last Updated : 14 Dec, 2022

Bootstrap 5 Offcanvas Placement has four directions from which the carousel can pop out which are left(default), top, bottom, and right. There are helper classes provided that can help us set the direction of the offcanvas.

Bootstrap 5 Offcanvas Placement Classes:

offcanvas-[start/top/right/bottom]: This is the placement helper class. The start is the default position where the position is left, top, right, and bottom.

Syntax:

<div class="offcanvas offcanvas-[start/top/right/bottom]" id="...">
    <div class="offcanvas-header">
        <h1 class="offcanvas-title">
            ....
        </h1>       
    </div>
    <div class="offcanvas-body">
       ....
    </div>
</div>

Example 1: The example below demonstrates the default left placed offcanvas and the right placed offcanvas.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="m-2"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4">Bootstrap 5 Offcanvas Placement</h4> 
    <div class="container d-flex mb-4 p-4"> 
        <button class="btn btn-success m-3"
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasLeft"> 
            Open Default Offcanvas - 
            <br> Which is the left placed offcanvas 
        </button> 
        <button class="btn btn-success m-3"
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasRight"> 
            Open Right Offcanvas - 
            <br> Which is the right placed offcanvas 
        </button> 
    </div> 
    <div class="offcanvas offcanvas-start" 
         id="offcanvasLeft"> 
        <div class="offcanvas-header"> 
            <h5 class="offcanvas-title"> 
                This is the Default offcanvas 
            </h5> 
            <button type="button"
                    class="btn-close text-reset" 
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"> 
            </button> 
        </div> 
        <div class="offcanvas-body"> 
            <p>This Offcanvas has the default 
                placement which is left.</p> 
            <br> 
            <ul class="list-group"> 
                <li class="list-group-item">An item</li> 
                <li class="list-group-item">A second item</li> 
                <li class="list-group-item">A third item</li> 
                <li class="list-group-item">A fourth item</li> 
                <li class="list-group-item">And a fifth one</li> 
            </ul> 
        </div> 
    </div> 
    <div class="offcanvas offcanvas-end bg-dark  
                text-light" id="offcanvasRight"> 
        <div class="offcanvas-header"> 
            <h5 class="offcanvas-title"> 
                This is the Right offcanvas 
            </h5> 
            <button type="button" 
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"> 
            </button> 
        </div> 
        <div class="offcanvas-body"> 
            <p>This Offcanvas has the Right placement.</p> 
            <br> 
            <ul class="list-group"> 
                <li class="list-group-item">An item</li> 
                <li class="list-group-item">A second item</li> 
                <li class="list-group-item">A third item</li> 
                <li class="list-group-item">A fourth item</li> 
                <li class="list-group-item">And a fifth one</li> 
            </ul> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Bootstrap 5 Offcanvas Placement

Example 2: The example below demonstrates the default top-placed offcanvas and the bottom-placed offcanvas.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="m-2"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4">Bootstrap 5 Offcanvas Placement</h4> 
    <div class="container d-flex mb-4 p-4"> 
        <button class="btn btn-success m-3" type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasTop"> 
                Open Top Offcanvas -  
                <br> Which is the top placed offcanvas 
        </button> 
        <button class="btn btn-success m-3" type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasBottom"> 
                Open Bottom Offcanvas - <br>  
                Which is the bottom placed offcanvas 
        </button> 
    </div> 
    <div class="offcanvas offcanvas-top" id="offcanvasTop"> 
        <div class="offcanvas-header"> 
            <h5 class="offcanvas-title"> 
                This is the Top offcanvas 
            </h5> 
            <button type="button" 
                    class="btn-close text-reset" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close"> 
            </button> 
        </div> 
        <div class="offcanvas-body"> 
            <p>This offcanvas pops from the top when triggered</p> 
            <br> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" 
                alt=""> 
            <button type="button" class="btn-success" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close"> 
                    Close 
            </button> 
        </div> 
    </div> 
    <div class="offcanvas offcanvas-bottom bg-dark  
                text-light" id="offcanvasBottom"> 
        <div class="offcanvas-header"> 
            <h5 class="offcanvas-title"> 
                This is the Bottom offcanvas 
            </h5> 
            <button type="button" class= 
                    "btn-close text-reset btn-light bg-light" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close"> 
            </button> 
        </div> 
        <div class="offcanvas-body"> 
            <p>This offcanvas pops from the bottom when triggered</p> 
            <br> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" 
                alt=""> 
            <button type="button" class="btn-success" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close"> 
                    Close 
            </button> 
        </div> 
    </div> 
</body>   
  
</html>

Output:

Bootstrap 5 Offcanvas Placement

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#placement

Suggest improvement

Bootstrap 5 Offcanvas Usage Options

Bootstrap 5 Offcanvas Usage Via JavaScript

Share your thoughts in the comments

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Bootstrap 5 Offcanvas Placement

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?