# Card

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="/files/d1JyWXSYoPQlVZIinIBU" alt=""><figcaption></figcaption></figure>

## Description

A Bootstrap card has several sections that you can show or hide with the macro. See the following diagram:

<figure><img src="/files/mHeqjet2326QRZLl5plW" alt=""><figcaption></figcaption></figure>

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Card” macro

## Macro Options

<figure><img src="/files/oYfHQxQ25AN1PKNPZBAf" alt=""><figcaption></figcaption></figure>

### **Header**

Enter the header of your card. If you leave this empty, the header section will not be shown.

### **Header Level**

Select the Confluence header level to be used for the card header.

### **Title**

Enter the title of your card. If you leave this empty, the title section will not be shown.

### **Title Level**

Select the Confluence header level to be used for the card title.

### **Subtitle**

Enter the subtitle of your card. If you leave this empty, the subtitle section will not be shown.

### **Subtitle Level**

Select the Confluence header level to be used for the card subtitle.

### **Width**

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.

### **Float Left**

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.

### **Style**

Select one of the [Bootstrap color styles.](/bootstrap-visuals-for-confluence/user-guide/bootstrap-color-styles.md)

<figure><img src="/files/L7eV52cSBe5wHP18DDGT" alt=""><figcaption></figcaption></figure>

**Outline**

The same styles are also available as outline cards.

<figure><img src="/files/wIWgOaFJOUyS7Zxpj3IP" alt=""><figcaption></figcaption></figure>

### **Use Image**

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.

### **Image**

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.

<figure><img src="/files/uDlg6M7vF49Sd3Wdjddk" alt=""><figcaption></figcaption></figure>

### **Footer**

Enter the footer of your card. If you leave this empty, the footer section will not be shown.

### Body

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:

<figure><img src="/files/TxqAGWWw6ODP61QUdR4n" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lewe.gitbook.io/bootstrap-visuals-for-confluence/user-guide/card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.