.card { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; } .card hr { margin-right: 0; margin-left: 0; } .card-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); } .card-header:first-child { border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0; } .card-body { align-items: normal; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem; } .card-title { margin-bottom: .75rem; } .card-header + .list-group .list-group-item:first-child { border-top: 0; } .card-text:last-child { margin-bottom: 0; } .card-footer { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); } .card-footer:last-child { border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px); } .card-group { display: flex; flex-direction: column; // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { margin-bottom: 0.9375em; } @media screen and (min-width: 576px) { flex-flow: row wrap; // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { flex: 1 0 0%; margin-bottom: 0; + .card { margin-left: 0; border-left: 0; } &:first-child { border-right-radius: 0; .card-img-top, .card-header { border-top-right-radius: 0; } .card-img-bottom, .card-footer { border-bottom-right-radius: 0; } } &:last-child { border-left-radius: 0; .card-img-top, .card-header { border-top-left-radius: 0; } .card-img-bottom, .card-footer { border-bottom-left-radius: 0; } } &:only-child { border-radius: .25rem; .card-img-top, .card-header { border-top-radius: .25rem; } .card-img-bottom, .card-footer { border-radius: .25rem; } } &:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; .card-img-top, .card-img-bottom, .card-header, .card-footer { border-radius: 0; } } } } }