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″] [/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]


[row] [column md=”6″] … [/column] [column md=”6″] … [/column] [/row] [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]

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] New Messages[badge class=”bg-primary”] 9 [/badge] 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”]Dismissable Alerts[/card-header] [card-body class=”p4″] [alert dismissable type=”primary”] Primary [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”secondary”] Secondary [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”success”] Success [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”info”] Info [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”warning”] Warning [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”danger”] Danger [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”dark”] Dark [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable type=”light”] Light [lorem-ipsum words=”4″ tag=’span’] [/alert] [/card-body] [card-footer][/card-footer] [/card]


[card] [card-header class=”lead”]Dismissable Alerts with Fade Effect[/card-header] [card-body class=”p4″] [alert dismissable fade type=”primary”] Primary [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable fade type=”secondary”] Secondary [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable fade type=”success”] Success [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable fade type=”info”] Info [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable fade type=”warning”] Warning [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable fade type=”danger”] Danger [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable fade type=”dark”] Dark [lorem-ipsum words=”4″ tag=’span’] [/alert] [alert dismissable 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″] [/progress] [card-header]Striped[/card-header] [progress] [progress-bar striped percent=”50″] [/progress] [card-header]Striped and Animated[/card-header] [progress] [progress-bar striped animated percent=”50″] [/progress] [card-header]Stacked[/card-header] [progress] [progress-bar striped percent=”50″] [progress-bar striped percent=”25″ type=”success”] [progress-bar striped percent=”5″ type=”danger”] [/progress] [card-header]Stacked and Labeled[/card-header] [progress] [progress-bar label percent=”50″] [progress-bar label percent=”25″ type=”success”] [progress-bar label percent=”5″ type=”danger”] [/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]

 

q

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at container parameters. optional any text none


[/code]

[/card-body]
[card-footer][/card-footer]
[/card]


[card]
[card-header class=”lead”]Scrollable Code Snippet[/card-header]
[card-body class=”p4″]

[code scrollable]

 

q

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at container parameters. optional any text none


[/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=”200×150″ 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 above image.[/figure-caption] [img-gen size=”300″ class=”rounded”] [/figure] [figure class=”p-2″] [figure-caption class=”text-right”]A caption for the above 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
item
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
item
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
item
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=”1200×200″ text=”Slide 1″][/carousel-item] [carousel-item][img-gen responsive size=”1200×200″ text=”Slide 2″ bg=”C0C0C0″][/carousel-item] [carousel-item][img-gen responsive size=”1200×200″ text=”Slide 3″ bg=”F00000″][/carousel-item] [carousel-item][img-gen responsive size=”1200×200″ 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=”1200×200″ text=” “] [carousel-caption] Caption 1 [/carousel-caption] [/carousel-item] [carousel-item] [img-gen responsive size=”1200×200″ text=” ” bg=”C0C0C0″] [carousel-caption] Caption 2 [/carousel-caption] [/carousel-item] [carousel-item] [img-gen responsive size=”1200×200″ text=” ” bg=”F00000″] [carousel-caption] Caption 3 [/carousel-caption] [/carousel-item] [carousel-item] [img-gen responsive size=”1200×200″ 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]