Cards - React-Bootstrap

A can be styled by passing a heading element through the prop ... Similar to headers and footers, cards can include top and bottom “image ... MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutCardsBootstrap’scardsprovideaflexibleandextensiblecontentcontainerwithmultiplevariantsandoptions.BasicExample# CardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulkof thecard'scontent. Gosomewhere CardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.GosomewhereCopyContenttypes#Body#Usetopadcontentinsidea. Thisissometextwithinacardbody. Thisissometextwithinacardbody.CopyAlternatively,youcanusethisshorthandversionforCardswithbody only,andnootherchildrenThisissometextwithinacardbody.Thisissometextwithinacardbody.CopyTitle,text,andlinks#Using,,and insidethewilllinethemupnicely. sareusedtolineuplinksnexttoeachother.outputs

tagsaroundthecontent,soyoucan usemultiplestocreateseparateparagraphs. CardTitle CardSubtitle

CardTitleCardSubtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.CardLinkAnotherLinkCopyListGroups#Createlistsofcontentinacardwithaflushlistgroup. Crasjustoodio Dapibusacfacilisisin Vestibulumateros CrasjustoodioDapibusacfacilisisinVestibulumaterosCopy Featured Crasjustoodio Dapibusacfacilisisin Vestibulumateros FeaturedCrasjustoodioDapibusacfacilisisinVestibulumaterosCopyKitchenSink# CardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulkof thecard'scontent. Crasjustoodio Dapibusacfacilisisin Vestibulumateros CardLink AnotherLink CardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.CrasjustoodioDapibusacfacilisisinVestibulumaterosCardLinkAnotherLinkCopyHeaderandFooter#Youmayaddaheaderbyaddingacomponent. Featured Specialtitletreatment Withsupportingtextbelowasanaturallead-intoadditionalcontent. Gosomewhere FeaturedSpecialtitletreatmentWithsupportingtextbelowasanaturallead-intoadditionalcontent.GosomewhereCopyAcanbestyledbypassingaheadingelement throughtheprop Featured Specialtitletreatment Withsupportingtextbelowasanaturallead-intoadditionalcontent. Gosomewhere FeaturedSpecialtitletreatmentWithsupportingtextbelowasanaturallead-intoadditionalcontent.GosomewhereCopy Quote

{''} Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuere erataante.{''}

SomeonefamousinSourceTitle Quote

{''}Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.{''}

SomeonefamousinSourceTitleCopy Featured Specialtitletreatment Withsupportingtextbelowasanaturallead-intoadditionalcontent. Gosomewhere 2daysago FeaturedSpecialtitletreatmentWithsupportingtextbelowasanaturallead-intoadditionalcontent.Gosomewhere2daysagoCopyImages#Cardsincludeafewoptionsforworkingwithimages.Choosefrom appending“imagecaps”ateitherendofacard,overlayingimageswith cardcontent,orsimplyembeddingtheimageinacard.Imagecaps#Similartoheadersandfooters,cardscanincludetopandbottom“image caps”—imagesatthetoporbottomofacard.<> Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent. ><>Somequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
Somequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.>CopyImageOverlays#Turnanimageintoacardbackgroundandoverlayyourcard’stext. Dependingontheimage,youmayormaynotneedadditionalstylesor utilities. Cardtitle Thisisawidercardwithsupportingtextbelowasanaturallead-into additionalcontent.Thiscontentisalittlebitlonger. Lastupdated3minsago CardtitleThisisawidercardwithsupportingtextbelowasanaturallead-intoadditionalcontent.Thiscontentisalittlebitlonger.Lastupdated3minsagoCopyNavigation#Addsomenavigationtoacard’sheader(orblock)withReactBootstrap’s Navcomponents. Active Link Disabled Specialtitletreatment Withsupportingtextbelowasanaturallead-intoadditionalcontent. Gosomewhere ActiveLinkDisabledSpecialtitletreatmentWithsupportingtextbelowasanaturallead-intoadditionalcontent.GosomewhereCopy Active Link Disabled Specialtitletreatment Withsupportingtextbelowasanaturallead-intoadditionalcontent. Gosomewhere ActiveLinkDisabledSpecialtitletreatmentWithsupportingtextbelowasanaturallead-intoadditionalcontent.GosomewhereCopyCardStyles#BackgroundColor#Youcanchangeacard'sappearancebychangingtheir,andprops.[ 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark', ].map((variant,idx)=>( Header {variant}CardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent. ));['Primary','Secondary','Success','Danger','Warning','Info','Light','Dark',].map((variant,idx)=>(Header{variant}CardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.));CopyBorderColor#<> Header PrimaryCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header SecondaryCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header SuccessCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header DangerCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header WarningCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header InfoCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header DarkCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
Header LightCardTitle Somequickexampletexttobuildonthecardtitleandmakeupthebulk ofthecard'scontent.
><>HeaderPrimaryCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderSecondaryCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderSuccessCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderDangerCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderWarningCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderInfoCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderDarkCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
HeaderLightCardTitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.
>CopyCardlayout#CardGroups# Cardtitle Thisisawidercardwithsupportingtextbelowasanaturallead-into additionalcontent.Thiscontentisalittlebitlonger. Lastupdated3minsago Cardtitle Thiscardhassupportingtextbelowasanaturallead-intoadditional content.{''} Lastupdated3minsago Cardtitle Thisisawidercardwithsupportingtextbelowasanaturallead-into additionalcontent.Thiscardhasevenlongercontentthanthefirstto showthatequalheightaction. Lastupdated3minsago CardtitleThisisawidercardwithsupportingtextbelowasanaturallead-intoadditionalcontent.Thiscontentisalittlebitlonger.Lastupdated3minsagoCardtitleThiscardhassupportingtextbelowasanaturallead-intoadditionalcontent.{''}Lastupdated3minsagoCardtitleThisisawidercardwithsupportingtextbelowasanaturallead-intoadditionalcontent.Thiscardhasevenlongercontentthanthefirsttoshowthatequalheightaction.Lastupdated3minsagoCopyGridcards#UseRow'sgridcolumnpropstocontrolhowmanycardstoshowperrow. {Array.from({length:4}).map((_,idx)=>( Cardtitle Thisisalongercardwithsupportingtextbelowasanatural lead-intoadditionalcontent.Thiscontentisalittlebitlonger. ))} {Array.from({length:4}).map((_,idx)=>( CardtitleThisisalongercardwithsupportingtextbelowasanaturallead-intoadditionalcontent.Thiscontentisalittlebitlonger.))}CopyAPI#Card#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bg'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light'SetscardbackgroundbodybooleanfalseWhenthispropisset,itcreatesaCardwithaCard.Bodyinside passingthechildrendirectlytoitborder'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light'Setscardbordercolortext'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light'|'white'|'muted'SetscardtextcolorbsPrefixstring'card'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Body#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-body'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Footer#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-footer'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Header#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bsPrefixstring'card-header'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Img#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementTypeYoucanuseacustomelementtypeforthiscomponent.variant'top'|'bottom'Definesimagepositioninside thecard.bsPrefixstring'card-img'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.ImgOverlay#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-img-overlay'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Link#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementTypeYoucanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-link'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Subtitle#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementTypeYoucanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-subtitle'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Text#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-text'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Card.Title#viewsourcefileimportCardfrom'react-bootstrap/Card'CopyimportcodefortheCardcomponentNameTypeDefaultDescriptionaselementTypeYoucanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-title'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.CardGroup#viewsourcefileimportCardGroupfrom'react-bootstrap/CardGroup'CopyimportcodefortheCardGroupcomponentNameTypeDefaultDescriptionaselementType

Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'card-group'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.