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. ×
Have a look at the demos of simply creating close button along with different Bootstrap 4 components.
The following example simply displays the cross button without any action by using this markup:
See online demo and code
The markup:
|
1 2 3 4 5 |
<button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> |
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.
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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">×</span> </button> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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">×</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.