{% extends "partials/base.html" %} {% load static %} {% block title %}Offcanvas{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "partials/page-title.html" with pagetitle="Base UI" title="Offcanvas" %} {% endblock pagetitle %} {% block content %}
You can use a link with the href
attribute, or a button with the
data-bs-target
attribute. In both cases, the data-bs-toggle="offcanvas"
is
required.
Scrolling the <body>
element is disabled when an offcanvas and its backdrop are
visible. Use the data-bs-scroll
attribute to toggle <body>
scrolling
and data-bs-backdrop
to toggle the backdrop.
Try the right and bottom examples out below.
.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-bottom
places offcanvas on the bottom of the viewportChange the appearance of offcanvases with utilities to better match them to
different contexts like dark navbars.
Here we add .text-bg-dark
to the .offcanvas
and
.btn-close-white
to
.btn-close
for proper styling with a dark offcanvas. If you have dropdowns within,
consider also adding
.dropdown-menu-dark
to .dropdown-menu
.