I am trying to add the bootstrap card to my page. What happened is when the text is dynamic and larger than the card head, title is collapsed. I am looking for a way to fit the head same height across all the card so the next content align unique.
<div class="card-group">
<div class="card">
<img class="card-img-top" 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 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">
<img class="card-img-top" 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">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title Card title Card title Card title Card title Card title 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>
Related
I would like to run this code when the window width is 500 px or more and Run the other code block when the width is 499 px or less . How can I do this
500 px or more :
<div class="card text-center d-inline-block m-2" style="width: 13rem;" >
<img src=".." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" style="font-size: 1rem;">name</h5>
<p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
watch
</div>
</div>
499 or less :
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." 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>
You'd have to include both of them inside a div each, which would be conditionally rendered according to viewport size.
For the div with <= 499px, you'll need to enclose the whole part in:
<div class="d-md-none">
</div>
And for the div with >=500px, you'll need to enclose the whole part in:
<div class="d-none d-md-block">
</div>
JSFiddle
I'm new to design and Bootstrap so bear with me.
I want to have a number of cards with equal height and width (not fixed but responsive) on all rows, or put in another way, all cards should be as tall and wide as the biggest of them all . Any solution is welcome, not limited to Bootstrap.
In example below on large screens the row and card height is increasingly bigger and on medium screens almost every row has different height:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
<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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
<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>
<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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
<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>
<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>
<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>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
How about adding style="height: 200px; max-height: 200px; overflow-y: auto;" to all the divs with the class of card-body
Here's the code:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
<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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
<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>
<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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">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>
<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>
<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>
<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>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
This will make all the rows of the same height.
hello everyone I would like to float some text in the example of a boostrap card I have tried a multitude of things but without success
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<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 class="col-md-4">
<img src="..." alt="...">
</div>
</div>
</div>
Your image already floats? With your code as is? Though I would recommend putting the row inside the card body. Or are you looking for classic float behaviour where the text uses the full line below the image?
Here's your code with my suggestions - please use full page preview.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-4" style="max-width: 540px;">
<div class="card-body">
<div class="row g-0">
<div class="col-md-8">
<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 class="col-md-4 d-flex align-items-center justify-content-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" height="100" alt="...">
</div>
</div>
</div>
</div>
I have to mask the card image with transparent blue colour background.
code:
<div class="card bg-dark text-white">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<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">Last updated 3 mins ago</p>
</div>
</div>
I want to have a a h5 "Posts" at left and the button "Btn" at right, however the "Btn" is not at right is at the left of the .col div, do you know how to proper position the button at right? With 'justify-content-end' is not working.
Also I want to have 4 cards with equal width in each row, but do you know why the cards appear so long? Is not possible that the card is more like a square and not a rectangle?
Example: http://jsfiddle.net/1b790tL5/
HTML:
<div class="container">
<div class="row">
<div class="col">
<h5 class="display-5 font-weight-bold text-dark">Posts</h5>
</div>
<div class="col justify-content-end">
Btn
</div>
</div>
</div>
<div class="container mt-4">
<div class="card-deck">
<div class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
</div>
</div>
<div class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</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 class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</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 class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</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>
refer the image below. items take equal width when you use col class, in order to control the width add a number like col-1 to col-10 or 12 as per the framework.