Investment AdminUIUX - Bootstrap HTML Admin template

Off Canvas

Standard Off-Canvas

canvas positioned at left/start with class offcanvas-start accessible with link and button both. You can stop closing offcanvas on click of backdrop by using static backdrop (data-bs-backdrop="static") on offcanvas div attribute.

Link with href

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.


            <a class="btn btn-theme" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                Link with href
            </a>
            <button class="btn btn-theme" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                Button with data-bs-target
            </button>
            
            <!-- off canvas live offcanvas-start -->
            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                <div class="offcanvas-header">
                    <p class="h5 offcanvas-title" id="offcanvasExampleLabel">Offcanvas</p>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div>
                        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                    </div>
                    <div class="dropdown mt-3">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            Dropdown button
                        </button>
                        <ul class="dropdown-menu">
                            <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>
            </div>

Off-Canvas Positions

.offcanvas-start places offcanvas on the left of the viewport (shown above),
.offcanvas-end places offcanvas on the right of the viewport,
.offcanvas-top places offcanvas on the top of the viewport,
.offcanvas-bottomplaces offcanvas on the bottom of the viewport

canvas positioned at end/right with class offcanvas-end also with this demo body content remain accessible.

Try scrolling the rest of the page to see this option in action.

canvas positioned at top with class offcanvas offcanvas-top.

...

canvas positioned at bottom with class offcanvas offcanvas-bottom.

...


            <button class="btn btn-theme" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
            <!-- off canvas live offcanvas-end -->
            <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
                <div class="offcanvas-header">
                    <p class="offcanvas-title h5" id="offcanvasScrollingLabel">Offcanvas with body scrolling</p>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <p>Try scrolling the rest of the page to see this option in action.</p>
                </div>
            </div>
            
            <button class="btn btn-theme" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
             <!-- off canvas live offcanvas-top -->
             <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
                <div class="offcanvas-header">
                    <p class="offcanvas-title h5" id="offcanvasTopLabel">Offcanvas top</p>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    ...
                </div>
            </div>
            
             <!-- off canvas live offcanvas-bottom -->
            <button class="btn btn-theme" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle Bottom offcanvas</button>
            <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
                <div class="offcanvas-header">
                    <p class="offcanvas-title h5" id="offcanvasBottomLabel">Offcanvas Bottom</p>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    ...
                </div>
            </div>

Modal Dialog

Table