<header class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Bootstrap Horizontal Cards</h1>
<p class="lead mb-1">Stop using <code>.row</code> in your <code>.card</code>s with these simple classes I created:</p>
<div class="row">
<ul class="lead font-weight-bold">
<li><code>.card-x</code></li>
<li><code>.card-x-sm</code></li>
<li><code>.card-x-md</code></li>
<li><code>.card-x-lg</code></li>
<li><code>.card-x-xl</code></li>
</ul>
<ul class="lead">
<li><code>.card-xh</code></li>
<li><code>.card-xh-sm</code></li>
<li><code>.card-xh-md</code></li>
<li><code>.card-xh-lg</code></li>
<li><code>.card-xh-xl</code></li>
</ul>
<ul class="lead">
<li><code>.card-xf</code></li>
<li><code>.card-xf-sm</code></li>
<li><code>.card-xf-md</code></li>
<li><code>.card-xf-lg</code></li>
<li><code>.card-xf-xl</code></li>
</ul>
</div>
<hr>
<p>
Yes, I mean it. Just stick to Bootstrap's default card markup and use my CSS classes. Using <code>.row</code> is good thinking, but it's one of the ugliest markups I've ever seen. Since Bootstrap doesn't care about horizontal cards and I didn't
find implementation of horizontal cards that uses default Bootstrap card markup, I had to do it myself.
</p>
<a href="https://github.com/ivanvinski/bootstrap-horizontal-cards/releases/download/v2.0/bootstrap-x-cards-2.0.zip" class="btn btn-primary btn-lg">Download</a>
<a href="https://github.com/ivanvinski/bootstrap-horizontal-cards" target="_blank" class="btn btn-secondary my-1">Fork me on GitHub</a>
</header>
<main class="container">
<div class="row text-center my-5">
<article class="col-12 col-md-4">
<i class="fa fa-arrows mb-2"></i>
<h4>Flexible</h4>
<p>
Choose how and when to display card elements horizontally.
</p>
</article>
<article class="col-12 col-md-4">
<i class="fa fa-code mb-2"></i>
<h4>Simple Usage</h4>
<p>
Easy to understand short class names that follow Bootstrap's naming style.
</p>
</article>
<article class="col-12 col-md-4">
<i class="fa fa-balance-scale mb-2"></i>
<h4>Permissive License</h4>
<p>
This project is licensed under short and permissive MIT license.
</p>
</article>
</div>
<hr class="mb-5">
<div class="row">
<h2 class="col-12">Playground</h2>
<p class="col-12 lead mb-5">Select your options, see how it looks, and copy the code from below into your project.</p>
<section class="col-12 col-lg-4">
<form class="form-row">
<div class="col-12 col-md-6 col-lg-12 form-group">
<label for="targetPart">A card part to display horizontally</label>
<select id="targetPart" class="form-control">
<option>Header and footer</option>
<option selected>Header</option>
<option>Footer</option>
</select>
</div>
<div class="col-12 col-md-6 col-lg-12 form-group">
<label for="targetDevices">Devices to display horizontally on</label>
<select id="targetDevices" class="form-control">
<option>None</option>
<option selected>All</option>
<option>Small (and larger)</option>
<option>Medium (and larger)</option>
<option>Large (and larger)</option>
<option>Extra large (and larger)</option>
</select>
</div>
<div class="col-12 col-md-6 col-lg-12 form-group">
<label for="headerClass">Header</label>
<select id="headerClass" class="form-control">
<option>.card-img-top</option>
<option>.card-header</option>
<option>none</option>
</select>
</div>
<div class="col-12 col-md-6 col-lg-12 form-group">
<label for="footerClass">Footer</label>
<select id="footerClass" class="form-control">
<option>.card-footer</option>
<option>.card-img-bottom</option>
<option>none</option>
</select>
</div>
</form>
</section>
<section class="col-12 col-lg-8">
<p id="info" class="alert alert-info"></p>
<p class="alert alert-secondary">Card preview is best suited for devices where you can control the width of your browser.</p>
<article id="card" class="card">
<img id="cardImage" src="https://picsum.photos/1024/768/?random" class="card-img-top">
<header id="cardHeader" class="card-header">
Hello World
</header>
<div id="cardBody" class="card-body">
<h5 class="card-title">Customizable Bootstrap Card</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend sed ex vel lacinia. Morbi tincidunt vulputate ante sit amet mattis. Fusce pretium aliquam elit non sollicitudin. Fusce lacus dui, lacinia quis sollicitudin eu, venenatis ut ex. Aenean
nunc orci, scelerisque et nunc et, ultricies tempus massa. Donec pellentesque mi ut lorem mattis, quis fringilla justo sollicitudin. Sed tristique nec odio nec convallis. Curabitur sollicitudin auctor enim sed fringilla.
</p>
</div>
<footer id="cardFooter" class="card-footer text-muted">
By <a href="https://ivanvinski.com" target="_blank">Ivan Vinski</a>
</footer>
<img id="cardImageBottom" src="https://picsum.photos/1024/767/?random" class="card-img-bottom">
</article>
</section>
</div>
<pre><code id="code">
</code></pre>
</div>
</main>
<br class="my-5">.card{position:relative;display:flex;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>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.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-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-header+.list-group .list-group-item:first-child{border-top: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-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck{display:flex;flex-direction:column}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:flex;flex:1 0 0%;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group{display:flex;flex-direction:column}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-moz-column-count:3;column-count:3;-moz-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.accordion>.card{overflow:hidden}.accordion>.card:not(:first-of-type) .card-header:first-child{border-radius:0}.accordion>.card:not(:first-of-type):not(:last-of-type){border-bottom:0;border-radius:0}.accordion>.card:first-of-type{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:last-of-type{border-top-left-radius:0;border-top-right-radius:0}.accordion>.card .card-header{margin-bottom:-1px}.card{flex-direction:row;flex-wrap:wrap;overflow:hidden}.card-body,.card-footer,.card-header,.card-img-bottom,.card-img-top{flex:1 1 100%}.card-footer,.card-header,.card-img-bottom,.card-img-top{border:none;border-radius:0;-o-object-fit:cover;object-fit:cover}.card-x .card-body,.card-xf .card-body,.card-xh .card-body{flex-basis:50%;width:50%}.card-x .card-footer,.card-x .card-header,.card-x .card-img-bottom,.card-x .card-img-top{flex-basis:25%;width:25%}.card-xh .card-header,.card-xh .card-img-top{flex-basis:25%;width:25%}.card-xf .card-footer,.card-xf .card-img-bottom{flex-basis:25%;width:25%}.card .card-header{border-bottom:1px solid rgba(0,0,0,.125)}.card .card-footer{border-top:1px solid rgba(0,0,0,.125)}[class*=" card-x-"] .card-footer,[class*=" card-x-"] .card-header{border:none}[class*=" card-xf-"] .card-footer,[class*=" card-xh-"] .card-header{border:none}.card-x .card-header,.card-xh .card-header,[class*=" card-x-"] .card-header,[class*=" card-xh-"] .card-header{border-right:1px solid rgba(0,0,0,.125)}.card-x .card-footer,.card-xf .card-footer,[class*=" card-x-"] .card-footer,[class*=" card-xf-"] .card-footer{border-left:1px solid rgba(0,0,0,.125)}@media (min-width:576px){.card-x-sm .card-body,.card-xf-sm .card-body,.card-xh-sm .card-body{flex-basis:50%;width:50%}.card-x-sm .card-footer,.card-x-sm .card-header,.card-x-sm .card-img-bottom,.card-x-sm .card-img-top{flex-basis:25%;width:25%}.card-xh-sm .card-header,.card-xh-sm .card-img-top{flex-basis:25%;width:25%}.card-xf-sm .card-footer,.card-xf-sm .card-img-bottom{flex-basis:25%;width:25%}}@media (min-width:768px){.card-x-md .card-body,.card-xf-md .card-body,.card-xh-md .card-body{flex-basis:50%;width:50%}.card-x-md .card-footer,.card-x-md .card-header,.card-x-md .card-img-bottom,.card-x-md .card-img-top{flex-basis:25%;width:25%}.card-xh-md .card-header,.card-xh-md .card-img-top{flex-basis:25%;width:25%}.card-xf-md .card-footer,.card-xf-md .card-img-bottom{flex-basis:25%;width:25%}}@media (min-width:992px){.card-x-lg .card-body,.card-xf-lg .card-body,.card-xh-lg .card-body{flex-basis:50%;width:50%}.card-x-lg .card-footer,.card-x-lg .card-header,.card-x-lg .card-img-bottom,.card-x-lg .card-img-top{flex-basis:25%;width:25%}.card-xh-lg .card-header,.card-xh-lg .card-img-top{flex-basis:25%;width:25%}.card-xf-lg .card-footer,.card-xf-lg .card-img-bottom{flex-basis:25%;width:25%}}@media (min-width:1200px){.card-x-xl .card-body,.card-xf-xl .card-body,.card-xh-xl .card-body{flex-basis:50%;width:50%}.card-x-xl .card-footer,.card-x-xl .card-header,.card-x-xl .card-img-bottom,.card-x-xl .card-img-top{flex-basis:25%;width:25%}.card-xh-xl .card-header,.card-xh-xl .card-img-top{flex-basis:25%;width:25%}.card-xf-xl .card-footer,.card-xf-xl .card-img-bottom{flex-basis:25%;width:25%}}.card .card-header{border-bottom:1px solid rgba(0,0,0,.125)}.card .card-footer{border-top:1px solid rgba(0,0,0,.125)}[class*=" card-x-"] .card-footer,[class*=" card-x-"] .card-header{border:none}[class*=" card-xf-"] .card-footer,[class*=" card-xh-"] .card-header{border:none}.card-x .card-header,.card-xh .card-header,[class*=" card-x-"] .card-header,[class*=" card-xh-"] .card-header{border-right:1px solid rgba(0,0,0,.125)}.card-x .card-footer,.card-xf .card-footer,[class*=" card-x-"] .card-footer,[class*=" card-xf-"] .card-footer{border-left:1px solid rgba(0,0,0,.125)}.card{flex-direction:row;flex-wrap:wrap;overflow:hidden}.card-body,.card-footer,.card-header,.card-img-bottom,.card-img-top{flex:1 1 100%}.card-footer,.card-header,.card-img-bottom,.card-img-top{border:none;border-radius:0;-o-object-fit:cover;object-fit:cover}.card-x .card-body,.card-xf .card-body,.card-xh .card-body{flex-basis:50%;width:50%}.card-x .card-footer,.card-x .card-header,.card-x .card-img-bottom,.card-x .card-img-top{flex-basis:25%;width:25%}.card-xh .card-header,.card-xh .card-img-top{flex-basis:25%;width:25%}.card-xf .card-footer,.card-xf .card-img-bottom{flex-basis:25%;width:25%}@media (min-width:576px){.card-x-sm .card-body,.card-xf-sm .card-body,.card-xh-sm .card-body{flex-basis:50%;width:50%}.card-x-sm .card-footer,.card-x-sm .card-header,.card-x-sm .card-img-bottom,.card-x-sm .card-img-top{flex-basis:25%;width:25%}.card-xh-sm .card-header,.card-xh-sm .card-img-top{flex-basis:25%;width:25%}.card-xf-sm .card-footer,.card-xf-sm .card-img-bottom{flex-basis:25%;width:25%}}@media (min-width:768px){.card-x-md .card-body,.card-xf-md .card-body,.card-xh-md .card-body{flex-basis:50%;width:50%}.card-x-md .card-footer,.card-x-md .card-header,.card-x-md .card-img-bottom,.card-x-md .card-img-top{flex-basis:25%;width:25%}.card-xh-md .card-header,.card-xh-md .card-img-top{flex-basis:25%;width:25%}.card-xf-md .card-footer,.card-xf-md .card-img-bottom{flex-basis:25%;width:25%}}@media (min-width:992px){.card-x-lg .card-body,.card-xf-lg .card-body,.card-xh-lg .card-body{flex-basis:50%;width:50%}.card-x-lg .card-footer,.card-x-lg .card-header,.card-x-lg .card-img-bottom,.card-x-lg .card-img-top{flex-basis:25%;width:25%}.card-xh-lg .card-header,.card-xh-lg .card-img-top{flex-basis:25%;width:25%}.card-xf-lg .card-footer,.card-xf-lg .card-img-bottom{flex-basis:25%;width:25%}}@media (min-width:1200px){.card-x-xl .card-body,.card-xf-xl .card-body,.card-xh-xl .card-body{flex-basis:50%;width:50%}.card-x-xl .card-footer,.card-x-xl .card-header,.card-x-xl .card-img-bottom,.card-x-xl .card-img-top{flex-basis:25%;width:25%}.card-xh-xl .card-header,.card-xh-xl .card-img-top{flex-basis:25%;width:25%}.card-xf-xl .card-footer,.card-xf-xl .card-img-bottom{flex-basis:25%;width:25%}}/*
* TABLE OF CONTENTS
*
* 1. DECLARING VARIABLES
* 2. CARD AND INFO MESSAGE UPDATES
* 3. CODE UPDATES
*/
/*
* -----------------------------------
* 1. DECLARING VARIABLES
* -----------------------------------
*/
var targetPart = document.getElementById("targetPart");
var targetDevices = document.getElementById("targetDevices");
var headerClass = document.getElementById("headerClass");
var footerClass = document.getElementById("footerClass");
var card = document.getElementById("card");
var cardHeader = document.getElementById("cardHeader");
var cardImage = document.getElementById("cardImage");
var cardBody = document.getElementById("cardBody");
var cardFooter = document.getElementById("cardFooter");
var cardImageBottom = document.getElementById("cardImageBottom");
var info = document.getElementById("info");
var cardClass;
/*
* -----------------------------------
* 2. CARD AND INFO MESSAGE UPDATES
* -----------------------------------
*/
var updateCardClass = function() {
cardClass = getCardClass();
card.className = "mb-3 card " + getCardClass();
};
targetPart.addEventListener("change", updateCardClass);
targetDevices.addEventListener("change", updateCardClass);
updateCardClass();
var updateCardHeader = function() {
var selected = headerClass.options[headerClass.selectedIndex].text;
cardHeader.style.display = selected == ".card-header" ? "block" : "none";
cardImage.style.display = selected == ".card-img-top" ? "block" : "none";
};
headerClass.addEventListener("change", updateCardHeader);
updateCardHeader();
var updateCardFooter = function() {
var selected = footerClass.selectedIndex;
cardFooter.style.display = selected == 0 ? "block" : "none";
cardImageBottom.style.display = selected == 1 ? "block" : "none";
};
footerClass.addEventListener("change", updateCardFooter);
updateCardFooter();
var updateMessage = function() {
var breakpointInPixels = getBreakpointByClassName();
info.style.display = breakpointInPixels == -1 ? "none" : "block";
info.innerHTML = getInfoMessage(breakpointInPixels);
};
targetDevices.addEventListener("change", updateMessage);
window.addEventListener("resize", updateMessage);
updateMessage();
function getCardClass() {
var cardClassSuffix = getCardClassSuffix();
return cardClassSuffix == null ? "" : getCardClassPrefix() + cardClassSuffix;
}
function getCardClassPrefix() {
var selected = targetPart.selectedIndex;
return selected == 0 ? "card-x" : selected == 1 ? "card-xh" : "card-xf";
}
function getCardClassSuffix() {
var selected = targetDevices.options[
targetDevices.selectedIndex
].text.toLowerCase();
if (selected.includes("small")) {
return "-sm";
} else if (selected.includes("medium")) {
return "-md";
} else if (selected.includes("extra large")) {
return "-xl";
} else if (selected.includes("large")) {
return "-lg";
} else if (selected.includes("none")) {
return null;
}
return "";
}
function getBreakpointByClassName() {
if (cardClass.endsWith("sm")) {
return 576;
} else if (cardClass.endsWith("md")) {
return 768;
} else if (cardClass.endsWith("lg")) {
return 992;
} else if (cardClass.endsWith("xl")) {
return 1200;
}
return -1;
}
function getInfoMessage(breakpointInPixels) {
return (
"Your browser width is " +
window.innerWidth +
"px. Card will become horizontal on width >= " +
breakpointInPixels +
"px."
);
}
/*
* -----------------------------------
* 3. CODE UPDATES
* -----------------------------------
*/
var code = document.getElementById("code");
var updateCode = function() {
code.innerHTML = getCode(
getCardClass(),
cardImage.style.display == "block",
cardHeader.style.display == "block",
cardFooter.style.display == "block",
cardImageBottom.style.display == "block"
);
};
targetPart.addEventListener("change", updateCode);
targetDevices.addEventListener("change", updateCode);
headerClass.addEventListener("change", updateCode);
footerClass.addEventListener("change", updateCode);
updateCode();
function getCode(
cardClass,
showCardImgTop,
showCardHeader,
showCardFooter,
showCardImgBottom
) {
// I wish I could utilize PHP on Codepen, but I can't so I'll just hard-code this in. #FML lol
return (
'<article class="card ' +
cardClass +
' mb-3">\n' +
(showCardImgTop
? ' <img src="https://picsum.photos/1024/768/?random" class="card-img-top">\n'
: "") +
(showCardHeader
? ' <header class="card-header">Hello World</header>\n'
: "") +
' <div class="card-body">\n' +
' <h5 class="card-title">Customizable Bootstrap Card</h5>\n' +
' <p class="card-text">\n' +
" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend sed ex vel lacinia.\n" +
" Morbi tincidunt vulputate ante sit amet mattis. Fusce pretium aliquam elit non sollicitudin.\n" +
" Fusce lacus dui, lacinia quis sollicitudin eu, venenatis ut ex. Aenean nunc orci, scelerisque\n" +
" et nunc et, ultricies tempus massa. Donec pellentesque mi ut lorem mattis, quis fringilla justo\n" +
" sollicitudin. Sed tristique nec odio nec convallis. Curabitur sollicitudin auctor enim sed fringilla.\n" +
" </p>\n" +
" </div>\n" +
(showCardFooter
? ' <footer class="card-footer text-muted">\n' +
' By <a href="https://ivanvinski.com" target="_blank">Ivan Vinski</a>\n' +
" </footer>\n"
: "") +
(showCardImgBottom
? ' <img src="https://picsum.photos/1024/767/?random" class="card-img-bottom">\n'
: "") +
"</article>\n"
);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.