When I put a card inside of a row the image disappears and when its outside the row the image appears. Have no idea why. When its outside the row it shows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container" id="mainContainer">
<div class="row mt-5 custom-row2 p-5 align-items-center">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
Related
im trying make a card like this:
Example Card
but, i can't to do that the items are on the bottom:
My Card
Code:
<div class="container">
<div class="row row-cols-1 row-cols-md-2 g-3 my-3">
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase text-bg-dark">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
I tried with d-flex and flex-column in class="card-img-overlay" and mt-auto en class="btn" but don't work
You could add the following built-in classes into .card-img-overlay element:
d-flex flex-column align-items-start justify-content-end
Here the reference: https://getbootstrap.com/docs/5.3/utilities/flex/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="card text-uppercase text-bg-dark" style="width: 500px;">
<img src="https://rb.gy/18mzdx" class="card-img" alt="...">
<div class="card-img-overlay d-flex flex-column align-items-start justify-content-end">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
I want to align the "demo" and "github" button group to the bottom left of the card, I don't want it to move with the amount of text written in tag. Please help. I am using HTML, CSS, and Bootstrap 5.
I did try vertical alignment, and justify content but, maybe I used it wrong. Please help.
The photoshopped image below is the where I want the 'demo' and 'github' button group to be placed irrespective of the length of content in <p> tag
Here is my code
With the footer
You just need to utilize the .card-footer, see card layout section of the docs.
Here is an example using .card-footer.bg-white.border-0 as a wrapper around your .btn-group:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row row-cols-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
</div>
I need to arrange some cards, in a web page with Boostrap 4.
Can you help me?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 03
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 04
</div>
</div>
</div>
</div>
I'm Tried to make bootstrap 4 card like a below image , but my card is not perfect, any idea for how to do correctly this one?
My code:
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
</div>
</div>
You can try as below snippet in Bootstrap-v4.
[Check on Full Page]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-3">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3 py-3">
<div class="card text-white bg-primary h-100 rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-9">
<div class="row">
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should use container and row which based bootstrap grid system. To makes sure your cards are placed right position, Here my sample code (Please run as full screen) the result should be like this image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<div class="container" style="width: 1240px !important; max-width: 960px !important;">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem; height: 100%">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand correctly, you can use flex classes to achieve what you described.
<style>
.box-1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
.box-2 {
width: 200px;
height: 210px;
border: 1px solid red;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="d-flex">
<div class="mr-3">
<div class="box-2">card 01</div>
</div>
<div class="d-flex">
<div class="mr-3">
<div class="box-1">card 02</div>
<div class="box-1 mb-0">card 05</div>
</div>
<div class="mr-3">
<div class="box-1">card 03</div>
<div class="box-1 mb-0">card 06</div>
</div>
<div>
<div class="box-1">card 04</div>
<div class="box-1 mb-0">card 07</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should refer the grid system of bootstrap
(Run as full size)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To get that grid system you will need to create a grid of your own. You can do this with columns and rows. You can have columns inside of rows, and move each column or row to where you want it. I outlined the basic structure in the snippet below (I used some sample content from G.W Kalpa Sathjana De Silva's code)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a card-deck where I would like to keep the same adaptive width. The issue is that when "rows of cards" that can handle 3 cards, using 5 cards will left the two remaining cards taking the whole width of the container.
What it should look like (iPad example)
What it look like (iPad example)
Here is the same issue on a widescreen : https://i.imgur.com/zJtXhTl.png
The code (5 cards example)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
<div class="w-100 d-none d-xl-block"><!-- wrap every 4 on xl--></div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
I saw this https://github.com/twbs/bootstrap/issues/19650 and tried using
.card {
width: initial;
}
but no luck.
As explained in the docs, card-deck's aren't yet responsive so it's going to be hard to get the desired layout without a lot of extra CSS. This is because of the way the flexbox children (cards) grow in width.
Use full height cards in the grid instead...
<div class="row">
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
.... (more columns with cards)
</div>
https://www.codeply.com/go/hs12dUxHnQ
I am using bootstrap 4 beta.
I have a list of cards. I want them to be of fixed width, but the height will be variable depending on the content.
The number of cards can be from 1 to n.
The effect I want is for the cards to be be laid out from left to right until screen space runs out, then wrap to next line.
I have tried all the different options listed on the bootstrap 4 example page for cards, but they don't seem to wrap.
How can I achieve this?
The below example shows them 3 across, with a lot of space between them.
<div class="card-columns">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card"style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
After working with this for some time, the floating solution I came up with was unsatisfactory as in some cases, there was a large amount of space below some cards.. After reviewing bootstrap 4 cards, I found a feature that does exactly what I wanted it to: "card-columns"
It lines up your cards into three columns, and re-arranges to one column when the screen size is small.
Bootstrap Docs on card-columns
I came up with a floating-card class that works:
<style>
.floating-card {
float: left;
margin: 5px;
max-width: 300px;
}
</style>
Example usage:
<div class="floating-card sortable">
<section class="box-typical task-card task">
<div class="task-card-photo">
<img src="img/img-task.jpg" alt="">
</div>
<div class="task-card-in">
<div class="btn-group task-card-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="font-icon-dots-vert-square"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
</div>
</div>
<div class="task-card-title">
Create new webpage for sales and marketing stuff
<span class="task-card-title-label">(BIG)</span>
</div>
<div class="progress-compact-style">
<progress class="progress" value="25" max="100">
<div class="progress">
<span class="progress-bar" style="width: 25%;">25%</span>
</div>
</progress>
<div class="progress-compact-style-label">37% done</div>
</div>
<div class="task-card-tags">
Default
Primary
Success
</div>
</div>
<div class="task-card-footer">
<div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
<div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
<div class="avatar-preview avatar-preview-32">
<a href="#">
<img src="img/photo-64-2.jpg" alt="">
</a>
</div>
</div>
</section><!--.task-card-->
</div>
Here the solution...
use bootstrap row and col's to acheive this, please follow below code.
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Here's some code you can play with, based on Srikanth's suggestion. You can adjust the class="col-lg-3 col-md-4 col-sm-6 to have more or less cards display based on the width of your browser. I've also included a width display to show the pixels width.
Of course adjust the php loop quantity to test more or less number of cards.
<body>
<center>Width: <span id="width"></span></center>
<br>
<div class="container">
<div class="row">
<?php
for ($x = 0; $x <= 10; $x++) {
$card = <<<EOF
<div class="col-lg-3 col-md-4 col-sm-6" style="margin-bottom:10px;">
<div class="card">
<img class="card-img-top" src="your_image.jpg" alt="Card image cap">
<div class="card-block" style="margin:5px;">
<h4 class="card-title">Card title {$x}</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<center class="link">Join</center>
</div>
</div>
</div>
EOF;
echo $card;
}
?>
</div>
</div>
<script>
$(window).resize(function() {
var viewportWidth = $(window).width();
$('#width').html(viewportWidth);
});
</script>
</body>
With version 5.1 Bootstrap has moved away from the CSS technique used in version 4. Here they provide an example how to make use of the Masonry plugin, see this snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
</head>
<body>
<main class="container py-5">
<h1>Bootstrap and Masonry</h1>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3">
<figure class="p-3 mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white text-center p-3">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3 text-end">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>