Bootstrap - Close button
Bootstrap Close Button Classes
Bootstrap offers a way to create close buttons with minimal effort. The framework has a class called .close that can be used on an element to style it as a close button. This class applies default styling to the button, making it recognizable and consistent across your web page.
The .close class styles the button as a small, circular or square-shaped button with an "X" icon inside it. The icon is shown using the × HTML entity, which displays a multiplication sign (×). By default, the close button has a transparent background and a slightly darker color for the icon.
Example: Basic structure of a close button using Bootstrap
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>We have a <button> element with the type attribute set to "button" to show that it's a clickable button. The .close class is used on the button to give it the default close button styling. The aria-label attribute provides a text alternative for screen readers, indicating the button's purpose.
Inside the button, we have a <span> element that contains the × entity. This entity displays the close icon. The aria-hidden attribute is set to "true" on the span to hide it from screen readers, as the button's purpose is already conveyed through the aria-label on the parent button element.
By using the .close class and the × entity, Bootstrap handles the basic styling and appearance of the close button. You can customize the button further by adding classes or custom CSS styles to change its size, color, or positioning, which will be covered in the next section.
Customizing Close Buttons
Bootstrap provides classes and options to customize the look and positioning of close buttons. Let's see how you can change the button size, color, and use custom CSS styles to further customize its look. We'll also look at how to position the close button using Bootstrap's positioning classes.
Changing the Button Look
Bootstrap offers sizing classes that you can use to change the size of the close button. By adding classes like .btn-sm or .btn-lg to the button element, you can make the button smaller or larger.
Example: Changing the Button Size
<button type="button" class="close btn-sm" aria-label="Close">
<span aria-hidden="true">×</span>
</button>To change the color of the close button, you can use Bootstrap's color classes. For example, adding the .text-danger class to the button element will give it a red color, showing a warning or important action.
Example: Changing the Button Color
<button type="button" class="close text-danger" aria-label="Close">
<span aria-hidden="true">×</span>
</button>If you want more control over the button's look, you can use custom CSS styles. By targeting the .close class or using a specific class on the button element, you can change properties like background color, border, padding, and more.
Example: Using Custom CSS Styles
<style>
.custom-close {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 50%;
padding: 0.5rem;
}
</style>
<button type="button" class="close custom-close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>Positioning the Close Button
Bootstrap provides positioning classes that you can use to place the close button in different locations within a container or component. The most used classes are .float-right and .float-left, which align the button to the right or left side of its container.
Example: Positioning Using Bootstrap Classes
<div class="card">
<div class="card-header">
<h5 class="card-title">Card Title</h5>
<button type="button" class="close float-right" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body">
<p>Card content goes here.</p>
</div>
</div>You can also use custom CSS to position the close button by using the position property and changing the top, right, bottom, or left values.
Example: Using Custom Positioning
<style>
.custom-position {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<div class="position-relative">
<button type="button" class="close custom-position" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- Other content -->
</div>By using Bootstrap's sizing and color classes, using custom CSS styles, and utilizing positioning classes or custom CSS, you can easily customize the look and placement of close buttons to fit your web page's design and layout.
Implementing Close Button Functionality
Bootstrap makes it easy to add functionality to close buttons using its built-in JavaScript plugins. You can use these plugins to dismiss or hide elements associated with the close button, providing a smooth user experience.
To add functionality to a close button, you can use the data-dismiss attribute on the button element. The data-dismiss attribute specifies the type of element to dismiss when the button is clicked. Setting data-dismiss="alert" will dismiss an alert component when the close button is clicked.
Dismissable Alert Example
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a dismissible alert.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>We have an alert component with the .alert-dismissible class, which adds padding to the right side of the alert to accommodate the close button. The close button has the data-dismiss="alert" attribute, indicating that it should dismiss the alert when clicked.
Similarly, you can use the data-dismiss attribute to dismiss modal dialogs. Setting data-dismiss="modal" on a close button within a modal will close the modal when the button is clicked.
Dismissable Modal Example
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal content goes here.
</div>
</div>
</div>
</div>The close button is located within the modal header and has the data-dismiss="modal" attribute. When the button is clicked, it will dismiss the modal dialog.
If you want more control over the close button's functionality or need to perform additional actions when the button is clicked, you can use JavaScript event listeners. Bootstrap provides events like close.bs.alert and hidden.bs.modal that you can listen to and execute your own code when the events are triggered.
JavaScript Event Listener Example
<script>
$(document).ready(function() {
$('.alert').on('close.bs.alert', function() {
// Code to be executed when the alert is closed
console.log('Alert closed');
});
$('#exampleModal').on('hidden.bs.modal', function() {
// Code to be executed when the modal is closed
console.log('Modal closed');
});
});
</script>We use jQuery to listen for the close.bs.alert event on the alert component and the hidden.bs.modal event on the modal dialog. When these events are triggered (i.e., when the close button is clicked), the code inside the event listeners will be executed. You can replace the console.log statements with your own code to perform any desired actions.
By using Bootstrap's data-dismiss attribute and JavaScript event listeners, you can implement close button functionality for dismissible components like alerts and modals, providing a way to close or hide elements on your web page.