![]() ![]() Header Secondary card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Primary card title Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Header Dark card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Light card title Some quick example text to build on the card title and make up the bulk of the card's content. ![]() Header Info card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Warning card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Danger card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Success card title Some quick example text to build on the card title and make up the bulk of the card's content. Depending on the image, you may or may not need additional styles or utilities. Turn an image into a card background and overlay your card’s text. Last updated 3 mins ago Card title This is a wider card with supporting text below as a natural lead-in to additional content. Last updated 3 mins ago Placeholder Image cap Card title This is a wider card with supporting text below as a natural lead-in to additional content. This is a wider card with supporting text below as a natural lead-in to additional content. Similar to headers and footers, cards can include top and bottom “image caps”-images at the top or bottom of a card. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card. Go somewhere ImagesĬards include a few options for working with images. Go somewhere Active Link Disabled Special title treatment With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. Go somewhere NavigationĪdd some navigation to a card’s header (or block) with Bootstrap’s nav components. Go somewhere Special title treatment With supporting text below as a natural lead-in to additional content. ![]() This is easily customized with our various sizing options. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. They have no margin by default, so use spacing utilities as needed.īelow is an example of a basic card with mixed content and a fixed width. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. ExampleĬards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Similar functionality to those components is available as modifier classes for cards. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. AboutĪ card is a flexible and extensible content container. Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. ![]()
0 Comments
Leave a Reply. |