|
|
@@ -8,7 +8,7 @@ bootstrapLink: components/card/
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html example code centered columns={1}
|
|
|
+```html example code centered columns={1} background="base"
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<p>This is some text within a card body.</p>
|
|
|
@@ -22,7 +22,7 @@ You can change the padding of a newly created card. To do it, use the `.card-sm`
|
|
|
|
|
|
Cards with the `.card-sm` class are well suited for small items such as widgets, 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.
|
|
|
|
|
|
-```html example vertical centered separated height={500}
|
|
|
+```html example vertical centered separated height={500} background="base"
|
|
|
<div class="card card-sm">
|
|
|
<div class="card-body">
|
|
|
This is some text within a card body.
|
|
|
@@ -56,7 +56,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html code example vertical centered separated height={400}
|
|
|
+```html code example vertical centered separated height={400} background="base"
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<h3 class="card-title">Card title</h3>
|
|
|
@@ -77,7 +77,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
|
|
|
|
|
|
To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
|
|
|
|
|
|
-```html example centered columns={1} height={500} code
|
|
|
+```html example centered columns={1} height={500} code background="base"
|
|
|
<div class="card">
|
|
|
<!-- Photo -->
|
|
|
<div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
|
|
|
@@ -93,7 +93,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html example centered columns={1} height={600} code
|
|
|
+```html example centered columns={1} height={600} code background="base"
|
|
|
<div class="card d-flex flex-column">
|
|
|
<a href="#">
|
|
|
<img class="card-img-top" src="/samples/photos/book-on-the-grass.jpg" alt="" />
|
|
|
@@ -123,7 +123,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html code example centered height="220px"
|
|
|
+```html code example centered height="220px" background="base"
|
|
|
<div class="row row-deck">
|
|
|
<div class="col-md-4">
|
|
|
<div class="card">
|
|
|
@@ -147,7 +147,7 @@ Add the `.row-deck` class to `.row`, if you want to display several cards next t
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html example columns={2} centered height={400} code
|
|
|
+```html example columns={2} centered height={400} code background="base"
|
|
|
<div class="card d-flex flex-column">
|
|
|
<div class="row row-0 flex-fill">
|
|
|
<div class="col-md-3">
|
|
|
@@ -183,7 +183,7 @@ You can also add an image on the left side of the card. To do it, add the `.card
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html example columns={2} centered height={400}
|
|
|
+```html example columns={2} centered height={400} background="base"
|
|
|
<div class="row row-deck">
|
|
|
<div class="col-md-6">
|
|
|
<div class="card">
|
|
|
@@ -231,7 +231,7 @@ Add a status color to your card, either at the top or on the side of the card, t
|
|
|
|
|
|
Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
|
|
|
|
|
|
-```html code example columns={1} centered height={300}
|
|
|
+```html code example columns={1} centered height={300} background="base"
|
|
|
<div class="card card-stacked">
|
|
|
<div class="card-body">
|
|
|
<h3 class="card-title">Stacked card</h3>
|
|
|
@@ -245,7 +245,7 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
|
|
|
|
|
|
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.
|
|
|
|
|
|
-```html example columns={2} centered height={400}
|
|
|
+```html example columns={2} centered height={400} background="base"
|
|
|
<div class="card-tabs">
|
|
|
<ul class="nav nav-tabs">
|
|
|
<li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
|
codecalm