Linux

Modals in Bootstrap 5

Modal is a dialog box or a popup window that is used to give important information to the user before taking any action or moving further on a web page. Basically, bootstrap 5 modals are used to give information like session time out or it appears when a user is trying to delete or update something. Moreover, it is used for confirmation purposes or to show hidden content on demand.

This article is about

  • How to create a modal in bootstrap 5?
  • Basic Modal
  • Add Animation to a modal
  • Modal Sizes
  • Centered Modal
  • Full-Screen Modal
  • Responsive Full-Screen Modal
  • Scrolling Modal

How to create a modal

To create a modal, first create a div with .modal class along with its unique id then wrap this div around a div with .modal-dialog class, inside this div create another div with the .modal-content class and inside .modal-content div create three more divs with the .modal-header, .modal-body, .modal-footer classes.

.modal-header div contains the title of the modal and its dismissal button.

.modal-body div contains the main content off the modal.

.modal-footer div contains the control buttons of the modal.

Basic Modal

To create a basic modal, create a div that use .modal class with unique id after that wrap this div around the divs containing .modal-dialog, .modal-content, .modal-header, .modal-body and .modal-footer classes as shown in the example.

<div class=“container” style=“margin-top: 15px;”>
    <h1>Add Categories</h1> &nbsp; <br>
This modal example is for adding categories
    <button type=“button” class=“btn btn-primary” data-bs-toggle=“modal”      data-bs-target=“#MM”>
Open Modal
    </button>
<!–Modal –>
    <div class=“modal” id=“MM”>
        <div class=“modal-dialog”>
            <div class=“modal-content”>
<!– M.Header –>
                <div class=“modal-header”>
                    <h4 class=“modal-title”>Categories</h4>
                    <button type=“button” class=“btn-close” data-bs-dismiss=“modal”></button>
                </div>
<!– M.body –>
<div class=“modal-body”>
    <form class=“form-control”>
        <input class=“form-control” type=“text” placeholder=“Category Name”>
        <br>
        <textarea class=“form-control” placeholder=“Description”></textarea>
    </form>
</div>
<!– M.footer –>
        <div class=“modal-footer”>
            <button type=“button” class=“btn btn-primary”  data-bs-dismiss=“modal”>Add</button>
            <button type=“button” class=“btn btn-danger” data-bs-dismiss=“modal”>Close</button>
        </div>
    </div>
</div>
</div>
</div>

This is how a basic model is created.

Add Animation to a modal

To add animation to your modal use .fade class with .modal class:

div class=“modal fade” id=“MM”>
    . . . . . . .
/div>

This is how fade animation is applied on modal. 

Without animation

Remove the .fade class to open the modal without any animation.

div class=“modal” id=“MM”>
    . . . . . . .
/div>

This is how a modal looks without animation.

Modal Sizes

Modals can have three sizes:

Small Modal

To create a small modal, the .modal-sm class is used:

div class=“modal-dialog modal-sm”>
    . . . . . . .
/div>

This is how a small modal is created.

Large Modal

To create a large modal, the .modal-lg class is used:

div class=“modal-dialog modal-lg”>
    . . . . . . .
/div>

This is how a large modal is created.

Extra Large Modal

To create an extra large modal, the .modal-xl class is used:

div class=“modal-dialog modal-xl”>
    . . . . . . .
/div>

This is how an extra large modal is created.

Full Screen Modals

If you want your modal to appear on full screen then use .modal-fullscreen class with .modal-dialog class.

div class=“modal-dialog modal-fullscreen”>
    . . . . . . .
/div>

 This is how a full-screen modal is created.

Responsive Full-Screen Modals

We can also control when the modal will show as a fullscreen modal. For that use the following classes as your requirement.

  • .modal-fullscreen-sm-down this class shows fullscreen modal when screen size is below 576px.
  • .modal-fullscreen-md-down this class shows fullscreen modal when screen size is below 768px.
  • .modal-fullscreen-lg-down this class shows fullscreen modal when screen size is below 992px.
  • .modal-fullscreen-xl-down this class shows fullscreen modal when screen size is below 1200px.
  • .modal-fullscreen-xxl-down this class shows fullscreen modal when screen size is below 1400px.

Centered Modal

Use .modal-dialog-centered class with .modal-dialog  to show modal vertically and horizontally in the center of the page.

div class=“modal-dialog modal-dialog-centered”>
    . . . . . . .
/div>

Scrolling Modal

A scrollbar is automatically added to a page when the content in a model is large.

So it is not a good approach to scroll the whole page instead of scrolling the modal only to solve this problem add a class .modal-dialog-scrollable with the .modal-dialog class to make the modal scrollable

div class=“modal-dialog modal-dialog-scrollable”>
    . . . . . . .
/div>

A scrollable modal is successfully created and working perfectly fine.

Conclusion

Modal is created by using the .modal class which wraps around other divs containing .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer . The above article outlines the basic structure of the bootstrap 5 modal with a header, body, and footer which contain action buttons for the user. Also, it showcases different modal types like modal sizes, modals with or without animation, centered modal, and responsive fullscreen modals.

Source link

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button