Modals

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Modal on Hummingbird
Example
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#error-modal">Launch demo modal</button>
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered max-w-125" role="document">
    <div class="modal-content relative">
      <div class="absolute top-0 end-0 mt-2 me-2 z-1">
        <button class="btn-close btn btn-sm btn-circle flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div class="rounded-t-md py-4 ps-7 pe-16 bg-muted">
          <h4 class="mb-1" id="modalExampleDemoLabel">Add a new illustration </h4>
        </div>
        <div class="p-7 pb-0">
          <form>
            <div class="mb-4">
              <label class="col-form-label" for="recipient-name">Recipient:</label>
              <input class="form-control" id="recipient-name" type="text" />
            </div>
            <div class="mb-4">
              <label class="col-form-label" for="message-text">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary" type="button">Understood </button>
      </div>
    </div>
  </div>
</div>
Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Launch static backdrop modal</button>
<div class="modal fade" id="staticBackdrop" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg mt-16" role="document">
    <div class="modal-content border-0">
      <div class="absolute top-0 end-0 mt-4 me-4 z-1"><button class="btn-close btn btn-sm btn-circle flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button></div>
      <div class="modal-body p-0">
        <div class="rounded-t-md bg-muted py-4 ps-7 pe-16">
          <h4 class="mb-1" id="staticBackdropLabel">Add a new illustration to the landing page</h4>
          <p class="text-xs mb-0">Added by <a class="text-muted font-semibold hover:underline" href="#!">Antony</a></p>
        </div>
        <div class="p-7">
          <div class="row">
            <div class="lg:col-9">
              <div class="flex"><span class="fa-stack -ms-1 me-4"><i class="fas fa-circle fa-stack-2x text-(--background-color-highlight)"></i><i class="fa-inverse fa-stack-1x text-primary! fas fa-tag" data-fa-transform="shrink-2"></i></span>
                <div class="flex-1">
                  <h5 class="mb-2 text-base">Labels</h5>
                  <div class="flex"><span class="badge me-1 py-2 badge-subtle-success">New</span><span class="badge me-1 py-2 badge-subtle-primary">Goal</span><span class="badge me-1 py-2 badge-subtle-info">Enhancement</span>
                    <div class="dropdown dropend"><button class="btn btn-sm btn-secondary px-2 fsp-75 bg-gray-400 border-gray-400 dropdown-toggle dropdown-caret-none h-full" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-plus"></span></button>
                      <div class="dropdown-menu">
                        <h6 class="dropdown-header text-sm py-0 px-4 mb-0">Select Label</h6>
                        <div class="dropdown-divider"></div>
                        <div class="px-4"><button class="bg-danger-lighter text-danger-darker dropdown-item rounded-sm mb-2" type="button">New</button><button class="bg-primary-lighter text-primary-darker dropdown-item rounded-sm mb-2" type="button">Goal</button><button class="bg-info-lighter text-info-darker dropdown-item rounded-sm mb-2" type="button">Enhancement</button></div>
                        <div class="dropdown-divider"></div>
                        <div class="px-4"><button class="btn btn-sm block w-full btn-outline-secondary border-gray-400">Create Label</button></div>
                      </div>
                    </div>
                  </div>
                  <hr class="my-7" />
                </div>
              </div>
              <div class="flex"><span class="fa-stack -ms-1 me-4"><i class="fas fa-circle fa-stack-2x text-(--background-color-highlight)"></i><i class="fa-inverse fa-stack-1x text-primary! fas fa-align-left" data-fa-transform="shrink-2"></i></span>
                <div class="flex-1">
                  <h5 class="mb-2 text-base">Description</h5>
                  <p class="wrap-break-word text-sm">The illustration must match to the contrast of the theme. The illustration must described the concept of the design. To know more about the theme visit the page. </p>
                </div>
              </div>
            </div>
            <div class="lg:col-3">
              <h6 class="mt-12 lg:mt-0">Add To Card</h6>
              <ul class="nav lg:flex-col text-sm">
                <li class="nav-item me-2 lg:me-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fas fa-user me-2"></span>Members</a></li>
                <li class="nav-item me-2 lg:me-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fas fa-tag me-2"></span>Label</a></li>
                <li class="nav-item me-2 lg:me-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fas fa-paperclip me-2"></span>Attachments</a></li>
                <li class="nav-item me-2 lg:me-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fa fa-align-left me-2"></span>Description </a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Tooltips and Popovers

Tooltips and Popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#tooltippopovers">Launch modal with tooltips and popover</button>
<div class="modal fade" id="tooltippopovers" tabindex="-1" aria-labelledby="tooltippopoversLabel" aria-hidden="true">
  <div class="modal-dialog mt-16" role="document">
    <div class="modal-content border-0">
      <div class="absolute top-0 end-0 mt-2 me-2 z-1"><button class="btn-close btn btn-sm btn-circle flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button></div>
      <div class="modal-body p-0">
        <div class="bg-muted rounded-t-md py-4 ps-7 pe-16">
          <h4 class="mb-1" id="tooltippopoversLabel">Tooltips and Pophover</h4>
        </div>
        <div class="p-7 pb-0">
          <div class="row">
            <div class="col">
              <h5>Popover in a modal</h5>
              <p>This <a class="btn btn-secondary popover-test" href="#!" role="button" title="Popover title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
              <h5>Tooltips in a modal</h5>
              <p><a class="tooltip-test" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">This link</a> and <a class="tooltip-test" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#scrollinglongcontent">Launch Scrolling long content modal</button>
<div class="modal fade" id="scrollinglongcontent" data-keyboard="false" tabindex="-1" aria-labelledby="scrollinglongcontentLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scrollinglongcontentLabel">Modal title</h5><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body modal-dialog modal-dialog-scrollable mt-0">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Understood</button></div>
    </div>
  </div>
</div>

Thank you for creating with Falcon tailwind
2026 © ThemeWagon

v1.0.0-alpha

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon tailwind now and create beautiful dashboards with hundreds of widgets.

Purchase
customize