Card
Last updated
Last updated
Free Macro
A Bootstrap card has several sections that you can show or hide with the macro. See the following diagram:
Edit your page.
Select “+” => Other macros
Type in “Bootstrap” in the Search box
Select the “Bootstrap Card” macro
Enter the header of your card. If you leave this empty, the header section will not be shown.
Select the Confluence header level to be used for the card header.
Enter the title of your card. If you leave this empty, the title section will not be shown.
Select the Confluence header level to be used for the card title.
Enter the subtitle of your card. If you leave this empty, the subtitle section will not be shown.
Select the Confluence header level to be used for the card subtitle.
Specify the width of your card in pixel or in percent of the parent object.
If you leave this empty, the card’s width will be adjusted to 99.6% of the parent object. If that is the page itself, it will stretch along the whole page width. The default is set a littler lower than 100% to avoid vertical scroll bars that might occur in Confluence page sections.
If you enter a pixel value here, e.g. 300px, the width of the parent object will not matter. The card’s width will be what you enter.
The content on your page after the card will always be displayed below the card, even if you only set it to 300px for example. With this option enabled, the next content will be displayed on the right of it if the space available allows. Use this option if you want to place another card or some free text right next to it.
Select one of the Bootstrap color styles.
Outline
The same styles are also available as outline cards.
You can use an image in your card. It will be displayed at the top, underneath the Header. Allowed are image files of type GIF, JPG and PNG. You have to attach the image to the page first.
Switch this option on if you want to use an image in your card.
Select the image from your attachments that you want to use in your card. It is recommended that you size your image according to the width of your card. If your card is 300px wide, make your image so as well.
Enter the footer of your card. If you leave this empty, the footer section will not be shown.
This macro supports a body. The content that you place in the content will be displayed in the card as regular text. See diagram above to locate the body.
After you save the macro while editing the page, put any text or another macro in the body: