Rows and Columns
[card]
[card-header class="lead"]3 same size columns on medium and larger screens[/card-header]
[card-body class="p4"]
[row]
[column md="4" class="bg-info"]
Column 1 (33%)
[lorem-ipsum]
[/column]
[column md="4" class="bg-success"]
Column 2 (33%)
[lorem-ipsum/]
[/column]
[column md="4" class="bg-danger"]
Column 3 (33%)
[lorem-ipsum/]
[/column]
[/row]
[/card-body]
[card-footer]Narrow your browser window to see the columns stack. [/card-footer]
[/card]
[card]
[card-header class="lead"]3 columns[/card-header]
[card-body class="p4"]
[row]
[column xs="3" class="bg-info"]
Column 1 (25%)[lorem-ipsum/]
[/column]
[column xs="6" class="bg-success"]
Column 2 (50%)[lorem-ipsum sentences="2"/]
[/column]
[column xs="3" class="bg-danger"]
Column 3 (25%)[lorem-ipsum/]
[/column]
[/row]
[/card-body]
[card-footer]These columns will not stack when you narrow your browser window. [/card-footer]
[/card]
[card]
[card-header class="lead"]2 columns with an offset in between[/card-header]
[card-body class="p4"]
[row]
[column xs="3" class="bg-info"]
Column 1 (25%)[lorem-ipsum/]
[/column]
[column xs="6" offset-xs="3" class="bg-danger"]
Column 2 (50%)[lorem-ipsum/]
[/column]
[/row]
[/card-body]
[card-footer]These columns will not stack when you narrow your browser window. [/card-footer]
[/card]
[card]
[card-header class="lead"]Nested Rows and Columns[/card-header]
[card-body class="p4"]
[row-outer]
[column-outer xs="3" class="bg-info text-center"]
Col 1
[row]
[column xs="6"]Col 1.1[/column]
[column xs="6"]Col 1.2[/column]
[/row]
[/column-outer]
[column-outer xs="6" class="bg-success text-center"]
Col 2
[row]
[column xs="6"]Col 2.1[/column]
[column xs="6"]Col 2.2[/column]
[/row]
[/column-outer]
[column-outer xs="3" class="bg-danger text-center"]
Col 3
[row]
[column xs="6"]Col 3.1[/column]
[column xs="6"]Col 3.2[/column]
[/row]
[/column-outer]
[/row-outer]
[/card-body]
[card-footer]These columns will not stack when you narrow your browser window. [/card-footer]
[/card]
Responsive Embed
[card]
[card-header class="lead"]Embedded Video[/card-header]
[card-body class="p4"]
[embed-responsive ratio="16by9"]
No real video
[/embed-responsive]
[/card-body]
[card-footer]Narrow your browser window to see the video size adjust. [/card-footer]
[/card]
Responsive Utilities
[card]
[card-header class="lead"]Show text depending on screen size[/card-header]
[card-body class="p4"]
[card-title]Sample 1: This text disappears on small and extra small screens.[/card-title]
[responsive block="md" hidden="xs"]
[lorem-ipsum class="bg-success"/]
[/responsive]
[card-title]Sample 2: This text will not be shown on large and extra large screens.[/card-title]
[responsive block="xs" hidden="lg"]
[lorem-ipsum class="bg-info"/]
[/responsive]
[/card-body]
[card-footer]Narrow and widen your browser window to see the effect. [/card-footer]
[/card]
Cards
[card-outer]
[card-header class="lead"]Simple card with a body element[/card-header]
[card-body-outer class="p4"]
[card]
[card-body]
[list-group flush]
[list-group-item]Cras justo odio[/list-group-item]
[list-group-item]Dapibus ac facilisis in[/list-group-item]
[list-group-item]Vestibulum at eros[/list-group-item]
[/list-group]
[/card-body]
[/card]
[/card-body-outer]
[card-footer]List group is flush with the card[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Kitchen Sink[/card-header]
[card-body-outer class="p4"]
[card class="w-50"]
[card-img top]
[img responsive][img-gen size="200" text="Card Image Top"][/img]
[/card-img]
[card-body]
[card-title]Card Title[/card-title]
Some quick example text to build on the card title and make up the bulk of the card's content.
[/card-body]
[list-group flush]
[list-group-item]Cras justo odio[/list-group-item]
[list-group-item]Dapibus ac facilisis in[/list-group-item]
[list-group-item]Vestibulum at eros[/list-group-item]
[/list-group]
[card-body]
Lorem Ipsup Dolor Sit
[/card-body]
[/card]
[/card-body-outer]
[card-footer]List group is flush with the card. Links in footer are next to each other.[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Simple card with image cap[/card-header]
[card-body-outer class="p4"]
[card class="w-25"]
[card-img top]
[img responsive][img-gen bg="f00" text="Sample Image"][/img]
[/card-img]
[card-body]
[card-title]Card Title[/card-title]
Lorem ipsum dolor sit.
[/card-body]
[/card]
[/card-body-outer]
[card-footer]Image caps are supported with the [[card-img]] shortcode and the top or bottom flag.[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Simple card with image overlay[/card-header]
[card-body-outer class="p4"]
[card class="w-25"]
[card-img]
[img responsive][img-gen bg="f00" text=" "][/img]
[/card-img]
[card-img-overlay]
[card-title]Card Title[/card-title]
Lorem ipsum dolor sit.
[/card-img-overlay]
[/card]
[/card-body-outer]
[card-footer]Image overlay cards are supported with the [[card-img-overlay]] shortcode.[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Card with header and footer[/card-header]
[card-body-outer class="p4"]
[card class="w-25"]
[card-header]Example Header[/card-header]
[card-body]
[card-title]Card Title[/card-title]
Lorem ipsum dolor sit.
[/card-body]
[card-footer]Example footer.[/card-footer]
[/card]
[/card-body-outer]
[card-footer]Card header and card footers are supported with the [[card-header]] and [[card-footer]] shortcodes.[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Card group[/card-header]
[card-body-outer class="p4"]
[card-group]
[card class="bg-info"]
[card-body]
[card-title]Card Title[/card-title]
Lorem ipsum dolor sit.
[/card-body]
[/card]
[card class="bg-success"]
[card-body]
[card-title]Card Title[/card-title]
Cras justo odio.
[/card-body]
[/card]
[card class="bg-danger"]
[card-body]
[card-title]Card Title[/card-title]
Dapibus ac facilisis in.
[/card-body]
[/card]
[/card-group]
[/card-body-outer]
[card-footer]Use card groups to render cards as a single, attached element with equal width and height columns.[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Card deck[/card-header]
[card-body-outer class="p4"]
[card-deck]
[card class="bg-info"]
[card-body]
[card-title]Card Title[/card-title]
Lorem ipsum dolor sit.
[/card-body]
[/card]
[card class="bg-success"]
[card-body]
[card-title]Card Title[/card-title]
Cras justo odio.
[/card-body]
[/card]
[card class="bg-danger"]
[card-body]
[card-title]Card Title[/card-title]
Dapibus ac facilisis in.
[/card-body]
[/card]
[/card-deck]
[/card-body-outer]
[card-footer]Use a card deck for a set of equal width and height cards that aren’t attached to one another.[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Card columns[/card-header]
[card-body-outer class="p4"]
[card-columns]
[card class="bg-info"]
[card-body]
[card-title]Card Title[/card-title]
Lorem ipsum dolor sit.
[/card-body]
[/card]
[card]
[card-body class="bg-success"]
[card-title]Card Title[/card-title]
Cras justo odio.
[/card-body]
[/card]
[card class="bg-danger"]
[card-body]
[card-title]Card Title[/card-title]
Dapibus ac facilisis in.
[/card-body]
[/card]
[card class="bg-info"]
[card-body]
[card-title]Card Title[/card-title]
Euismod cubilia mattis sed habitasse.
[/card-body]
[/card]
[card]
[card-body class="bg-success"]
[card-title]Card Title[/card-title]
Arcu porta aptent lacus.
[/card-body]
[/card]
[card class="bg-danger"]
[card-body]
[card-title]Card Title[/card-title]
Quisque est eget.
[/card-body]
[/card]
[card class="bg-info"]
[card-body]
[card-title]Card Title[/card-title]
Imperdiet dapibus ridiculus.
[/card-body]
[/card]
[card]
[card-body class="bg-success"]
[card-title]Card Title[/card-title]
Eros mi mauris ultricies.
[/card-body]
[/card]
[card class="bg-danger"]
[card-body]
[card-title]Card Title[/card-title]
Nascetur commodo imperdiet.
[/card-body]
[/card]
[/card-columns]
[/card-body-outer]
[card-footer]Cards can be organized into Masonry-like columns with just CSS by wrapping them in [[card-columns]].[/card-footer]
[/card-outer]
[card-outer]
[card-header class="lead"]Cards with shadows[/card-header]
[card-body-outer class="p4"]
[card-deck]
[card class="w-25 shadow-none"]
[card-body]
[card-title]No Shadow[/card-title]
[lorem-ipsum]
[/card-body]
[/card]
[card class="w-25 shadow-sm"]
[card-body]
[card-title]Small Shadow[/card-title]
[lorem-ipsum]
[/card-body]
[/card]
[card class="w-25 shadow"]
[card-body]
[card-title]Regular Shadow[/card-title]
[lorem-ipsum]
[/card-body]
[/card]
[card class="w-25 shadow-lg"]
[card-title]Large Shadow[/card-title]
[card-body]
[card-title]Large Shadow[/card-title]
[lorem-ipsum]
[/card-body]
[/card]
[/card-deck]
[/card-body-outer]
[card-footer]Use the shadow utilities to add a shadow to the cards.[/card-footer]
[/card-outer]
Icons
[card-outer]
[card-header class="lead"]Free Icons[/card-header]
[card-body-outer class="p4"]
[list-group flush]
[list-group-item][icon prefix="fab" name="facebook"] Facebook[/list-group-item]
[list-group-item][icon name="arrow-left"] Arrow Lft[/list-group-item]
[list-group-item][icon name="arrow-right"] Arrow Right[/list-group-item]
[list-group-item][icon name="arrow-up"] Arrow Up[/list-group-item]
[list-group-item][icon name="arrow-down"] Arrow Down[/list-group-item]
[list-group-item][icon prefix="far" name="folder-open"] Folder Open[/list-group-item]
[list-group-item][icon prefix="fas" name="cloud"] Cloud[/list-group-item]
[list-group-item][icon prefix="fas" name="coffee"] Coffee[/list-group-item]
[list-group-item][icon prefix="fas" name="car"] Car[/list-group-item]
[list-group-item][icon prefix="fas" name="file"] File[/list-group-item]
[list-group-item][icon prefix="fas" name="bars"] Bars[/list-group-item]
[list-group-item][icon prefix="fas" name="thumbs-up"] Thumbs Up[/list-group-item]
[/list-group]
[/card-body-outer]
[card-footer]See the Font Awesome Gallery for more icons.[/card-footer]
[/card-outer]
[card]
[card-header class="lead"]Stacked Icons[/card-header]
[card-body class="p4"]
[icon-stack]
[icon name="camera" class="fa-stack-1x"]
[icon name="ban" class="fa-stack-2x text-danger"]
[/icon-stack]
[/card-body]
[card-footer]The second icon is bigger than the first.[/card-footer]
[/card]
Buttons
[card]
[card-header class="lead"]Standard buttons[/card-header]
[card-body class="p4"]
[button type="primary"]Primary[/button]
[button type="secondary"]Secondary[/button]
[button type="success"]Success[/button]
[button type="danger"]Danger[/button]
[button type="warning"]Warning[/button]
[button type="info"]Info[/button]
[button type="light"]Light[/button]
[button type="dark"]Dark[/button]
[button type="link"]Link[/button]
[button tag="a" link="https://wordpress.org/plugins/complete-bootstrap-4-shortcodes/" target="_blank"]Hyperlink[/button]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Outlined buttons[/card-header]
[card-body class="p4"]
[button type="primary" outline]Primary[/button]
[button type="secondary" outline]Secondary[/button]
[button type="success" outline]Success[/button]
[button type="danger" outline]Danger[/button]
[button type="warning" outline]Warning[/button]
[button type="info" outline]Info[/button]
[button type="light" outline]Light[/button]
[button type="dark" outline]Dark[/button]
[button type="link" outline]Link[/button]
[button outline tag="a" link="https://wordpress.org/plugins/complete-bootstrap-4-shortcodes/" target="_blank"]Hyperlink[/button]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Button size[/card-header]
[card-body class="p4"]
[button size="sm"]Small[/button]
[button size="md"]Medium[/button]
[button size="lg"]Large[/button]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Active buttons[/card-header]
[card-body class="p4"]
[button active]Button[/button]
[button type="link" active]Link[/button]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Disabled buttons[/card-header]
[card-body class="p4"]
[button disabled]Button[/button]
[button type="link" disabled]Link[/button]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Block level buttons[/card-header]
[card-body class="p4"]
[button block]Button 1[/button]
[button type="secondary" block]Button 2[/button]
[/card-body]
[card-footer][/card-footer]
[/card]
Button Groups
[card]
[card-header class="lead"]Basic example[/card-header]
[card-body class="p4"]
[button-group size="lg" justified]
[button] Left [/button]
[button] Middle [/button]
[button] Right [/button]
[/button-group]
[/card-body]
[card-footer]The large button group is justified and vertical. [/card-footer]
[/card]
[card]
[card-header class="lead"]Button Toolbar[/card-header]
[card-body class="p4"]
[button-toolbar]
[button-group class="mr-2"]
[button] Left 1 [/button]
[button] Middle 1 [/button]
[button] Right 1 [/button]
[/button-group]
[button-group class="mr-2"]
[button] Left 2 [/button]
[button] Middle 2 [/button]
[button] Right 2 [/button]
[/button-group]
[button-group]
[button] Single [/button]
[/button-group]
[/button-toolbar]
[/card-body]
[card-footer]Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.[/card-footer]
[/card]
Dropdowns
[card]
[card-header class="lead"]Single Button Dropdown[/card-header]
[card-body class="p4"]
[dropdown]
[button type="warning" dropdown] Action[/button]
[dropdown-menu]
[dropdown-header] Header[/dropdown-header]
[dropdown-item link="#"]Action[/dropdown-item]
[dropdown-item link="#"]Another action[/dropdown-item]
[dropdown-item link="#"]Something else here[/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"]Separated link[/dropdown-item]
[/dropdown-menu]
[/dropdown]
[/card-body]
[card-footer]Any single [button] or link can be turned into a dropdown toggle with some markup changes.[/card-footer]
[/card]
[card]
[card-header class="lead"]Split Button Dropdown[/card-header]
[card-body class="p4"]
[button-group]
[button type="danger"] Split Action[/button]
[button type="danger" dropdown split][/button]
[dropdown-menu]
[dropdown-item link="#"]Action[/dropdown-item]
[dropdown-item link="#"]Another action[/dropdown-item]
[dropdown-item link="#"]Something else here[/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"]Separated link[/dropdown-item]
[/dropdown-menu]
[/button-group]
[/card-body]
[card-footer]Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of split for proper spacing around the dropdown caret.[/card-footer]
[/card]
[card]
[card-header class="lead"]Drop Variations[/card-header]
[card-body class="p4"]
[button-group drop="up"]
[button] Drop Up [/button]
[button dropdown][/button]
[dropdown-menu]
[dropdown-item link="#"] Action 1 [/dropdown-item]
[dropdown-item link="#"] Action 2 [/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"] Separated Action [/dropdown-item]
[/dropdown-menu]
[/button-group]
[button-group drop="left"]
[button] Drop left [/button]
[button dropdown][/button]
[dropdown-menu]
[dropdown-item link="#"] Action 1 [/dropdown-item]
[dropdown-item link="#"] Action 2 [/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"] Separated Action [/dropdown-item]
[/dropdown-menu]
[/button-group]
[button-group drop="right"]
[button] Drop right [/button]
[button dropdown][/button]
[dropdown-menu]
[dropdown-item link="#"] Action 1 [/dropdown-item]
[dropdown-item link="#"] Action 2 [/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"] Separated Action [/dropdown-item]
[/dropdown-menu]
[/button-group]
[/card-body]
[card-footer]Use drop="up|left|right" to show the dropdown over, left or right to the button or link.[/card-footer]
[/card]
Navs
[card]
[card-header class="lead"]Simple Navigation Links[/card-header]
[card-body class="p4"]
[nav tabs]
[nav-item link="#"] Link1 [/nav-item]
[nav-item link="#"] Link2 [/nav-item]
[nav-item link="#"] Link3 [/nav-item]
[/nav]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Navigation Link and Dropdown with Pills[/card-header]
[card-body class="p4"]
[nav pills]
[nav-item link="#" active] Active [/nav-item]
[nav-item dropdown link="#"] Drop
[dropdown-menu]
[dropdown-item link="#"] Link1 [/dropdown-item]
[dropdown-item link="#"] Link2 [/dropdown-item]
[/dropdown-menu]
[/nav-item]
[nav-item link="#" disabled] Disabled [/nav-item]
[/nav]
[/card-body]
[card-footer]Note: The [dropdown-menu] has to be inside the [nav-item]. [/card-footer]
[/card]
[card]
[card-header class="lead"]Navigation Link and Dropdown with Tabs[/card-header]
[card-body class="p4"]
[nav tabs]
[nav-item link="#" active] Active [/nav-item]
[nav-item dropdown link="#"] Drop [dropdown-menu]
[dropdown-item link="#"] Link1 [/dropdown-item]
[dropdown-item link="#"] Link2 [/dropdown-item]
[/dropdown-menu]
[/nav-item]
[nav-item link="#" disabled] Disabled [/nav-item]
[/nav]
[/card-body]
[card-footer]Note: The [dropdown-menu] has to be inside the [nav-item]. [/card-footer]
[/card]
[card]
[card-header class="lead"]Collapsible Navigation Bar[/card-header]
[card-body class="p4"]
Light Color:
[navbar expand="md" class="navbar-light bg-light"]
[navbar-brand link="#"][img-gen type="circle" responsive size="150x50" text="Brand"][/navbar-brand]
[navbar-toggler]
[navbar-content]
[nav bar class="ml-auto"]
[nav-item link="#" active]Home[/nav-item]
[nav-item link="#"]Link[/nav-item]
[nav-item link="#"]Another Link[/nav-item]
[nav-item dropdown link="#"]Dropdown
[dropdown-menu]
[dropdown-header]Header[/dropdown-header]
[dropdown-item link="#"]Action[/dropdown-item]
[dropdown-item link="#"]Another action[/dropdown-item]
[dropdown-item link="#"]Something else here[/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"]Separated link[/dropdown-item]
[/dropdown-menu]
[/nav-item]
[nav-item link="#" disabled]Disabled[/nav-item]
[/nav]
[/navbar-content]
[/navbar]
Dark Color:
[navbar expand="md" class="navbar-dark bg-dark"]
[navbar-brand link="#"][img-gen type="circle" responsive size="150x50" text="Brand"][/navbar-brand]
[navbar-toggler]
[navbar-content]
[nav bar class="mr-auto"]
[nav-item link="#" active]Home[/nav-item]
[nav-item link="#"]Link[/nav-item]
[nav-item link="#"]Another Link[/nav-item]
[nav-item dropdown link="#"]Dropdown
[dropdown-menu]
[dropdown-header]Header[/dropdown-header]
[dropdown-item link="#"]Action[/dropdown-item]
[dropdown-item link="#"]Another action[/dropdown-item]
[dropdown-item link="#"]Something else here[/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"]Separated link[/dropdown-item]
[/dropdown-menu]
[/nav-item]
[nav-item link="#" disabled]Disabled[/nav-item]
[/nav]
[/navbar-content]
[/navbar]
[/card-body]
[card-footer]Narrow your browser window to see the menu bar collapse.[/card-footer]
[/card]
[card]
[card-header class="lead"]Vertical Navigation Bar[/card-header]
[card-body class="p4"]
[navbar class="navbar-light bg-light"]
[nav bar class="mr-auto"]
[nav-item link="#" active]Home[/nav-item]
[nav-item link="#"]Link[/nav-item]
[nav-item link="#"]Another Link[/nav-item]
[nav-item dropdown link="#"]Dropdown
[dropdown-menu]
[dropdown-header]Header[/dropdown-header]
[dropdown-item link="#"]Action[/dropdown-item]
[dropdown-item link="#"]Another action[/dropdown-item]
[dropdown-item link="#"]Something else here[/dropdown-item]
[dropdown-divider]
[dropdown-item link="#"]Separated link[/dropdown-item]
[/dropdown-menu]
[/nav-item]
[nav-item link="#" disabled]Disabled[/nav-item]
[/nav]
[/navbar]
[/card-body]
[card-footer]No Branding or toggler with the vertical navigation bar.[/card-footer]
[/card]
Breadcrumb
[card]
[card-header class="lead"]Breadcrumb style links[/card-header]
[card-body class="p4"]
[breadcrumb]
[breadcrumb-item link="#"] Pictures [/breadcrumb-item]
[breadcrumb-item link="#"] Vacation [/breadcrumb-item]
[breadcrumb-item link="#" active] 2020 [/breadcrumb-item]
[/breadcrumb]
[/card-body]
[card-footer]Use active for the currently active breadcrumb.[/card-footer]
[/card]
Badge
[card class="w-50"]
[card-header class="lead"]Badge styles[/card-header]
[card-body class="p4"]
New Messages[badge] 9 [/badge][br]
New Messages[badge class="bg-primary"] 9 [/badge][br]
New Messages[badge right] 9 [/badge]
[/card-body]
[card-footer]Use utility class to format the badge and right to float the badge to align to the right of its container.[/card-footer]
[/card]
Jumbotron
[card]
[card-header class="lead"]Normal Jumbotron[/card-header]
[card-body class="p4"]
[jumbotron]
Header Line
[lorem-ipsum]
[/jumbotron]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Fluid Jumbotron[/card-header]
[card-body class="p4"]
[jumbotron fluid]
Header Line
[lorem-ipsum]
[/jumbotron]
[/card-body]
[card-footer]The fluid jumbotron is still confined to its parent's container.[/card-footer]
[/card]
Alerts
[card]
[card-header class="lead"]Alerts[/card-header]
[card-body class="p4"]
[alert] Default [lorem-ipsum words="4" tag='span'] [/alert][alert type="primary"] Primary [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="secondary"] Secondary [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="success"] Success [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="info"] Info [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="warning"] Warning [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="danger"] Danger [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="dark"] Dark [lorem-ipsum words="4" tag='span'] [/alert]
[alert type="light"] Light [lorem-ipsum words="4" tag='span'] [/alert]
[/card-body]
[card-footer]Use the [code inline]alert-link[/code] class to quickly provide matching colored links within any alert. [/card-footer]
[/card]
[card]
[card-header class="lead"]Dismissible Alerts[/card-header]
[card-body class="p4"]
[alert dismissible type="primary"] Primary [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="secondary"] Secondary [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="success"] Success [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="info"] Info [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="warning"] Warning [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="danger"] Danger [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="dark"] Dark [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible type="light"] Light [lorem-ipsum words="4" tag='span'] [/alert]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Dismissible Alerts with Fade Effect[/card-header]
[card-body class="p4"]
[alert dismissible fade type="primary"] Primary [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="secondary"] Secondary [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="success"] Success [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="info"] Info [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="warning"] Warning [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="danger"] Danger [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="dark"] Dark [lorem-ipsum words="4" tag='span'] [/alert]
[alert dismissible fade type="light"] Light [lorem-ipsum words="4" tag='span'] [/alert]
[/card-body]
[card-footer][/card-footer]
[/card]
Progress Bar
[card]
[card-header class="lead"]Progress Bar Styles[/card-header]
[card-body class="p4"]
[card-header]Simple[/card-header]
[progress]
[progress-bar percent="50" title="Simple"]
[/progress]
[card-header]Striped[/card-header]
[progress]
[progress-bar striped percent="50" title="Striped"]
[/progress]
[card-header]Striped and Animated[/card-header]
[progress]
[progress-bar striped animated percent="50" title="Striped and Animated"]
[/progress]
[card-header]Stacked[/card-header]
[progress]
[progress-bar striped percent="50" title="Stacked 1"]
[progress-bar striped percent="25" type="success" title="Stacked 1"]
[progress-bar striped percent="5" type="danger" title="Stacked 1"]
[/progress]
[card-header]Stacked and Labeled[/card-header]
[progress]
[progress-bar label percent="50" title="Stacked and Labeled 1"]
[progress-bar label percent="25" type="success" title="Stacked and Labeled 1"]
[progress-bar label percent="5" type="danger" title="Stacked and Labeled 1"]
[/progress]
[/card-body]
[card-footer][/card-footer]
[/card]
Media Object
[card]
[card-header class="lead"]Top Aligned Media[/card-header]
[card-body class="p4"]
[media]
[media-object class="mr-3"]
[img responsive][img-gen size="150" text="Demo"][/img]
[/media-object]
[media-body]
Header
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Center Aligned[/card-header]
[card-body class="p4"]
[media]
[media-object align="center" class="mr-3"]
[img responsive][img-gen size="150" text="Demo"][/img]
[/media-object]
[media-body]
Header
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Bottom Aligned[/card-header]
[card-body class="p4"]
[media]
[media-object align="end" class="mr-3"]
[img responsive][img-gen size="150" text="Demo"][/img]
[/media-object]
[media-body]
Header
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Nested[/card-header]
[card-body class="p4"]
[media-outer]
[media-object class="mr-3"]
[img responsive][img-gen size="150" text="Demo"][/img]
[/media-object]
[media-body-outer]
Outer Header
[lorem-ipsum sentences="3"]
[media]
[media-object class="mr-3"]
[img responsive][img-gen size="150" text="Demo"][/img]
[/media-object]
[media-body]
Inner Header
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[/media-body-outer]
[/media-outer]
[/card-body]
[card-footer][/card-footer]
[/card]
List Groups
[card]
[card-header class="lead"]Basic List Group[/card-header]
[card-body class="p4"]
[list-group]
[list-group-item]
[lorem-ipsum]
[/list-group-item]
[list-group-item]
[lorem-ipsum]
[/list-group-item]
[list-group-item]
[lorem-ipsum]
[/list-group-item]
[/list-group]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Linked Items[/card-header]
[card-body class="p4"]
[list-group linked]
[list-group-item active]Active[/list-group-item]
[list-group-item disabled]Disabled[/list-group-item]
[list-group-item]Link 1[/list-group-item]
[list-group-item]Link 2[/list-group-item]
[/list-group]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Media List Group[/card-header]
[card-body class="p4"]
[list-group media]
[media list-group]
[media-object class="mr-3"]
[img responsive][img-gen size="150" text="Demo 1" bg="f00"][/img]
[/media-object]
[media-body]
Header 1
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[media list-group class="mt-4"]
[media-object class="mr-3"]
[img responsive][img-gen size="150" text="Demo 2" bg="0f0"][/img]
[/media-object]
[media-body]
Header 2
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[media list-group class="mt-4"]
[media-object class="mr-3"]
[img responsive][img-gen size="150" text="Demo 3" bg="00f"][/img]
[/media-object]
[media-body]
Header 3
[lorem-ipsum sentences="3"]
[/media-body]
[/media]
[/list-group]
[/card-body]
[card-footer]Use the [code inline]media[/code] flag at the [code inline][list-group][/code] tag and the [code inline]list-group[/code] flag at the [code inline][media][/code] tag.[/card-footer]
[/card]
Code
[card]
[card-header class="lead"]Code Snippet[/card-header]
[card-body class="p4"]
[code]<h4 id="-modal-footer-parameters">modal-footer parameters</h4>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Required</th>
<th>Values</th>
q<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>class</td>
<td>Any extra classes you want to add</td>
<td>optional</td>
<td>any text</td>
<td>none</td>
</tr>
<tr>
<td>data</td>
<td>Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at <a href="#container-parameters">container parameters</a>.</td>
<td>optional</td>
<td>any text</td>
<td>none</td>
</tr>
</tbody>
</table>
[/code]
[/card-body]
[card-footer]
[/card-footer]
[/card]
[card]
[card-header class="lead"]Scrollable Code Snippet[/card-header]
[card-body class="p4"]
[code scrollable]
<h4 id="-modal-footer-parameters">modal-footer parameters</h4>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Required</th>
<th>Values</th>
q<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>class</td>
<td>Any extra classes you want to add</td>
<td>optional</td>
<td>any text</td>
<td>none</td>
</tr>
<tr>
<td>data</td>
<td>Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at <a href="#container-parameters">container parameters</a>.</td>
<td>optional</td>
<td>any text</td>
<td>none</td>
</tr>
</tbody>
</table>
[/code]
[/card-body]
[card-footer][/card-footer]
[/card]
[card]
[card-header class="lead"]Inline Code[/card-header]
[card-body class="p4"]
Use the [code inline]media[/code] flag at the [code inline]list-group[/code] tag and the [code inline]listgroup[/code] flag at the [code inline]media[/code] tag.
[/card-body]
[card-footer][/card-footer]
[/card]
Tables
[table-wrap responsive bordered striped class="xxx yyy zzz"]
| Header 1 |
Header 2 |
Header 3 |
| A |
1 |
5% |
| B |
2 |
10% |
| C |
3 |
15% |
| D |
4 |
20% |
| E |
5 |
25% |
| F |
6 |
30% |
| G |
7 |
35% |
| H |
8 |
40% |
| I |
9 |
45% |
| J |
10 |
50% |
| K |
11 |
55% |
| Total |
[/table-wrap]
Images
[card]
[card-header class="lead"]Images[/card-header]
[card-body class="p4"]
[img-gen size="200" file="jpg" bg="C00" color="ff0" text="Normal"]
[img responsive][img-gen size="200" file="jpg" bg="C00" color="ff0" text="Responsive"][/img]
[/card-body]
[card-footer] Some bootstrap themes already have their [[img]] tag set to [code inline]responsive[/code]. [/card-footer]
[/card]
[card]
[card-header class="lead"]Image Borders and Thumbnails[/card-header]
[card-body class="p4"]
[img responsive thumbnail class="mr-3"][img-gen size="200" file="jpg" bg="C00" color="ff0" text="Normal"][/img]
[img responsive thumbnail class="mr-3"][border radius="all"][img-gen size="200" file="jpg" bg="C00" color="ff0" text="Rounded"][/border][/img]
[img responsive thumbnail class="mr-3"][border radius="all" size="lg"][img-gen size="200" file="jpg" bg="C00" color="ff0" text="Rounded Large"][/border][/img]
[img responsive thumbnail class="mr-3"][border radius="circle"][img-gen size="200" file="jpg" bg="C00" color="ff0" text="Circle"][/border][/img]
[img responsive thumbnail class="mr-3"][border radius="pill"][img-gen size="200x150" file="jpg" bg="C00" color="ff0" text="Pill"][/border][/img]
[/card-body]
[card-footer] Images generated with [code inline]img-gen[/code]. [/card-footer]
[/card]
Figures
[card]
[card-header class="lead"]Image with Text above[/card-header]
[card-body class="p4"]
[figure class="p-2"]
[figure-caption]A caption for the below image.[/figure-caption]
[img-gen size="300" class="rounded"]
[/figure]
[figure class="p-2"]
[figure-caption class="text-right"]A caption for the below image.[/figure-caption]
[img-gen size="300" class="rounded"]
[/figure]
[/card-body]
[card-footer] Images generated with [code inline]img-gen[/code]. [/card-footer]
[/card]
[card]
[card-header class="lead"]Image with Text below[/card-header]
[card-body class="p4"]
[figure class="p-2"]
[img-gen size="300" class="rounded"]
[figure-caption]A caption for the above image.[/figure-caption]
[/figure]
[figure class="p-2"]
[img-gen size="300" class="rounded"]
[figure-caption class="text-right"]A caption for the above image.[/figure-caption]
[/figure]
[/card-body]
[card-footer] Images generated with [code inline]img-gen[/code]. [/card-footer]
[/card]
Blockquote
[card]
[card-header class="lead"]Blockquote[/card-header]
[card-body class="p4"]
[blockquote]
[lorem-ipsum sentences="2"]
[blockquote-footer]
Automatically created by lorem ipsum generator
[/blockquote-footer]
[/blockquote]
[/card-body]
[card-footer] Images generated with [code inline]img-gen[/code]. [/card-footer]
[/card]
Lead
[card]
[card-header class="lead"]Lead[/card-header]
[card-body class="p4"]
[lead][lorem-ipsum sentences="1"][/lead]
[lorem-ipsum sentences="1"]
[/card-body]
[card-footer] First paragraph uses [code inline]lead[/code]. [/card-footer]
[/card]
Border
[card]
[card-header class="lead"]Colored Text Examples[/card-header]
[card-body class="p4"]
[border color="dark"] [lorem-ipsum class="p-3"] [/border]
[border radius="pill" color="danger"] [lorem-ipsum class="p-3"] [/border]
[border radius="top" color="info"] [lorem-ipsum class="p-3"] [/border]
[/card-body]
[card-footer] [/card-footer]
[/card]
Color
[card]
[card-header class="lead"]Colored Text Examples[/card-header]
[card-body class="p4"]
[color bg="primary" text="white"][lorem-ipsum class="p-2"][/color]
[color bg="info" text="black"][lorem-ipsum class="p-2"][/color]
[/card-body]
[card-footer] [/card-footer]
[/card]
Flex
[card]
[card-header class="lead"]Flex Row[/card-header]
[card-body class="p4"]
[flex class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Reverse Row[/card-header]
[card-body class="p4"]
[flex direction="row-reverse" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Inline Flex[/card-header]
[card-body class="p4"]
[flex inline class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Inline Reverse Row Flex[/card-header]
[card-body class="p4"]
[flex inline direction="row-reverse" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Column[/card-header]
[card-body class="p4"]
[flex direction="column" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Reverse Column[/card-header]
[card-body class="p4"]
[flex direction="column-reverse" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Justify Center[/card-header]
[card-body class="p4"]
[flex justify="center" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Align Items Center[/card-header]
[card-body class="p4"]
[flex align-items="center" class="h150px p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] The flex container has a fixed height of 150px. [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Item Self-Align[/card-header]
[card-body class="p4"]
[flex class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex[br]item[br]1[/flex-item]
[flex-item align="start" class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex[br]item[br]3[/flex-item]
[flex-item align="center" class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex[br]item[br]5[/flex-item]
[flex-item align="end" class="p-2 bg-primary"]Flex item 6[/flex-item]
[/flex]
[/card-body]
[card-footer] 2 is aligned at start, 4 at center and 6 at end [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Wrap[/card-header]
[card-body class="p4"]
[card-title]No Wrap[/card-title]
[flex class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 7[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 8[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 9[/flex-item]
[flex-item class="p-2 bg-danger"]Flex item 10[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 11[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 12[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 13[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 14[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 15[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 16[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 17[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 18[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 19[/flex-item]
[flex-item class="p-2 bg-danger"]Flex item 20[/flex-item]
[/flex]
[card-title]Wrap[/card-title]
[flex wrap="true" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 7[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 8[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 9[/flex-item]
[flex-item class="p-2 bg-danger"]Flex item 10[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 11[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 12[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 13[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 14[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 15[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 16[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 17[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 18[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 19[/flex-item]
[flex-item class="p-2 bg-danger"]Flex item 20[/flex-item]
[/flex]
[card-title]Reverse Wrap[/card-title]
[flex wrap="reverse" class="p-3 bg-secondary text-white"]
[flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 4[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 5[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 6[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 7[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 8[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 9[/flex-item]
[flex-item class="p-2 bg-danger"]Flex item 10[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 11[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 12[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 13[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 14[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 15[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 16[/flex-item]
[flex-item class="p-2 bg-info"]Flex item 17[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 18[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 19[/flex-item]
[flex-item class="p-2 bg-danger"]Flex item 20[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Row Fill[/card-header]
[card-body class="p4"]
[flex class="p-3 bg-secondary text-white"]
[flex-item fill class="p-2 bg-info"]Flex item 1[/flex-item]
[flex-item fill class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item fill class="p-2 bg-primary"]Flex item 3[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Grow[/card-header]
[card-body class="p4"]
[flex class="p-3 bg-secondary text-white"]
[flex-item grow class="p-2 bg-info"]Flex grow item 1[/flex-item]
[flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex Shrink[/card-header]
[card-body class="p4"]
[flex class="p-3 bg-secondary text-white"]
[flex-item shrink class="p-2 bg-info"]Flex shrink item 1[/flex-item]
[flex-item class="w-50 p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="w-50 p-2 bg-primary"]Flex item 3[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Flex No Shrink[/card-header]
[card-body class="p4"]
[flex class="p-3 bg-secondary text-white"]
[flex-item no-shrink class="p-2 bg-info"]Flex no-shrink item 1[/flex-item]
[flex-item class="w-50 p-2 bg-warning"]Flex item 2[/flex-item]
[flex-item class="w-50 p-2 bg-primary"]Flex item 3[/flex-item]
[/flex]
[/card-body]
[card-footer] [/card-footer]
[/card]
Tooltip
[card]
[card-header class="lead"]Tooltip Examples[/card-header]
[card-body class="p4"]
[tooltip title="I'm the title" placement="auto" animation][button outline class="mr-3"] Auto [/button][/tooltip]
[tooltip title="I'm the title" placement="left"][button outline class="mr-3"] Left [/button][/tooltip]
[tooltip title="I'm the title" placement="top"][button outline class="mr-3"] Top [/button][/tooltip]
[tooltip title="I'm the title" placement="bottom"][button outline class="mr-3"] Bottom [/button][/tooltip]
[tooltip title="I'm the title" placement="right"][button outline class="mr-3"] Right [/button][/tooltip]
[tooltip title="I'm the title with HTML" placement="top" html][button outline] HTML [/button][/tooltip]
[/card-body]
[card-footer] Tooltips work best with [code inline][button][/code]s or links but can be attached to any element. [/card-footer]
[/card]
Popover
[card]
[card-header class="lead"]popover Examples[/card-header]
[card-body class="p4"]
[popover title="I'm the title" content="And this is the content" placement="auto" animation][button outline class="mr-3"] Auto [/button][/popover]
[popover title="I'm the title" content="And this is the content" placement="left"][button outline class="mr-3"] Left [/button][/popover]
[popover title="I'm the title" content="And this is the content" placement="top"][button outline class="mr-3"] Top [/button][/popover]
[popover title="I'm the title" content="And this is the content" placement="bottom"][button outline class="mr-3"] Bottom [/button][/popover]
[popover title="I'm the title" content="And this is the content" placement="right"][button outline class="mr-3"] Right [/button][/popover]
[popover title="I'm the title with HTML" content="And this is the content with even more HTML" placement="top" html][button outline] HTML [/button][/popover]
[/card-body]
[card-footer] Popovers work best with [code inline][button][/code]s or links but can be attached to any element. [/card-footer]
[/card]
Accordion
[card-outer]
[card-header class="lead"]Basic Accordion[/card-header]
[card-body-outer class="p4"]
[accordion]
[card show]
[card-header] Header 1 [/card-header]
[card-body] [lorem-ipsum] [/card-body]
[/card]
[card]
[card-header] Header 2 [/card-header]
[card-body][lorem-ipsum][/card-body]
[/card]
[card]
[card-header] Header 3 [/card-header]
[card-body][lorem-ipsum][/card-body]
[/card]
[/accordion]
[/card-body-outer]
[card-footer] [/card-footer]
[/card-outer]
Carousel
[card]
[card-header class="lead"]Carousel with text[/card-header]
[card-body class="p4"]
[carousel]
[carousel-item active][lorem-ipsum tag="div"][/carousel-item]
[carousel-item][lorem-ipsum tag="div"][/carousel-item]
[carousel-item][lorem-ipsum tag="div"][/carousel-item]
[carousel-item][lorem-ipsum tag="div"][/carousel-item]
[/carousel]
[/card-body]
[card-footer] Card body adjust to paragraph height. [/card-footer]
[/card]
[card]
[card-header class="lead"]Standard Carousel[/card-header]
[card-body class="p4"]
[carousel]
[carousel-item active][img-gen responsive size="1200x200" text="Slide 1"][/carousel-item]
[carousel-item][img-gen responsive size="1200x200" text="Slide 2" bg="C0C0C0"][/carousel-item]
[carousel-item][img-gen responsive size="1200x200" text="Slide 3" bg="F00000"][/carousel-item]
[carousel-item][img-gen responsive size="1200x200" text="Slide 4" bg="00F000"][/carousel-item]
[/carousel]
[/card-body]
[card-footer] 4 slides, pause, no controls, no indicator, wrap, interval 5000ms[/card-footer]
[/card]
[card]
[card-header class="lead"]Customized Carousel[/card-header]
[card-body class="p4"]
[carousel pause="false" interval="1000" controls indicators fade]
[carousel-item active]
[img-gen responsive size="1200x200" text=" "]
[carousel-caption] Caption 1 [/carousel-caption]
[/carousel-item]
[carousel-item]
[img-gen responsive size="1200x200" text=" " bg="C0C0C0"]
[carousel-caption] Caption 2 [/carousel-caption]
[/carousel-item]
[carousel-item]
[img-gen responsive size="1200x200" text=" " bg="F00000"]
[carousel-caption] Caption 3 [/carousel-caption]
[/carousel-item]
[carousel-item]
[img-gen responsive size="1200x200" text=" " bg="00F000"]
[carousel-caption] Caption 4 [/carousel-caption]
[/carousel-item]
[/carousel]
[/card-body]
[card-footer] 4 slides, no pause, controls, indicator, wrap, interval 1000ms [/card-footer]
[/card]
Modal
[card]
[card-header class="lead"]Standard Modal Examples[/card-header]
[card-body class="p4"]
[button type="info" modal="example-modal-1"] No Backdrop [/button]
[modal fade id="example-modal-1" backdrop="false"]
[modal-header]Standard No Backdrop[/modal-header]
[modal-body]
[lorem-ipsum]
[/modal-body]
[modal-footer]
[button type="secondary"] Lorem [/button]
[button type="primary"] Ipsum [/button]
[/modal-footer]
[/modal]
[button type="info" modal="example-modal-2"] Backdrop [/button]
[modal fade id="example-modal-2" backdrop="true"]
[modal-header]Standard Backdrop[/modal-header]
[modal-body]
[lorem-ipsum]
[/modal-body]
[modal-footer]
[button type="secondary"] Lorem [/button]
[button type="primary"] Ipsum [/button]
[/modal-footer]
[/modal]
[button type="info" modal="example-modal-3"] Static Backdrop [/button]
[modal fade id="example-modal-3" backdrop="static"]
[modal-header]Standard Static Backdrop[/modal-header]
[modal-body]
[lorem-ipsum]
[/modal-body]
[modal-footer]
[button type="secondary"] Lorem [/button]
[button type="primary"] Ipsum [/button]
[/modal-footer]
[/modal]
[/card-body]
[card-footer] [/card-footer]
[/card]
[card]
[card-header class="lead"]Centered Small Modal Examples[/card-header]
[card-body class="p4"]
[button type="info" modal="example-modal-sm-1"] No Backdrop [/button]
[modal size="sm" fade centered id="example-modal-sm-1" backdrop="false"]
[modal-header]Small Centered No Backdrop[/modal-header]
[modal-body]
[lorem-ipsum]
[/modal-body]
[modal-footer]
[button type="secondary"] Lorem [/button]
[button type="primary"] Ipsum [/button]
[/modal-footer]
[/modal]
[button type="info" modal="example-modal-sm2"] Backdrop [/button]
[modal size="sm" fade centered id="example-modal-sm2" backdrop="true"]
[modal-header]Small Centered Backdrop[/modal-header]
[modal-body]
[lorem-ipsum]
[/modal-body]
[modal-footer]
[button type="secondary"] Lorem [/button]
[button type="primary"] Ipsum [/button]
[/modal-footer]
[/modal]
[button type="info" modal="example-modal-sm3"] Static Backdrop [/button]
[modal size="sm" fade centered id="example-modal-sm3" backdrop="static"]
[modal-header]Small Centered Static Backdrop[/modal-header]
[modal-body]
[lorem-ipsum]
[/modal-body]
[modal-footer]
[button type="secondary"] Lorem [/button]
[button type="primary"] Ipsum [/button]
[/modal-footer]
[/modal]
[/card-body]
[card-footer] [/card-footer]
[/card]
Float and Clearfix
[card]
[card-header class="lead"]Float and Clearfix Examples[/card-header]
[card-body class="p4"]
[clearfix class="bg-warning"]
[float float="none"] No Float [/float]
[float float="left"] Left Float [/float]
[/clearfix]
[clearfix class="mt-3 bg-warning"]
[float float="left"] Left Float [/float]
[float float="right"] Right Float [/float]
[/clearfix]
[clearfix class="mt-3 bg-warning"]
[float float="none"] No Float [/float]
[float float="right"] Right Float [/float]
[/clearfix]
[clearfix class="mt-3 bg-warning"]
[float float="left"] Float Left [/float]
[img-gen class="float-right" size="200" text="Image Right Float"]
[/clearfix]
[clearfix class="mt-3 bg-warning"]
[img-gen class="float-left" size="200" text="Image Left Float"]
[img-gen class="float-right" size="200" text="Image Right Float"]
[/clearfix]
[clearfix class="mt-3 bg-info"]
[button class="btn-secondary float-left"]Example Button floated left[/button]
[button class="btn-secondary float-right"]Example Button floated right[/button]
[/clearfix]
[/card-body]
[card-footer] [/card-footer]
[/card]
Wrapper
[card]
[card-header class="lead"]Wrapper Example (set color for icon and text)[/card-header]
[card-body class="p4"]
[wrapper type="div" class="text-success d-flex"]
[icon name="arrow-right" class="mr-2 fa-2x"]
[lorem-ipsum]
[/wrapper]
[/card-body]
[card-footer] Icon and Text inside [code inline]span[/code] with "success" color. [/card-footer]
[/card]