Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code. Use the .close class to style a close icon.
<div class="clearfix">
<button type="button" class="close">×</button>
</div>
If an element is bigger than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto to the containing element to fix this problem.
.clearfix {
overflow: auto;
}
Bootstrap 4 has a lot of utility classes to quickly style elements. With no using CSS code.
This class adds a border all around the element.
Tooltip is a component that is used for displaying small pop-up messages in a small box that appears when the user moves the mouse pointer over an element.
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
The toast component is used for showing a couple of seconds of a message when something happens. It works the same as an alert box.
Bootstrap “spinners” is used to display the loading state in your projects.
The Bootstrap 4 scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page.
Progress Bar in Bootstrap 4 is mainly used to indicate to the user, how much progress of the process is done. progress bars featuring support for stacked bars, animated backgrounds, and text labels. Use utility classes for the background (bg-success, bg- info, bg-light, bg-dark, bg-danger, bg-warning) for creating a progress bar with a different color.
A popover is similar to the tooltip, offering an extended view complete with a heading. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. Note:- Popovers must be initialized with jQuery.
