Scribd
Upload
63 views40 pages

Bootstrap Card

Uploaded by

Surya Sarangi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
63 views40 pages

Bootstrap Card

Uploaded by

Surya Sarangi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 40
12720128, 9:53AM Cards «Bootstrap v5.3 View on GitHub Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. : Vultr saves developers time and money sy depioy cloud with advanced networking features Perr and a one-click marketplace. bers FOIE ads via Carbon ASE On this page © About A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. f you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. Example Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no nargin by default, so use spacing utilities as needed. Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various sizing options. hitps:igetoootstrap.comidoes/5.tcomponentsicard! 140 12129123, 9:53AM Cards «Bootstrap v5.3 are eneyy Card title Some quick example text to build on the card title and make up the bulk of the card's content. HTML. 40
card" style="width: 18rem;"> " class="card-img-top" alt=". “card-body"> ‘card-title"»Card title “card-text">Some quick example text to build on the card title and make up th class="btn btn-primary">Go somewhere Content types Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported. Body The building block of a card is the .card-body. Use it whenever you need a padded section wi acard. hnps:iigetooostrap.comidoes'5.tcomponentsicard) 2140 ‘2720128, 9:53AM Cards «Bootstrap v5.3 This is some text within a card body. HTML 40
“card-body"> This is some text within a card body.
Titles, text, and links Card titles are used by adding .card-title to a tag. Subtitles are used by adding a .card-subtitle to a tag, If the .card-title and the .card- subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely. Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. Card link Another link HTML, 46
card-subtitle mb-2 text-body-secondary">Card subtitle “card-text">Some quick example text to build on the card title and make up th ard-link">Card Link class="card-Link">Another Link clas: hitps:igetoootstrap.comidoes/5.tcomponentsicard! 3140 12129123, 9:53AM Cards - Bootstrap v5.9
Images -card-ing-top places an image to the top of the card, With .card-text, text can be added to the card, Text within .card-text can also be styled with the standard HTML tags. Tarereeys Some quick example text to build on the card title and make up the bulk of the card's content. HTML 40
LL > card” style="width: 18ren;"> " class="card-img-top" alt=" “card-body"> “card-text">Some quick exanple text to build on the card title and make up th List groups Create lists of content in a card with a flush list group. An item Asecond item hntps:iigetooostrap.comidoes'5.tcomponentsicard) 490 12129123, 9:53AM Cards «Bootstrap v5.3 A third item HTML " style="width: 18rem
    List-group-item">An item
"List-group-item">A second item List-group-item">A third item Featured An item Asecond item A third item HTML
  • An item
  • A second item
  • A third item
An item Asecond item Atl item hntps:iigetooostrap.comidoes'5.icomponentsicard) 540 12129123, 9:53AM Cards «Bootstrap v5.3 Card footer HTML
  • An item
    • “List-group-item">A second item List-group-item">A third itemc/li> “card-footer"> Card footer
Kitchen sink Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. Tere Card title Some quick example text to build ‘on the card title and make up the bulk of the card's content. An item Asecond item hnps:iigetooostrap.comidoes'5.tcomponentsicard) 640 ‘2720128, 9:53AM Cards «Bootstrap v5.3 A third item Card link Another link HTML, 40 width: 18rem;"> "card-img-top" al

Some quick example text to build on the card title and make up th

  • A second item A third item
Card Link Another Link
Header and footer Add an optional header and/or footer within a card. Featured Special title treatment With supporting text below as a natural lead-in to additional content. HTML, 4-0 hitps:igetoootstrap.comidoes/5.tcomponentsicard! 740 12720128, 9:53AM Cards «Bootstrap v5.3
Featured

With supporting text below as a natural lead-in to additional con Go somewhere

Card headers can be styled by adding .card-header to elements. Featured Special title treatment With supporting text below as a natural lead-in to additional content. HTML 40
Featured
“card-title">Special title treatment

wWith supporting text below as 2 natural lead-in to additional con class="btn btn-primary">Go somewhere card">

Quote A well-known quote, contained in a blockquote element. hitps:igetoootstrap.comidoes/5.Stcomponentsicard) aio ‘2720128, 9:53AM Cards «Bootstrap v5.3 — Someone famous in Source Title HTML, 40
quote

A well-known quote, contained in a blockquote element.

‘Source Title" >Sourc Featured Special title treatment With supporting text below as a natural lead-in to additional content. 2 days ago HTML. 46
Featured
Special title treatment ard-text">With supporting text below as a natural lead-in to additional con class="btn btn-primary">Go somewhere

Sizing Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. Using grid markup es ere grrtnerrep carers nerteenireeritnrerrs aattreter Special title treatment Special title treatment With supporting text below as a natural With supporting text below as a natural lead-in to additional content. lead-in to additional content. HTML #0
Special title treatment

With supporting text below as a natural lead-in to additional Go somewhere

ard-body"> ch class="card-title">Special title treatment

With supporting text below as a natural lead-in to additional Go somewhere

Using utilities Use our handful of available sizing utilities to quickly set a card's width. Card title With supporting text below as a natural lead-in to additional content. Card title With supporting text below as a natural lead- D in to additional content. HTML, 40

With supporting text below as 2 natural lead-in to additional con Button

card-title">Card title “card-text">With supporting text below as a natural lead-in to additional con stn. btn-primary">Button hitps:igetoootstrap.comidoes/5.tcomponentsicard! 140 12720128, 9:53AM Cards «Bootstrap v5.3
Using custom CSS Use custom CSS in your stylesheets or as inline styles to set a width Special title treatment With supporting text below as a natural lead-in to additional content. HTML 46
Special title treatment

wWith supporting text below as a natural lead-in to additional con stn btn-primary">Go somewhere clas:

Text alignment You can quickly change the text alignment of any card text align classes. n its entirety or specific parts—with our Special title treatment With supporting text below as a natural lead-in to additional content, nitpszlgetbootstrap.com/ocs!5.3fcomponentsicaral rao ‘2720128, 9:53AM Cards «Bootstrap v5.3 Special title treatment With supporting text below as a natural lead-in to additional content. Special title treatment With supporting text below as a natural lead-in to additional content. HTML, 46
With supporting text below as 2 natural lead-in to additional con width: 18rem;"> Go somewhere
card-title">Special title treatment

with supporting text below as a natural lead-in to additional con stn btn-primary">Go somewhere

hntps:igetooostrap.comidocs'5tcomponentsicard) 1340 12720128, 9:53AM Cards «Bootstrap v5.3

with supporting text below as a natural lead-in to additional con class="btn btn-primary">Go sonewhere

Navigation ‘Add some navigation to a card’s header (or block) with Bootstrap’s nav components. Active Link Disablec Special title treatment With supporting text below as a natural lead-in to additional content. HTML. 46 Active Link Disabled Special title treatment With supporting text below as a natural lead-in to additional content. HTML, 40 ‘card text-center">
nav nav-pills card-header-pills">
jav-link active" href= Link
  • Disabled
    • Special title treatment “card-text">With supporting text below as a natural lead-in to additional con class="btn btn-primary">Go somewhere

    Images hntps:igetooostrap.comidocs'5tcomponentsicard) 1540 ‘209,953 0M Cords Bootstrap v5.3 Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card Image caps Similar to headers and footers, cards can include top and bottom “image caps"—images at the top or bottom of a card. Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago Treeessy HTML. 40 hntps:igetooostrap.comidocs'5tcomponentsicard) 640 12129123, 9:53AM Cards «Bootstrap v5.3 « card-ing-top” all
    ‘card-title">Card title

    This is a wider card with supporting text below as a natural lead

    < class="text-body-secondary">Last updated 3 mins ago

    Card title

    This is a wider card with supporting text below as a natural lead

    < class="text-body-secondary">Last updated 3 mins ago class="card-img-botton" alt: Image overlays Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities. (GFT Minar-lel HTML 40 < card text-bg-dark"> class="card-img" alt: hntps:igetooostrap.comidocs'5tcomponentsicard) 740 ‘120723, 953 0M Cords Bootstrap v5.3

    Card title

    This is a wider card with supporting text below as a natural lead

    Last updated 3 mins ago

    Il than the image the content will be displayed outside the image. Horizontal Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .¢-0 and use .col-nd- * classes to make the card horizontal at the nd breakpoint. Further adjustments may be needed depending on your card content. Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago HTML, 40 hntps:igetooostrap.comidocs'5tcomponentsicard) 1840 12720128, 9:53AM Cards «Bootstrap v5.3
    Card title

    This is a wider card with supporting text below as a natural

    Last updated 3 mins ago

    Card styles Cards include various options for customizing their backgrounds, borders, and color. Background and color Added in v5.2.0 Set a background-color with contrasting foreground color with our text. color) helpers. Previously it was required to manually pair your choice of . for styling, which you still may use if you prefer. color} and .bg-(coler} utilities Header Primary card title Some quick example text to build on the card title and make up the bulk of the card's content Header Secondary card title hitossgetocosrapcomocs.5.icomponeniscard seo 12720128, 9:59AM Cards «Bootstrap v5.3 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 Info 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 nitpszlgetbootstrap.com/ocs!5.3fcomponentsicaral 20140 ‘20, 9534 Cords Bootstrap v5.3 Some quick example text to build on the card title and make up the bulk of the card's content. Dark card title Some quick example text to build on the card title and make up the bulk of the card's content. HTML 40
    ard-body"> card-title">Primary card title ard-text">Some quick exanple text to build on the card title and make up th ‘card text-bg-secondary mb-3" styl ard-header" sHeader
    ard-body"> ‘card-title">Secondary card title : 18rem;

    Some quick example text to build on the card title and make up th

    sHeader
    ard-body"> card-title">Success card title ard-text">Some quick example text to build on the card title and make up th ‘card text-bg-danger mb-3" style="nax-widtl ard-header" sHeader
    2 18rem;"> ard-body"> card-title">Danger card title

    Some quick example text to build on the card title and make up th

    hntps:igetooostrap.comidocs'5tcomponentsicard) 2140 12129123, 9:53AM Cards - Bootstrap v5.9 “card text-bg-warning mb-3" style="max-width: 18rem
    Warning card title

    Some quick exanple text to build on the card title and make up th

    Info card title

    Some quick example text to build on the card title and make up th

    Light card title

    Some quick example text to build on the card title and make up th

    Some quick example text to build on the card title and make up th

    "card-header">Header Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g, the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the svisually-hidden class. Border Use border utilities to change just the border-color of a card. Note that you can put .text- {color} classes on the parent . card or a subset of the card's contents as shown below. [ | hntps:iigetooostrap.comidocs'5tcomponentsicard) 2240 ‘2720128, 9:59AM Header Primary card title Some quick example text to build on the card title and make up the bulk of the card's content. 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 Success 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 Warning card title Some quick example text to build on the card title and make up the bulk of the card's content. hitps:iigetoootstrap.comidoes/5.tcomponentsicard) Cards - Bootstrap v5.3 2ai40 ‘2720128, 9:53AM Cards «Bootstrap v5.3 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 Light card title 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. HTML, 40 max-width: 18rem;">
    Header

    Some quick example text to build on the card title and make up th

    Header

    Some quick example text to build on the card title and make up th

    hitps:igetoootstrap.comidoes/5.tcomponentsicard! 2040 12129123, 9:53AM Cards «Bootstrap v5.3
    Success card title

    Some quick exanple text to build on the card title and make up th

    ard-text">Some quick example text to build on the card title and make up th
    ard-body"> card-title* Warning card title ard-text">Some quick exanple text to build on the card title and make up th 18rem;">
    ard-body"> card-title">Info card title ard-text">Some quick example text to build on the card title and make up th 18rem;">
    Some quick example text to build on the card title and make up th
    ard-body">

    Some quick example text to build on the card title and make up th

    Mixins utilities hntps:igetooostrap.comidocs'5tcomponentsicard) 2540 1272073, 9:53AM (Cards «Bootstrap v5.3 You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent. Header Success card title Some quick example text to build on the card title and make up the bulk of the card's content. Footer HTML 4-0
    Header
    max-width: 18rem;">

    Some quick example text to build on the card title and make up th

    Footer
    Card layout In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive. Card groups Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. hitps:igetoootstrap.comidoes/5.Stcomponentsicard) 240 12720/23, 9:59 AM Cards «Bootstrap v5.3 Tact Card title This is a wider card with supporting text below as a natural lead-in to additional Card title This card has supporting text below as a natural lead- in to additional content. content. This content is a litte bit longer. Last updated 3 mins age Last updated 3 mins ago HTML
    Card title This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. Last updated 3 mins ago ard-text">This is a wider card with supporting text below as a natural le
    <div Card title

    Last updated 3 mins ago

    " class="card-img-top" alt="..."> ard-body"> card-title"»Card title “card-text">This card has supporting text below as a natural lead-in to add

    Last updated 3 mins ago

    ...
    Card title hntps:igetooostrap.comidocs'5tcomponentsicard) 27140 12720123, 9:59 AM

    Last updated 3 mins ago

    When using card groups with footers, their content will automatically line up. Tar et) This is a wider card with supporting text below as a natural lead-in to additional content, This content is a little bit longer. Last updated 3 mins ago HTML
    TareeCard title Eke Card This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. itle Last updated 3 mins ago

    This is a wider card with supporting text below as a natural le

    hntps:igetooostrap.comidocs'5tcomponentsicard) “card-footer"> ‘text-body-secondary">Last updated 3 mins ago 2240 12720723, 9:53 0M (Cards - Bootstrap v5 3 “card"> " class="card-img-top" alt="..."> ‘ard-body"> card-title">Card title

    This card has supporting text below as a natural lead-in to add

    Last updated 3 mins ago
    " class="card-ing-top” alt="...">
    Card title

    This is a wider card with supporting text below as 2 natural le

    «small class="text-body-secondary">Last updated 3 mins ago
    Grid cards Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here's .row-cols-1 laying out the cards on one column, and .row-cols-nd-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up. oes tey This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. hntps:igetooostrap.comidoes'5.tcomponentsicard) 2a140 12129123, 9:53AM Cards «Bootstrap v5.3 Treaesy Card title This is a longer card with supporting text below as a natural lead- content is a little bit longer. to additional content. This oe tey Card title This is a longer card with supporting text below as a natural lead-in to additional content. ety Card title This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. HTML, 40
    hntps:igetooostrap.comidocs'5tcomponentsicard) 3040 12129123, 9:53AM Cards - Bootstrap v5.9

    This is a longer card with supporting text below as a natural

    Card title

    This is 2 longer card with supporting text below as a natural

    -ard-img-top" all
    ... <div class= ‘card-title">Card title

    This is a longer card with supporting text below as a natural

    card"> Card title card-text">This is a longer card with supporting text below as a natural

    This is a longer card with supporting text below as a natural

    Card title

    This is 2 longer card with supporting text below as a natural

    card-text">This is 2 longer card with supporting text below as a natural

    When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass, hntps:igetooostrap.comidoes'5.tcomponentsicard) 3040 12129123, 9:53AM Cards «Bootstrap v5.3 ereaesy Card title This is a longer card with supporting text below as a natural lead- content is a little bit longer. to additional content. This Toe tey Card title This is a short card. Card title This is a longer card with supporting text below as a natural lead-in to additional content. etl Card title hntps:igetooostrap.comidoes'5.tcomponentsicard) 3440 1272973, 959M (Cards «Bootstrap v5.3 This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. HTML. 40

    ‘card-img-top" alt ‘card-body card-title">Card title ‘card-text">This is @ longer card with supporting text below as a natural
    card h-100">
    Card title

    This is a wider card with supporting text below as a natural

    Last updated 3 mins ago
    Card title

    This card has supporting text below as a natural lead-in to a

    Last updated 3 mins ago
    ‘card-footer"> Card title

    This is a wider card with supporting text below as a natural

    Last updated 3 mins ago
    hntps:igetooostrap.comidocs'5tcomponentsicard) 37140 12720128, 9:53AM Cards «Bootstrap v5.3 Masonry In va we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we've made a demo example to help you get started. css Variables | Added in v5.2.0 | As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on .card for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass. customization is still supported, too. scss/_card.scss --#{$prefix}card-spacer-y: #($card-spacer-y};, #{$prefix}card-spacer-x: #($card-spacer-x}; ‘#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; --#(S$prefix}card-title-color: #{$card-title-color}; #{$prefix}card-subtitle-color: #{$card-subtitle-color}; #{$prefix}card-border-width: #($card-border-width}; --#{$prefix}card-border-color: #($card-border-color}; #{$prefix}card-border-radius: #{Scard-border-radius}; #{$prefix}card-box-shadow: #{$card-box-shadow}; #{$prefix}card-inner-border-radius: #{$card-inner-border-radius}; #{$prefix}card-cap-padding-y: #{$card-cap-padding-y}; #{$prefix}card-cap-padding-x: #{Scard-cap-padding-x}; #({$prefix}card-cap-bg: #{$card-cap-bg}} #($prefix}card-cap-color: #{$card-cap-color}; --#{$prefix}card-height: #{$card-height}; #{$prefix}card-color: #{$card-color}; #{$prefix}card-bg: #{$card-bg}; hntps:igetooostrap.comidocs'5tcomponentsicard) e140 12720128, 9:53AM Sass variables scss/_variables.scss $card-spacer-y: $card-spacer-x: $card-title-spacer-y: $card-title-color: $card-subtitle-color: $card-border-width: $card-border-color: $card-border-radius: $card-box-shadow: $card-inner-border-radius: $card-cap-padding-y: $card-cap-padding-x: $card-cap-bg: $card-cap-color: $card-height: $card-color: Scard-be: $card-img-overlay-padding: $card-group-margil @ Bootstrap Cards - Bootstrap v5.3 {$prefix}card-img-overlay-padding: #{$card-img-overlay-padding}; #{$prefix}card-group-margin: #($card-group-margin}; $spacer} $spacers $spacer * . null null var (--#{$prefix}border-width) ; var (--#{$prefix}border-color-translucent) var (--#{$prefix}border-radius); nulls subtract ($card-border-radius, $card-border-width) $card-spacer-y * .5; $card-spacer-x; gba (var(--#{$prefix}body-color-rgb), .03); nulls nulls nulls var (--#{$prefix}body-bg) $spacer} $grid-gutter-width * .5; Designed and built with all the love in the world by the Bootstrap team with the help of our contributors, Code licensed MIT, docs CC BY 3.0, Currently v5.3.2 Links Home hitps:igetoootstrap.comidoes/5.tcomponentsicard! Guides Getting started 30140 12720128, 9:53AM Docs Examples Icons Themes Blog Swag Store Projects Bootstrap 5 Bootstrap 4 Icons RFS Examples repo hitps:igetoootstrap.comidoes/5.tcomponentsicard! Cards - Bootstrap v5.3 Starter template Webpack Parcel Vite Community Issues. Discussions Corporate sponsors Open Collective Stack Overflow 40140

    You might also like