Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
bootstrap
css
communitycreator

How to use a modal in Bootstrap 4

Akande Olalekan Toheeb

Overview

Modals is a dialog box that is used to display content on a page. It can hold a variety of items, for example, paragraphs, forms, tables, and so on.

Using a modal can enhance the sharing of content on our webpage.

How to create a modal

The first step to creating a modal is to set up a button that will open up the modal. This can be done using the <button> tag with the following properties: type="button", data-toggle="modal", data-target="ModalId"

The next step is to create the three basic containers. We will create the first container with a .modal class and an id. The second container is a child of the first, and it will have a modal-dialog class. The third and final container will have a .modal-content class.

// The three basic containers 

<div class="modal" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">

      </div>
   </div>
</div>


The next steps to create a modal are as follows:

  1. Create another container with the modal-header class. This container will contain two items:

    • One of the h1 to h6 tags with the modal-title class, which is used to display the modal title.

    • A button with a close, data-dismiss="modal", and type="button" class. These classes are used to set up a clickable button to close the modal. The close entity &times; is used with this button.

  2. Create another container with the modal-body class. This container holds the content of the modal. In this container, we can include any items that we wish to display in it.

  3. The last container is a container with the modal-footer class. This also contains a button that will close the modal. The difference between this button and the one inside the modal-header is that the button that closes the modal has a button class, .btn, which actually sets up a button.

Code explanation

  • Line 7: We set up a button that opens up our modal.

  • Lines 9–11: We set up our three basic modal containers.

  • Lines 13–16: We set up the modal header with its corresponding content.

  • Lines 18-22: We set up the modal body.

  • Line 24-26: We set up the modal footer.


RELATED TAGS

html
bootstrap
css
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring