Creating Close Button in Bootstrap 4

You may add a cross icon in different Bootstrap 4 components like modals and alerts to allow visitors to dismiss the content or close the component.

The close button can be added by using the simple markup with CSS class. The main container for the 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 examples of simply creating a 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:

The markup:

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

<div class="container">
<div class="container">
<h3>A Demo of cross button</h3>
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

</div>

</div>

</body>
</html>

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

The markup:

<div class="container">

<h3 class="text-primary">Close button in alert</h3>

<div class="alert alert-success" role="alert">

  <strong>Your information is saved. Close this alert.

  <button type="button" class="close" data-dismiss="alert" aria-label="Close">

    <span aria-hidden="true">&times;</span>

  </button>

</div>

Closing the alert example

Now, add 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:

The code:

<!DOCTYPE html>
<html>
<head>
<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>

</head>
<body>

<div class="container">
<h3 class="text-primary">Close button in alert</h3>
<div class="alert alert-danger" role="alert">
  <strong>The record is deleted permanently. Dismiss!.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

</body>
</html>

A modal with a close button demo

In this example, a modal with the close button is created using the 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:

Online Demo

The markup of the modal with the close button:

<div class="modal fade" id="Modal-simple-demo" tabindex="-1" role="dialog" aria-labelledby="Modal-simple-demo-label" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="Modal-simple-demo-label">Heading for the Modal</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        The modal can closed by cross button. <br />

       

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-success">Yes</button>

        <button type="button" class="btn btn-warning">No</button>

      </div>

    </div>

  </div>

</div>

Get the complete code from the example page.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️