You can stack multiple toasts vertically by simply wrapping them in a toast container, which will vertically add some spacing. Let’s take a look at the following example: Example — The output of the above example will look something like this: Placement of Toasts You can place toasts anywhere on your web page using custom CSS…

In this tutorial you will learn how to use the Bootstrap toast component. Creating the Toasts with Bootstrap The toast component is newly introduced in Bootstrap 4. They are lightweight notifications similar to push notifications that are shown by web browsers on computer screens. They’re built with flexbox, so you can easily align and position…

You can easily add scrollspy behavior to your navbar via data attributes without writing a single line of JavaScript code. Let’s try out the following example to see how it works: Example You might be wondering what this code was all about. Well, let’s go through each part of this scrollspy example code one by…

In this tutorial you will learn how to create scrollspy with Bootstrap. Creating ScrollSpy with Bootstrap The Bootstrap 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. The scrollspy will make your web page more elegant and…

In this tutorial you will learn how to create typeaheads with Bootstrap. Creating Typeaheads with Bootstrap The typeahead input fields are very popular in modern web forms. The main purpose of using typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they’ve entered while…

You may also activate a carousel manually using the JavaScript — just call the carousel() method with the id or class selector of the wrapper element in your JavaScript code. Example jQuery JavaScript Tip: Manually activating a carousel via JavaScript can be helpful in a situation when you don’t want your carousel to start sliding or animating at page load. Options There are certain…

You can also add captions to carousel slides easily with the .carousel-caption element within any .carousel-item. You can optionally use display utility classes to hide captions on smaller viewports. Let’s try out the following example to understand how it basically works: Example — The output of the above example will look something like this: Tip: The classes .d-none and .d-md-block on the .carousel-caption elements in…

In this tutorial you will learn how to create carousels with Bootstrap. Creating Carousels with Bootstrap The carousel also known as slideshow or image slider is some of the best way of showcasing the huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text…

You can also combine checkboxes to create checkbox style toggling on button groups. Let’s try out the following example to understand how it basically works: Example — The output of the above example will look something like this: Note: Don’t use the .active class to preselect checkbox or radio in button groups, as it only changes the visual…