Bootstrap Cards Not Showing Like In Examples
Solution 1:
It shows up fine by me. You have to make sure that you are linking the version 4 style sheet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
Solution 2:
The Bootstrap 4 card feature has undergone additional changes from the earlier v4-alpha version(s) to the v4-beta version. However, the examples on the Bootstrap web site still use the older class name. The cards still render, but the padding is lost if the older class name is used.
Current (September 2017) example using the card-body
class (CSS):
<div class="card" style="width: 20rem;">
<imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
Here is a similar answer to a related question.
Solution 3:
Copying card css from the boostrap4 version into your bootstrap3 solution worked for me. Nice if you are stuck on bootstrap3.
Just drop the following in your CSS anywhere.
.card {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-block {
-webkit-box-flex: 1;
-webkit-flex: 11 auto;
-ms-flex: 11 auto;
flex: 11 auto;
padding: 1.25rem;
}
.card-title {
margin-bottom: 0.75rem;
}
.card-subtitle {
margin-top: -0.375rem;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link:hover {
text-decoration: none;
}
.card-link + .card-link {
margin-left: 1.25rem;
}
.card > .list-group:first-child .list-group-item:first-child {
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.card > .list-group:last-child.list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.card-header {
padding: 0.75rem1.25rem;
margin-bottom: 0;
background-color: #f7f7f9;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 00;
}
.card-footer {
padding: 0.75rem1.25rem;
background-color: #f7f7f9;
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card-footer:last-child {
border-radius: 00calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.card-header-tabs {
margin-right: -0.625rem;
margin-bottom: -0.75rem;
margin-left: -0.625rem;
border-bottom: 0;
}
.card-header-pills {
margin-right: -0.625rem;
margin-left: -0.625rem;
}
.card-primary {
background-color: #0275d8;
border-color: #0275d8;
}
.card-primary.card-header,
.card-primary.card-footer {
background-color: transparent;
}
.card-success {
background-color: #5cb85c;
border-color: #5cb85c;
}
.card-success.card-header,
.card-success.card-footer {
background-color: transparent;
}
.card-info {
background-color: #5bc0de;
border-color: #5bc0de;
}
.card-info.card-header,
.card-info.card-footer {
background-color: transparent;
}
.card-warning {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.card-warning.card-header,
.card-warning.card-footer {
background-color: transparent;
}
.card-danger {
background-color: #d9534f;
border-color: #d9534f;
}
.card-danger.card-header,
.card-danger.card-footer {
background-color: transparent;
}
.card-outline-primary {
background-color: transparent;
border-color: #0275d8;
}
.card-outline-secondary {
background-color: transparent;
border-color: #ccc;
}
.card-outline-info {
background-color: transparent;
border-color: #5bc0de;
}
.card-outline-success {
background-color: transparent;
border-color: #5cb85c;
}
.card-outline-warning {
background-color: transparent;
border-color: #f0ad4e;
}
.card-outline-danger {
background-color: transparent;
border-color: #d9534f;
}
.card-inverse {
color: rgba(255, 255, 255, 0.65);
}
.card-inverse.card-header,
.card-inverse.card-footer {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.2);
}
.card-inverse.card-header,
.card-inverse.card-footer,
.card-inverse.card-title,
.card-inverse.card-blockquote {
color: #fff;
}
.card-inverse.card-link,
.card-inverse.card-text,
.card-inverse.card-subtitle,
.card-inverse.card-blockquote.blockquote-footer {
color: rgba(255, 255, 255, 0.65);
}
.card-inverse.card-link:focus, .card-inverse.card-link:hover {
color: #fff;
}
.card-blockquote {
padding: 0;
margin-bottom: 0;
border-left: 0;
}
.card-img {
border-radius: calc(0.25rem - 1px);
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.card-img-top {
border-top-right-radius: calc(0.25rem - 1px);
border-top-left-radius: calc(0.25rem - 1px);
}
.card-img-bottom {
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
}
@media (min-width: 576px) {
.card-deck {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card-deck.card {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 100%;
-ms-flex: 100%;
flex: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.card-deck.card:not(:first-child) {
margin-left: 15px;
}
.card-deck.card:not(:last-child) {
margin-right: 15px;
}
}
@media (min-width: 576px) {
.card-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card-group.card {
-webkit-box-flex: 1;
-webkit-flex: 100%;
-ms-flex: 100%;
flex: 100%;
}
.card-group.card + .card {
margin-left: 0;
border-left: 0;
}
.card-group.card:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.card-group.card:first-child .card-img-top {
border-top-right-radius: 0;
}
.card-group.card:first-child .card-img-bottom {
border-bottom-right-radius: 0;
}
.card-group.card:last-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.card-group.card:last-child.card-img-top {
border-top-left-radius: 0;
}
.card-group.card:last-child.card-img-bottom {
border-bottom-left-radius: 0;
}
.card-group.card:not(:first-child):not(:last-child) {
border-radius: 0;
}
.card-group.card:not(:first-child):not(:last-child) .card-img-top,
.card-group.card:not(:first-child):not(:last-child) .card-img-bottom {
border-radius: 0;
}
}
@media (min-width: 576px) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.card-columns.card {
display: inline-block;
width: 100%;
margin-bottom: 0.75rem;
}
}
Source: https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L4055
Solution 4:
This might be old, but are you using a customized bootstrap file by any chance? I recently was trying to work with cards using our customized file, and the same thing was happening to me. Then I realized that there are no card classes in the bootstrap file, nor is there any mention of Cards on the customize page.
http://getbootstrap.com/customize/
Seems strange to me, I even had a coworker verify it though. Hope this helps.
Solution 5:
If you have installed bootstrap via a package manager, such as NPM:
For some package managers, the default installed version is bootstrap@4.0.0-beta.2
which doesn't appear to have this feature.
This could be misleading as the correct version is described on Bootstrap's Getting started > Download section, found here
To resolve, ensure you are referencing the latest package version bootstrap@4.0.0-alpha.6
Post a Comment for "Bootstrap Cards Not Showing Like In Examples"