The pop-up window refers to the small window on the existing window’s screen. It is utilized to display additional or new information in any application. Sometimes, it is also known as an advertisement. Bootstrap provides many classes that help to create modal windows easily. However, using CSS, the modal window can be designed according to your likes.

This write-up will describe how to style the Bootstrap modal.

How to Style the Bootstrap modal?

To learn how to style the Bootstrap modal, follow the steps below.

Step 1: Create an HTML File

First, create a modal by following the instructions given below:

• Create a “<div>” container and assign it a class “main-modal-container”.
• Then, add a button that will trigger the modal window. Assign it the “btn”, “btn-primary”, and “show-modal” classes. Set the data attributes “data-toggle” with the value “modal” and the “data-target” with the “#myModal” value. This id is pointing to the id of the modal window.
• Next, create the modal window. To do so, add a “<div>” element and assign it “modal” and “fade” classes, and set the id.
• Add a “<div>” for the dialog box of the modal and assign it the “modal-dialog” class.
• Then, specify the modal’s content in a “<div>” and assign it the class “modal-content”.
• Make a close button with the class “close”. The “data-dismiss” attribute is utilized to close the modal window.
• Then, specify the modal body with the classes “modal-body” and “row”. Inside it, take a column of 6 grids for the image and 6 for the content.
• The image is embedded using the “<img>” tag.
• Then, inside the “<div>” element with the “content” class, add the title, subtitle, and description.
• After that, place a button with the Bootstrap “btn”, “btn-danger”, and “p-2” classes:

Step 2: Style “main-modal-container” Class

The whole container is styled with the CSS “font-family” property:

Step 3: Style “show-modal” Class

The “show-modal” class is declared with the following properties:

Here:

• “color” sets the font color.
• “background-color” sets the element’s background color.
• “text-transform” capitalizes the text.
• “padding” adjusts space around the element’s content.
• “margin” produces space around the element.
• “display” with the value “block” sets the element’s width to 100%.

Step 4: Style “modal-dialog” Class on Fade

When the modal fades, the following CSS properties are applied to the “modal-dialog” class:

• “transform” property with the “scale()” value increases or decreases the element’s size vertically or horizontally.
• “transition” gradually moves the element. The “cubic-bezier()” function applies the cubic bezier curve. It is determined by four points.

Step 5: Style “modal-dialog” Class on Show

The CSS “transform” property with the value “scale(1)” increases the size of the dialog box.

Step 6: Style “modal-content” Class

The “modal-content” is decorated with the following properties:

• “border-radius” rounds the element’s edges.
• “border” with the value “none” hides the border.
• “overflow” controls the content’s flow.

Step 7: Style “close” Class

Here:

• “opacity” defines the element’s transparency level.
• “position” with the value “absolute” sets the element’s position relative to its parent position.
• “right” and “top” set space at the right and top of the close button.
• “z-index” specifies the element’s stack order. The greater stack order brings the element to the front.

Step 8: Style “modal-body” Class

Space around the entire modal body is adjusted by CSS “padding” property. Moreover, the “!important” keyword is utilized to set the element’s importance.

Step 9: Style “img” Element

Step 10: Style the “content” Class

By using the “padding” property, the space is added around the “content” class’s content.

Step 11: Style “title” Class

Here:

• “font-family” defines the font’s style.
• “font-size” sets the font’s size.

Step 12: Style “sub-title” Class

According to the given code snippet:

• “font-weight” sets the font’s thickness.
• “text-transform” sets the font case.

Output

This is how you can style the Bootstrap modal.

Conclusion

To style the Bootstrap modal window, first, add the button that will trigger the modal. Then, make the modal window using HTML elements. After that, add several CSS properties, including “padding”, “margin”, “color”, “transition”, and many more to style the modal window. More specifically, the “cubic-bezier” function is used to apply the transition effect in a four points curve on the modal window. This post has explained the procedure to style the Bootstrap modal.