description:Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
description:Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
bootstrap-link:components/buttons/
bootstrap-link:components/buttons/
done:true
done:true
toc:true
---
---
### Button tag
### Button tag
...
@@ -263,7 +264,7 @@ You can now create a list of buttons with the `.btn-list` container.
...
@@ -263,7 +264,7 @@ You can now create a list of buttons with the `.btn-list` container.
<ahref="#"class="btn btn-danger">Cancel</a>
<ahref="#"class="btn btn-danger">Cancel</a>
</div>
</div>
{% endcapture %}
{% endcapture %}
{% include example.html code=code centered=true %}
{% include example.html code=code %}
If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
description:A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
description:A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
bootstrap-link:components/card/
bootstrap-link:components/card/
done:true
done:true
toc:true
---
---
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
### Default card
## Default card
To create a new card you have to use the `.card` and `.card-body` classes. You can put any content inside.
{% capture code %}
{% capture code %}
{% include cards/card.html body="This is some text within a card body." %}
{% include cards/card.html body="This is some text within a card body." %}
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code columns=1 %}
### Card padding
You can change the padding of a newly created card. You can do this with the `.card-sm`, `.card-md` and `.card-lg` classes.
Cards with the `.card-sm` class are very well suited for small items such as snippets, etc., while `.card-lg` can be used for large blocks of text. On small devices, padding will automatically be reduced to fit on the screen.
{% capture code %}
{% include cards/card.html class="card-sm" body="This is some text within a card body." %}
{% include cards/card.html body="This is some text within a card body." %}
{% include cards/card.html class="card-md" body="This is some text within a card body." %}
{% include cards/card.html class="card-lg" body="This is some text within a card body." %}
{% endcapture %}
{% include example.html code=code columns=2 %}
### Card with title and image
## Card with title
To add a title to a card you should add a class `.card-title` inside `.card-body`.
You can also place the title inside the `.card-header` element - then the title will be separated from the content by a horizontal line.
{% capture code %}
{% include cards/card.html title="Card title" body="This is some text within a card body." %}
{% include cards/card.html header-title="Card title" body="This is some text within a card body." %}
{% endcapture %}
{% include example.html code=code columns=1 %}
## Card with title and image
{% capture code %}
{% capture code %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code columns=1 %}
### Blog post card
## Blog post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
{% capture code %}
{% capture code %}
{% include cards/blog-single.html type="image" %}
{% include cards/blog-single.html type="image" %}
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code columns=1 %}
### Row deck
## Row deck
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
...
@@ -55,7 +85,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
...
@@ -55,7 +85,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code %}
### Post card with aside image
## Post card with aside image
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
...
@@ -64,7 +94,7 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -64,7 +94,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code %}
### Color variations
## Color variations
{% capture code %}
{% capture code %}
<divclass="row row-deck">
<divclass="row row-deck">
...
@@ -78,7 +108,7 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -78,7 +108,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code %}
### Stacked card
## Stacked card
{% capture code %}
{% capture code %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}