This chapter will discuss about Bootstrap collpase. Collasping is toggling the content visibility. This is achieved using bootstrap’s javaScript plugins and some classes.
The JavaScript plugin for collapse is used to display and hide information. Buttons or anchors act as triggers when mapped to specific elements to toggle.
When an element is collapsed, the height will animate from its current value to zero. Due to how CSS handles animations, padding cannot be applied to a .collapse element.
Basic example
A basic collapse works as in the following example. Buttons when clicked show and hide another element via class changes:
Class .collapse hides content.
Class .collapsing helps transitions.
Classes .collapse.show displays content.
Using a button with the data-bs-target attribute is a good idea. You can also use an <a> link with a role=”button” (although this is not advised from a semantic perspective). data-bs-toggle=”collapse” is necessary in both situations.https://www.tutorialspoint.com/bootstrap/examples/collapse_basic_example.php
Example
You can edit and try running this code using Edit & Run option.
Collapse using link
</a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Collapse using button
</button></p><div class="collapse" id="collapseExample"><div class="card card-body">
The collapse JavaScript plugin used to display and hide content.
</div></div></body></html></pre>
Horizontal
Horizontal collapsing is supported by collapse plugin. Set a width on the immediate child element and add the .collapse-horizontal modifier class to transition the width rather than the height. You can further customize by using width utilities, create your own unique Sass, or use inline styles.https://www.tutorialspoint.com/bootstrap/examples/collapse_horizontal.php
Example
You can edit and try running this code using Edit & Run option.
Multiple targets can be used to toggle multiple elements assingning them to a common group and using a single <button> or <a> tag to hide/show. Following points helps us understand this better:
By assigning the common class in the data-bs-target attribute of the <button> or <a>, an element can reference multiple elements to show and hide them.
Multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.
Example
You can edit and try running this code using Edit & Run option.
Example of multiple collpase and targets.
</div></div></div><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample2"><div class="card card-body">
Example of multiple collapse and targets.
</div></div></div></div></body></html></pre>
Accessibility
Use aria-expanded to communicate collapsible element's status to assistive technology. Set aria-expanded="false" for closed collapsible elements and aria-expanded="true" for open ones.
The plugin toggles the attribute on the control based on whether the collapsible element is open or closed. Apply role="button" if the control element's HTML element is not a button.
Modern screen readers and similar assistive technologies make use of the data-bs-target attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Close Notification
<button type="button" class="btn-close" aria-label="Close"></button></div></body></html></pre>
Disabled state
Disable close buttons with disabled attribute. Bootstrap also applies pointer-events: none; and user-select: none; to prevent triggering of hover and active states.
The opacity of disabled close buttons is changed.
Example
You can edit and try running this code using Edit & Run option.
Close Notification
<button type="button" class="btn-close" disabled aria-label="Close"></button></div></body></html></pre>
Dark variant
Take note! The .btn-close-white class is deprecated as of v5.3.0. Use data-bs-theme="dark" for the close button color mode.
To invert the close button, add data-bs-theme="dark" to .btn-close class or to it's parent elements. The filter property is used to invert the background-image.https://www.tutorialspoint.com/bootstrap/examples/closebutton_dark_variant.php
Example
You can edit and try running this code using Edit & Run option.
This chapter discusses about the Bootstrap component carousel. The Carousel component in Bootstrap is used to display a rotating set of images or content in a slideshow format.
Overview
The component provides multiple options for customization, including slide transitions, interval timing, and navigation controls.
It allows users to easily navigate through the content and is commonly used for showcasing products or featured content on a website.
To ensure optimal performance, carousels require manual initialization through the carousel constructor method. If not initialized, certain event listeners (specifically those necessary for touch/swipe support) will remain unregistered until a control or indicator is activated by the user.
The carousel with the data-bs-ride=”carousel” attribute is initialized automatically on page load. No need to explicitly initialize such carousels.
Bootstrap does not support nested carousels. They can also often cause usability and accessibility challenges.
The animation effect of the carousel component depends on the prefers-reduced-motion media query.
Let us see an example of a basic carousel:https://www.tutorialspoint.com/bootstrap/examples/carousel_create.php
Example
You can edit and try running this code using the Edit & Run option.
The slide dimensions are not automatically normalized in carousels.
You need to use additional utilities or custom styles to size the content in carousels.
The previous/next controls and indicators are not explicitly required, as carousels support them. Add and customize the controls as per your requirement.
Do not forget to add the .active class to one of the slides, else the carousel will not be visible.
Ensure to set a unique id on the .carousel for optional controls, in case you are using multiple carousels on a single page.
You must add the data-bs-target attribute to the control and indicator elements or href for links, that matches the id of the .carousel element.
Indicators
Indicators can be added along with the previous/next controls, such that the user has the access to jump directly to a specific slide.
Let us see an example for adding indicators:https://www.tutorialspoint.com/bootstrap/examples/carousel_indicators.php
Example
You can edit and try running this code using the Edit & Run option.
Captions can be added to the slides with the .carousel-caption element within any .carousel-item. The caption can be hidden using the class .d-none and can be made visible using the classes .d-{breakpoint}-block.
Let us see an example for adding captions:https://www.tutorialspoint.com/bootstrap/examples/carousel_captions.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Captions</h1><div id="carouselExampleCaptions" class="carousel slide bg-secondary"><center><div id="carouselExampleCaptions" class="carousel slide bg-secondary"><div class="carousel-indicators text-dark"><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div class="carousel-caption text-white"><h5>Caption for first slide</h5><p>This is the first slide of the carousel component.</p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div class="carousel-caption text-white"><h5>Caption for second slide</h5><p>This is the second slide of the carousel component.</p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div class="carousel-caption text-white"><h5>Caption for third slide</h5><p>This is the third slide of the carousel component.</p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></div></body></html>
Crossfade
To apply a fade transition to your carousel slides instead of a slide, include .carousel-fade. However, if your carousel content comprises solely text slides, it may be necessary to add .bg-body or utilize custom CSS for appropriate crossfading in .carousel-items.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
The carousels can be made to autoplay on page load by setting the ride option to carousel.
While you hover with the mouse, the autoplaying carousels pause automatically. You can control this behavior with the option pause.
The carousel will stop cycling when the webpage is not v isible (either the browser window is inactive or minimized). in case of browsers support that support the page visibility API.
To ensure accessibility, it is advised to steer clear of autoplaying carousels. Should your page contain such a feature, we advise adding a separate button or control to enable explicit pausing or stopping of the carousel.
Let us see an example for autoplaying carousel:https://www.tutorialspoint.com/bootstrap/examples/carousel_autoplay.php
Example
You can edit and try running this code using the Edit & Run option.
When the ride option is set to true, instead of carousel, the carousel will not automatically start to cycle on page load. It will start only after the user’s interaction.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/carousel_autoplay_ride.php
Example
You can edit and try running this code using the Edit & Run option.
Touchscreen devices can swipe left or right to switch between slides on carousels. Turning off the touch option can disable this feature, by setting the value as false.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/carousel_disable_touch.php
Example
You can edit and try running this code using the Edit & Run option.
Attention! The use of dark variants for components has been deprecated in v5.3.0 due to the implementation of color modes. Rather than adding .carousel-dark, set data-bs-theme=”dark” on the root element, a parent wrapper, or the component itself.
This chapter will discuss about Bootstrap cards. Bootstrap cards provide flexible and extensible content containers with many flavors and options. A card is a flexible and extensible container for content. It includes header and footer options, different content, contextual background colors, and effective display options.
Basic card
To create a basic card use the class .card. Use spacing utilities when required because cards don’t come with margins.
The basic card with mixed content and a fixed width is demonstrated here. Cards naturally cover the entire width of their parent element since they have no fixed width. With many sizing choices, this is easily customizable.
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 15rem;"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5>A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get More information</a></div></div></body></html>
Content types
Cards support a various type of content including images, text, list groups, and links. Below are examples of what’s supported.
Body
Add the class .card-body whenever you require a padded section within a card.https://www.tutorialspoint.com/bootstrap/examples/card_body.php
Example
You can edit and try running this code using Edit & Run option.
Card body section.
</div></div></body></html></pre>
Titles, text, and links
Use the card title by adding the class .card-title to the <h*> tag. You can similarly add and tile links by adding .card-link to the <a> tag.
Placing the .card-title and .card-subtitle elements in the .card-body element ensures that the card title and subtitle line up nicely. Subtitles are used by adding .card-subtitle to the <h*> tag.
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></body></html>
List groups
Use flush list groups to create content lists on cards. Add the class .list-group-flush.https://www.tutorialspoint.com/bootstrap/examples/card_list_groups_using_flush.php
Example
You can edit and try running this code using Edit & Run option.
Use flush list groups to create header content lists on cards. Add the header to the list group of card by adding the class .card-header.https://www.tutorialspoint.com/bootstrap/examples/card_list_groups_header_using_flush.php
Example
You can edit and try running this code using Edit & Run option.
Use flush list groups to create footer content lists on cards. Add the footer to the list group of card by adding the class .card-footer.https://www.tutorialspoint.com/bootstrap/examples/card_list_groups_footer_using_flush.php
Example
You can edit and try running this code using Edit & Run option.
Combine multiple content types to create the card you want, or populate it all. Below are image styles, blocks, text styles, and list groups, all grouped into fixed-width card.https://www.tutorialspoint.com/bootstrap/examples/card_kitchen_sink.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><ul class="list-group list-group-flush"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li></ul><div class="card-body"><a href="#" class="card-link">Link 1</a><a href="#" class="card-link">Link 2</a></div></div></body></html>
Header and footer
Include an optional header and/or footer inside a card.https://www.tutorialspoint.com/bootstrap/examples/card_header.php
Example
You can edit and try running this code using Edit & Run option.
Card Header
</div><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div><div class="card-footer">
Card Footer
</div></div></body></html></pre>
You can style the card header by adding .card-header to the <h*> element.https://www.tutorialspoint.com/bootstrap/examples/card_header_using_h.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card"><h5 class="card-header">Card Header</h5><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>
To highlight, add the class .blockquote mb-0 to the .blockquote.https://www.tutorialspoint.com/bootstrap/examples/card_header_using_quote.php
Example
You can edit and try running this code using Edit & Run option.
Align the text of whole card at the center with the class .text-center.https://www.tutorialspoint.com/bootstrap/examples/card_header_text_in_center.php
Example
You can edit and try running this code using Edit & Run option.
Rose
</div><div class="card-body"><h5 class="card-title">A rose is a flower that people in love give each other.</h5><p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p><a href="#" class="btn btn-primary">More info</a></div></div></body></html></pre>
Sizing
Card width is 100% unless otherwise stated. This can be customized using custom CSS, grid classes, grid sass mixins, or utilities.
Using grid markup
Use a grid to wrap your cards into columns and rows as required.https://www.tutorialspoint.com/bootstrap/examples/card_sizing_grid_markup.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row"><div class="col-sm-6 mb-3 mb-sm-0"><div class="card"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></div><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></div></div></body></html>
Using utilities
Quickly set the width of your card using some of the available resizing utilities.https://www.tutorialspoint.com/bootstrap/examples/card_using_utilities.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card w-75 mb-3"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content..</p><a href="#" class="btn btn-primary">Card Button</a></div></div><div class="card w-50"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Card Button</a></div></div></body></html>
Using custom CSS
Use custom CSS in your style sheet or as an inline style to set the width.https://www.tutorialspoint.com/bootstrap/examples/card_using_custom_css.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>
Text alignment
Text Alignment classes allow you to quickly change the text alignment of the entire card or specific parts.https://www.tutorialspoint.com/bootstrap/examples/card_text_alignment.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">The text alignment of the card at the left.</p><a href="#" class="btn btn-primary">Get more info</a></div></div><div class="card text-center mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">The text alignment of the card at the center.</p><a href="#" class="btn btn-primary">Get more info</a></div></div><div class="card text-end" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">The text alignment of the card at the right.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>
Navigation
Add navigation to the header (or block) of your card using Bootstrap navigation components.https://www.tutorialspoint.com/bootstrap/examples/card_navigation.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card text-center"><div class="card-header"><ul class="nav nav-tabs card-header-tabs"><li class="nav-item"><a class="nav-link active" aria-current="true" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div><div class="card-body"><h5 class="card-title">Rose</h5><p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>
Get the Bootstrap navigation components by adding the class .nav-pills.https://www.tutorialspoint.com/bootstrap/examples/card_navigation_using_pills.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card text-center"><div class="card-header"><ul class="nav nav-pills card-header-pills"><li class="nav-item"><a class="nav-link active" href="#" >Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div><div class="card-body"><h5 class="card-title">Rose</h5><p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>
Images
Cards contain several options for working with images. Choose to have "image caps" on each side of the card, overlay the image on the card's contents, or simply embed the image into the card.
Image caps
Cards can have "image caps" at top and bottom (images at the top or bottom of the card), similar to headers and footers as demonstrated below.https://www.tutorialspoint.com/bootstrap/examples/card_images_caps.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card mb-3"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">2 mins ago</small></p></div></div><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">5 mins ago</small></p></div><img src="\bootstrap\images\tutimg2.jpg" class="card-img-bottom" alt="..."></div></body></html>
Images overlays
Turn an image into a card background and overlay the card text. Some images may require additional styling or utility.https://www.tutorialspoint.com/bootstrap/examples/card_images_overlays.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card text-bg-dark"><img src="\bootstrap\images\tutimg2.jpg" class="card-img" alt="..."><div class="card-img-overlay"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small>2 mins ago</small></p></div></div></body></html>
Note: It is important note that text/content should not exceed the height of the image, as this will cause it to be displayed outside the frame.
Horizontal
By using a combination of grid and utility classes, you can create cards horizontally in a mobile-friendly and responsive way. In the example below, .g-0 removes the grid bars and uses the .col-md-* classes to level the card at the md breakpoints.https://www.tutorialspoint.com/bootstrap/examples/card_horizontal.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card mb-3" style="max-width: 540px;"><div class="row g-0"><div class="col-md-4"><img src="\bootstrap\images\tutimg.png" class="img-fluid rounded-start" alt="..."></div><div class="col-md-8"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">1 mins ago</small></p></div></div></div></div></body></html>
Card styles
A wide range of background, border, and color customization choices are available for cards.
Background and color
Added in v5.2.0
Using .text-bg-{color} helpers, you can set a background color with a contrasting foreground color.
Previously, pairing .text-color and .bg-color utilities manually was necessary for styling, you can still do so if you prefer.
By using the border utilities you can change the card border-color. Note that the .text-{color} class can be placed on the parent .card or a subset of the card's content as shown below.https://www.tutorialspoint.com/bootstrap/examples/card_border.php
Example
You can edit and try running this code using Edit & Run option.
You can also change the card header and footer borders and remove the background color with .bg-transparent if you like.https://www.tutorialspoint.com/bootstrap/examples/card_mixins_utilities.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card border-info mb-3" style="max-width: 18rem;"><div class="card-header bg-transparent border-info">Card Header</div><div class="card-body text-info"><h5 class="card-title">Info card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer bg-transparent border-info">Card Footer</div></div></body></html>
Card layout
In addition to styling and customising the content in your card, Bootstrap provides several options for arranging card in series. Currently, these layout options are not responsive. Following sections demonstrates this.
Card groups
Card groups render cards as a single attached element with columns of the same width and height. Card groups are stacked. They use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.https://www.tutorialspoint.com/bootstrap/examples/card_layout_card_groups.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card-group"><div class="card"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">1 mins ago</small></p></div></div><div class="card"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">2 mins ago</small></p></div></div><div class="card"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">3 mins ago</small></p></div></div></div></body></html>
Use a card group with a footer, its content is automatically arranged.https://www.tutorialspoint.com/bootstrap/examples/card_layout_card_groups_footer.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card-group"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">1 mins ago</small></div></div><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">2 mins ago</small></div></div><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">3 mins ago</small></div></div></div></body></html>
Grid cards
Use the Bootstrap grid system and its .row-cols class to control the number of grid columns (wrapped around the cards) to display per row.
For example, here's .row-cols-1 to put cards in columns and .row-cols-md-2 to spread 4 cards of the same width across multiple rows from the middle breakpoint upwards.
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-md-2 g-4"><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div></div></body></html>
If you change it to .row-cols-3 you will see the 4th card break.https://www.tutorialspoint.com/bootstrap/examples/card_grid_cards_row_col_3.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-sm-3 g-5"><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div></div></body></html>
When you want the same height to add .h-100 to the card. You want the same height by default, you can set $card-height: 100% in Sass.https://www.tutorialspoint.com/bootstrap/examples/card_grid_height_100.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-sm-3 g-5"><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div></div></body></html>
Like card groups, card footers are automatically arranged.https://www.tutorialspoint.com/bootstrap/examples/card_group_footer.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-sm-3 g-4"><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">1 mins ago</small></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">2 mins ago</small></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">3 mins ago</small></div></div></div></div></body></html>
This chapter will discuss about Bootstrap button groups. Bootstrap button group puts multiple buttons together on a single line, horizontally or vertically.
Basic example
You can create a group of buttons using .btn in .btn-group class.
Example
You can edit and try running this code using Edit & Run option.
To ensure accessibility for assistive technologies like screen readers, it is important to use the appropriate role attribute and provide explicit labels for button groups. You can use role=”group” for button groups or role=”toolbar” for button toolbars. To label them, you can use aria-label or aria-labelledby.
As an alternative to the .nav navigation components, these classes can also be applied to groups of links.
You can highlight a link by using .active class.
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about Bootstrap breadcrumbs. A breadcrumb is a navigational method that shows the user where they are relative to the current page on a website or application. An accessible website with many pages or a complicated hierarchy can benefit greatly from breadcrumb navigation.
Basic breadcrumbs
Bootstrap allows users to easily create static breadcrumbs layouts by adding the class .breadcrumb to ordered or unordered lists, as demonstrated in the following example. Utility classes can be used to decorate the breadcrumbs.
Example
You can edit and try running this code using Edit & Run option.
When you want to modify the default breadcrumb divider / with the > as a divider, then you can use some custom CSS style rules as shown in the below example:
Dividers are automatically added in CSS through the pseudo-element ::before and property content.
Example
You can edit and try running this code using Edit & Run option.
The quote function is required to quote strings when modifying with Sass. For example, if you use > as your delimiter, then you can use $breadcrumb-divider: quote(“>”);
You can also use embedded SVG icons. Apply icons via custom CSS properties or use Sass variables as demonstrated below.
Example
You can edit and try running this code using Edit & Run option.
If you don't want a breadcrumb separator into the linked list items then set the value of --bs-breadcrumb-divider as a empty strings (' ') or set a Saas variable to $breadcrumb-divider: none;
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about bootstrap badges and the classes to create badges. Badges are frequently used for highlighting important details on web pages, such as headings, warnings, and notification counters.
Bootstrap badges are numerical indication or notification counters (of how many items are associated with a link).
Badges
To scale them according to the size of the immediate parent element, badge uses comparative font scaling and em units. In page links, focus or hover styles are no longer supported as of version 5.
Following example demonstrates how to create inline badges using Bootstrap.
Example
You can edit and try running this code using Edit & Run option.
Badges can be used as part of links or buttons to provide a counter. The users will only see the content of the badge because of how badges are styled, which gives a visual cue as to their purpose. These badges may appear to be random additions of words or numbers at the conclusion of a sentence, a link, or a button, based on the circumstances.
Example
You can edit and try running this code using Edit & Run option.
This example explains a visually hidden class with a portion of additional text where users can see the digit "32" represents the number of notifications.
Example
You can edit and try running this code using Edit & Run option.
A .badge can be modified with top-0 , start-100 , translate-middle utilities and placed in the corner of a link or button. Let's look at the sample below to see how it generally functions.
Example
You can edit and try running this code using Edit & Run option.
Using the .text-bg-{color} helpers , users may set a background color with a contrasting foreground color. In the past, pairing the preferred .text-{color} and .bg-{color} utilities manually was necessary for styling; nevertheless, users are still free to do so if they wish.
Use the text-bg-primary, text-bg-info, text-bg-success etc. utility classes offered by bootstrap's background colour framework to instantly change the appearance of the badges.
Example
You can edit and try running this code using Edit & Run option.
Users can design badges in the shape of pills, or badges having more rounded corners, by using the .rounded-pill modifier class, as demonstrated in the example below.
To quickly modify the appearance of the badges, use the .rounded-pill utility classes provided in bootstrap's background color framework.
Example
You can edit and try running this code using Edit & Run option.
This chapter discusses about the Bootstrap alerts. The alert messages are often the stand out messages shown to the user, where some user action is required, such as warning, error, information or confirmation messages.
By extending the .alert base class with the contextual classes (such as .alert-success, .alert-warning, .alert-info, etc.), you can quickly and simply build attractive alert messages for any number of reasons using Bootstrap. To cancel any alert, you may also include an optional close button.
Simple Alerts
There is a total of 8 different alert types offered by Bootstrap. The most typical alerts, such as success, error or danger, warning and info alerts, etc., are demonstrated in the example below.
Example
You can edit and try running this code using the Edit & Run option.
It is a primary alert box!
</div><div class="alert alert-secondary" role="alert">
It is a secondary alert box!
</div><div class="alert alert-success" role="alert">
It is a success alert box!
</div><div class="alert alert-danger" role="alert">
It is a danger alert box!
</div><div class="alert alert-warning" role="alert">
It is a warning alert box!
</div><div class="alert alert-info" role="alert">
It is an info alert box!
</div><div class="alert alert-light" role="alert">
It is a light alert box!
</div><div class="alert alert-dark" role="alert">
It is a dark alert box!
</div></div></body></html></pre>
Accessibility tip: Use of color to the alert messages just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
Live alert example
You can add a live alert message on your webpage. In order to achieve this refer the example given below.
Example
You can edit and try running this code using the Edit & Run option.
It is a primary alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a></div><div class="alert alert-secondary" role="alert">
It is a secondary alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a></div><div class="alert alert-success" role="alert">
It is a success alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a></div><div class="alert alert-danger" role="alert">
It is a danger alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a></div><div class="alert alert-warning" role="alert">
It is a warning alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a></div></div></body></html></pre>
Additional content
Additional HTML elements like headers, paragraphs, and dividers can also be included in alerts. Following example demonstrates the same.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="fs-2">Alert messages with additional content</h4><div class="alert alert-success" role="alert"><h4 class="alert-heading">Congratulations! Sending my best wishes.</h4><p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p><hr><p class="mb-0">What could be better than something sweet to celebrate an accomplishment!!!</p></div></div></body></html>
Alerts with Icons
For creating alerts with icons use flexbox utilities and Bootstrap Icons.https://www.tutorialspoint.com/bootstrap/examples/alerts_icon.php
Example
You can edit and try running this code using the Edit & Run option.
It is an info alert with an info icon.
</div></div><div class="alert alert-success d-flex align-items-center" role="alert"><svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#success-bg"/></svg><div>
It is a success alert with a success icon.
</div></div><div class="alert alert-warning d-flex align-items-center" role="alert"><svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#warning-bg"/></svg><div>
It is a warning alert with a warning icon.
</div></div><div class="alert alert-danger d-flex align-items-center" role="alert"><svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#warning-bg"/></svg><div>
It is a danger alert with a danger icon.
</div></div></div></body></html></pre>
Dismissing Alerts
Any alert can be dismissed inline by using the alert JavaScript plugin. Refer the following points:
Make sure the built-in Bootstrap JavaScript or the alert plugin is loaded.
Add a close button and the .alert-dismissible class, which places the close button and provides extra padding to the right of the alert.
The JavaScript feature can be turned on by adding the data-bs-dismiss="alert" attribute to the close button.
Let us see this feature in the following example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="fs-2">Dismissal of alerts</h4><div class="alert alert-primary alert-dismissible" role="alert"><strong>Primary Alert Box!</strong> Click on close icon to dismiss the alert box.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div><div class="alert alert-success alert-dismissible" role="alert"><strong>Success Alert Box!</strong> Click on close icon to dismiss the alert box.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div><div class="alert alert-warning alert-dismissible" role="alert"><strong>Warning Alert Box!</strong> Click on close icon to dismiss the alert box.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div></div></body></html></pre>
Make sure to add tabindex="-1" to the element, when you are setting the focus on a non-interactive element that usually does not receive the focus, after closing an alert message. As, not doing so, might lose the focus and reset it to the start of the page, after an alert message is closed.
Animated Alerts
The utility classes .fade and .show create the animation effect, when you close an alert message. Let us see this feature in the following example.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="fs-2">Alert messages with animation</h4><div class="alert alert-info alert-dismissible fade show" role="alert"><strong>Primary Alert Box!</strong> This will close the alert box with fading effect.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div><div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Success Alert Box!</strong> This will close the alert box with fading effect.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div><div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>Warning Alert Box!</strong> This will close the alert box with fading effect.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div></div></body></html></pre>
This chapter will discuss about Bootstrap accordion. The accordion collapses elements vertically, shows and hides through class changes. Use the collapse JavaScript plugin to create accordions that collapse vertically.
How it works
In order to collapse, the accordion uses collapse internally. Use .open class to .accordion element to render an expanded accordion.
Basic Example
To expand and collapsethe content, click on the accordions below.https://www.tutorialspoint.com/bootstrap/examples/basic_example.php
You can edit and try running this code using Edit & Run option.
Bootstrap - Accordian
</button></h2><div id="firstCollapse" class="accordion-collapse collapse show" data-bs-parent="#basicAccordion"><div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div></div></div><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollapse" aria-expanded="false" aria-controls="secondCollapse">
Bootstrap - Buttons
</button></h2><div id="secondCollapse" class="accordion-collapse collapse" data-bs-parent="#basicAccordion"><div class="accordion-body">
You can use Bootstraps custom button styles for actions in forms, dialogs and many more.
</div></div></div></div></body></html></pre>
Flush
To render edge-to-edge accordions, use .accordion-flush to remove borders and rounded corners.
You can edit and try running this code using Edit & Run option.
data-bs-target="#flushCollapseOne" aria-expanded="false" aria-controls="flushCollapseOne">
Bootstrap - Accordian
</button></h2><div id="flushCollapseOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion"><div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div></div></div><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flushCollapseTwo" aria-expanded="false" aria-controls="flushCollapseTwo">
Bootstrap - Buttons
</button></h2><div id="flushCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#flushAccordion"><div class="accordion-body">
You can use Bootstraps custom button styles for actions in forms, dialogs and many more.
</div></div></div></div></div></body></html></pre>
Always open
To keep accordion items open while another item is opened, remove data-bs-parent attribute from each .accordion-collapse.
You can edit and try running this code using Edit & Run option.
Bootstrap - Accordian
</button></h2><div id="firstCollpaseofAlwaysOpen" class="accordion-collapse collapse show"><div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div></div></div><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollpaseofAlwaysOpen" aria-expanded="false" aria-controls="secondCollpaseofAlwaysOpen">
Bootstrap - Buttons
</button></h2><div id="secondCollpaseofAlwaysOpen" class="accordion-collapse collapse"><div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div></div></div></div></body></html></pre>
This chapter discusses about the figure component of Bootstrap. Consider utilizing the <figure> element whenever you have a need to exhibit content, such as an image that may be accompanied by an optional caption.
<figure> element is used to markup a photo or an image in a document and <figcaption> is used to define a caption to that photo.
The .figure class is used to create a responsive container for images, videos, or other media objects.
It provides a way to wrap media content along with optional captions and other related elements.
The classes .figure, .figure-img and .figure-caption provide baseline styles for the <figure> and <figcaption>.
Use .img-fluid class to your <img>, in order to make it responsive; as the images in figures have no explicit size.
Let us see an example of .figure class
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Figures</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Figures</h4><br><figure class="figure"><img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure"><figcaption class="figure-caption">A caption for the responsive image.</figcaption></figure></body></html>
The alignment of the caption can be changed using the text utilities, such as .text-start, .text-center or .text-end.
Let us see an example for changing the alignment of caption
Example
You can edit and try running this code using the Edit & Run option.