{% extends 'layouts/base_background.html' %} {% load static %} {% block title %} Material Kit 2 by Creative Tim {% endblock title %} {% block body %} class="dropdowns-sections" {% endblock body %} {% block header %} {% include 'includes/navigation_light.html' %} {% endblock header %} {% block content %}

Dropdowns

Dropdown and Dropup

Copy 
<!-- Start dropdowns & dropups -->
<div class="container py-7">
  <div class="row">
      <div class="row">
        <div class="col-lg-4 ms-lg-auto col-md-6 col-sm-3 d-flex justify-content-center">
          <div class="dropdown">
            <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown button
            </button>
            <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-4 me-lg-auto col-md-6 col-sm-3 d-flex justify-content-center">
          <div class="btn-group dropup mt-7">
            <button type="button" class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Dropup
            </button>
            <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</div>
<!--   end dropdowns & dropups -->

Selectpicker

Screenshot
Get the Code
selectpicker
{% endblock content %} {% block footer %} {% include 'includes/footer_fullscreen.html' %} {% endblock footer %} {% block javascripts %} {% include 'includes/scripts_sections.html' %} {% endblock javascripts %}