Modals

Another component for displaying interactive content on the page.

Modal Classes

• modal fade
  • modal-dialog modal-content
  • modal-header modal-body modal-footer

Try it

There are two parts to a modal. The button that launches the modal and the modal itself. The button should have two data attributes.

data-bs-toggle="modal" - This identifies the button as driving a modal.

data-bs-target="ID" - This identifies the ID of the modal you want to show.

The main container for the modal is simply modal. If you add a fade class, you get a little animation that plays when the modal is activated or deactivated.

There are two other containers that will make the modal content look good.

The modal-dialog controls the size of the modal, more on that when we get to some of the options.

modal-content container set up the spacing for the content inside the modal.

Inside the modal-content container, you can have a header, body and footer sections.

It's also common to have a close button. Bootstrap provides a nice btn-close class you can use to dismiss items. Use the data-bs-dismiss="modal" aria-label="Close" attributes.

Modal Options

• modal-dialog{-TYP}

  • centered scrollable

• modal{-SIZ}

  • SIZ: sm(300) none(500) lg(800) xl(1140)

• modal-fullscreen{-SIZ}{-down}

  • SIZ: sm(576) md(768) lg(992) xl(1200) xxl(1400)

• data-bs-{TYP}

  • backdrop(bool|static) keyboard(bool) focus(bool)

Try it

Here's some of the options you can use.

In the modal-dialog container, you can use a modal-dialog-centered class if you want the modal to be automatically placed in the center. And if you have a lot of text, you can use the modal-dialog-scrollable to make the modal scrollable.

Instead of a specific size for the modal, you can choose to use a full screen modal. There are some options here to control when that modal activates. You can choose the breakpoints at which the modal will STOP being full screen.

There are some data classes you can add to the modal container to control certain aspects of the modal.

data-bs-backdrop - Normally, when you click outside a modal, it will automatically close. You can change this by setting the data-bs-backdrop option to 'static'

data-bs-keyboard - The modal will close when you press the escape key unless you turn it off.

data-bs-focus - The modal will be focused unless you set this to false.