Creating close button in Bootstrap 4

You may add a cross icon in different Bootstrap 4 components like modals and alerts for allowing visitors dismissing the content or closing the component.

The close button can be added by using the simple markup with CSS class. The main container for close button is the <button> tag with .close class. Within the button, a span tag is added with cross icon code i.e. &times;

Have a look at the demos of simply creating close button along with different Bootstrap 4 components.

A simple Bootstrap 4 close button example

The following example simply displays the cross button without any action by using this markup:

See online demo and code

The markup:

Creating the cross button in an alert example

This example shows using this cross button in a Bootstrap 4 alert. This cross button is for display only; so no action is done as you press it.

Bootstrap close button

See online demo and code

The markup:

Closing the alert example

Now, adding some action as the cross button is pressed. See the example below where I added jQuery library along with Bootstrap JS file.

As you press the close button towards the right side of the alert, it will close the alert:

See online demo and code

In the <head> section:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>

The markup:

A modal with close button demo

In this example, a modal with the close button is created using Bootstrap 4 framework. The close button markup is placed after the modal-title in the modal-content div. So, the cross button displays towards the top right bar of the modal window. Have a look at this online example and launch the modal by pressing the button:

See online demo and code

The markup of modal with close button:

Get the complete code from the example page.