I have an issue with Bootstrap 5. I'm trying to round my .card-img-top with the class rounded, but the class doesn't work at all. Anyone know why?
Here is my code:
<div class="container w-100">
<div class="row">
<div class="col-md-3 mx-auto my-5">
<div class="card bg-secondary text-line">
<div class="card-body rounded">
<img src="./images/image-equilibrium.jpg" alt="Image Equilibrum" class="card-img-top rounded p-2">
</div>
</div>
</div>
</div>
</div>
Related
Is there are any solution to make different size images be the same height on a card? Problem is that content is coming from cms, and I do not know what the image size will be and how much text will be in the card.
<div class="card">
<div class="card-body h-100">
<div class="row d-flex h-100 mx-0">
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" class="img-fluid"
alt="image">
</div>
<div class="d-flex flex-column col-12 flex-grow-1 px-0">
<div class="mb-auto">Will be content...</div>
<a href="link" class="btn card-btn btn-outline-secondary"
role="button">Button</a>
</div>
</div>
</div>
Here is how it looks now:
example here
images could be higher or lower. Can't fix them in px. I need that card will stretch, not image making shorter.
Add these in your code "
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" style="object-fit: contain;"
alt="image">
</div>
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I'm new to Bootstrap and am struggling to figure out why my left column height is not displaying as the full height of the parent div. From what I understand in the docs, you just add h-100 as a class to have it take up 100% of the height relative to the parent, but I'm obviously not understanding it right. It probably has something to do with the fact that it's a block element?
<div class="container vh-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
<div class="col-6 bg-secondary h-100">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
There are too many row divs, and a missing h-100 on the parent...
<div class="container vh-100">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="row g-0 d-flex justify-content-center w-75 align-items-center border border-dark h-100">
<div class="col-6 bg-secondary h-100 border">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
https://codeply.com/p/RyTy1s0AF8
Note, only columns should be the immediate children of row.
<div class="container vh-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
<div class="col-6 bg-secondary vh-100">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="https://cdn.pixabay.com/photo/2021/07/21/07/09/cygnet-6482420_960_720.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
Do you mean something like this?
The bg-secondary is now filling the entirety of the div.
I am trying to display a list of card width boostrap. I made my html like so :
<div class="card-deck">
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div>
etc...
</div>
</div>
The problem is, margin seems to expand the cards' width. So it makes someting like that... (it should display 4 cols)
screen 1
If I remove margins, it makes something like...
screen 2
Thanks for your help !
Thanks for your answers. However it does not solve my problem :(
First solution :
I cannot do that easily because I get them from a database so I don't know how many elements will be returned and I do really want to make a new deck card every 4 cards.
The justify-content-center is not really elegant and it shifts the problem
Second solution :
It looks like my second screen : https://i.stack.imgur.com/erkcT.jpg
You must use padding, don't margin if you don't want any cards size change.
change
<div class="card card-widget col-sm-2 m-2">
with this
<div class="card card-widget col-sm-2 p-2">
<div class="card-deck">
<div class="card card-widget col-sm-2 p-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div>
etc...
</div>
</div>
Margin can not increase the width of card like that. However, it will definitely increase container's width.
APPROACH 1: Check the code below. It will assign equal widths to the cards.
NOTE : It is working like row-column feature of bootstrap. So you have to add n number of card elements in a card-deck for n number of columns.
<div class="card-deck mx-2 mt-2">
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
</div>
<div class="card-deck mx-2">
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
</div>
APPROACH 2: In case you don't want to change card's width :
<div class="card-deck m-2 mb-0 justify-content-center">
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
</div>
(Bootstrap 5)
I was able to solve the problem by wrapping the card in a column first (which is what the documentation recommends). This appears to apply an mx-2 margin as a default, though I can't actually find out why this is the case. In any case it allowed me to get a margin between cards without breaking the grid.
<div class="container">
<div class="row">
<div class="col-lg-4 my-2">
<div class="card">
</div>
</div>
<div class="col-lg-4 my-2">
<div class="card">
</div>
</div>
...etc
</div>
</div>
I thought what I'm trying to do would be pretty easy to do but I just can't make it work.
I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...
Here is a picture of what I'd like to acheive
Example
Heres code that almost works
<div class="card text-center" *ngFor="let event of eventActivities">
<div class="card-header pull-left">
<img src="..." alt="">
Title </div>
<div class="card-block">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="card-footer text-muted">
FOOTER
</div>
</div>
There are a few different ways you could do this. Here's one way using the flex-row and flex-wrap utility classes to change the layout of elements inside the card...
https://www.codeply.com/go/l1KAQtjjbA
<div class="card flex-row flex-wrap">
<div class="card-header border-0">
<img src="//placehold.it/200" alt="" />
</div>
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="w-100"></div>
<div class="card-footer w-100 text-muted">
FOOTER
</div>
</div>
Here's another approach using the grid...
<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
</div>
</div>
<div class="card-footer w-100 text-muted">
Footer stating cats are CUTE little animals
</div>
</div>
https://www.codeply.com/go/l1KAQtjjbA
I'm not sure why you have text-center as nothing it centered in the desired example image.
HTML:
<div class="card">
<div class="card-horizontal">
<div class="img-square-wrapper">
<img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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 class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
CSS:
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
Result:
Keep in mind that the class pull-left is now float-left in Bootstrap version 4.