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:Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
bootstrap-link:components/card/
bootstrap-link:components/card/
done:true
done: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.
## 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.
Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
{% 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." %}
...
@@ -21,9 +19,9 @@ To create a new card you have to use the `.card` and `.card-body` classes. You c
...
@@ -21,9 +19,9 @@ To create a new card you have to use the `.card` and `.card-body` classes. You c
## Card padding
## 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.
You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or`.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.
Cards with the `.card-sm` class are well suited for small items such as snippets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
{% capture code %}
{% capture code %}
{% include cards/card.html class="card-sm" body="This is some text within a card body." %}
{% include cards/card.html class="card-sm" body="This is some text within a card body." %}
...
@@ -36,9 +34,7 @@ Cards with the `.card-sm` class are very well suited for small items such as sni
...
@@ -36,9 +34,7 @@ Cards with the `.card-sm` class are very well suited for small items such as sni
## Card with title
## Card with title
To add a title to a card you should add a class `.card-title` inside `.card-body`.
Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
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 %}
{% capture code %}
{% include cards/card.html title="Card title" body="This is some text within a card body." %}
{% include cards/card.html title="Card title" body="This is some text within a card body." %}
...
@@ -49,6 +45,8 @@ You can also place the title inside the `.card-header` element - then the title
...
@@ -49,6 +45,8 @@ You can also place the title inside the `.card-header` element - then the title
## Card with title and image
## Card with title and image
To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your inteface design and draw users' attention.
{% 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 %}
...
@@ -57,7 +55,7 @@ You can also place the title inside the `.card-header` element - then the title
...
@@ -57,7 +55,7 @@ You can also place the title inside the `.card-header` element - then the title
## 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.
Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
{% capture code %}
{% capture code %}
{% include cards/blog-single.html type="image" %}
{% include cards/blog-single.html type="image" %}
...
@@ -67,7 +65,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
...
@@ -67,7 +65,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
## 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.
Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
{% capture code %}
{% capture code %}
<divclass="row row-deck">
<divclass="row row-deck">
...
@@ -93,7 +91,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
...
@@ -93,7 +91,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
## 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 an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
{% capture code %}
{% capture code %}
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
...
@@ -103,6 +101,8 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -103,6 +101,8 @@ You can also add the image on the left side of the card. All you need do to is:
## Color variations
## Color variations
Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
{% capture code %}
{% capture code %}
<divclass="row row-deck">
<divclass="row row-deck">
<divclass="col-md-6">
<divclass="col-md-6">
...
@@ -118,6 +118,8 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -118,6 +118,8 @@ You can also add the image on the left side of the card. All you need do to is:
## Stacked card
## Stacked card
Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
{% capture code %}
{% capture code %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% endcapture %}
{% endcapture %}
...
@@ -126,6 +128,8 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -126,6 +128,8 @@ You can also add the image on the left side of the card. All you need do to is:
## Tabbed card
## Tabbed card
Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
description:The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
bootstrap-link:utilities/colors/
bootstrap-link:utilities/colors/
done:true
done:true
---
---
...
@@ -9,9 +9,13 @@ done: true
...
@@ -9,9 +9,13 @@ done: true
## Base colors
## Base colors
Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
{% include example/colors-table.html %}
{% include example/colors-table.html %}
## Light colors
## Light colors
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.
{% include example/colors-table.html light=true %}
{% include example/colors-table.html light=true %}
description:A progress bar can be used to show a user how far along he is in a process.
description:Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
bootstrap-link:components/progress
bootstrap-link:components/progress
done:true
done:true
---
---
...
@@ -8,7 +8,7 @@ done: true
...
@@ -8,7 +8,7 @@ done: true
## Default markup
## Default markup
To create a default progress bar, add a `.progress` class to a `<div>` element:
To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
{% capture code %}
{% capture code %}
{% include ui/progress.html %}
{% include ui/progress.html %}
...
@@ -18,7 +18,7 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
...
@@ -18,7 +18,7 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
## Progress size
## Progress size
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
{% capture code %}
{% capture code %}
{% include ui/progress.html value=57 size="sm" %}
{% include ui/progress.html value=57 size="sm" %}
...
@@ -28,7 +28,7 @@ Using Bootstrap’s typical naming structure, you can create a standard progress
...
@@ -28,7 +28,7 @@ Using Bootstrap’s typical naming structure, you can create a standard progress
## Progress without value
## Progress without value
Remove the showed value by adding a class called `.sr-only`.
Remove the displayed value by adding the `.sr-only` class.
{% capture code %}
{% capture code %}
{% include ui/progress.html value=75 show-value=false %}
{% include ui/progress.html value=75 show-value=false %}
...
@@ -38,7 +38,7 @@ Remove the showed value by adding a class called `.sr-only`.
...
@@ -38,7 +38,7 @@ Remove the showed value by adding a class called `.sr-only`.
## Indeterminate progress
## Indeterminate progress
To create indeterminate progress add`.progress-bar-indeterminate` to the `.progress-bar` element.
You can create a progress bar which shows indeterminate progress by adding`.progress-bar-indeterminate` to the `.progress-bar` element.
{% capture code %}
{% capture code %}
{% include ui/progress.html indeterminate=true size="sm" %}
{% include ui/progress.html indeterminate=true size="sm" %}
...
@@ -58,7 +58,7 @@ You can also use native HTML5 `<progress>` element.
...
@@ -58,7 +58,7 @@ You can also use native HTML5 `<progress>` element.
## Progress color
## Progress color
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
Customize the color of the progress bar to suit your design. Click [here]({% docs_url colors %}) to see the list of available colors.
{% capture code %}
{% capture code %}
{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %}
{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %}