I use cards for images in my carousel, and I'd like to make the height of each card equivalent.
Using the class h-100 doesn't work.
Changing any of the p tag content makes the size of the card different from the others whilst I'd like it to have a fixed size.
I'm looking forward to any tips and solutions you might come up with.
Thanks.
Below is my HTML code :
<div class="wrapper">
<div class="related-carousel section-padding owl-carousel">
<div class="card_new h-100" style="">
<img src="" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">..........................</p>
</div>
</div>
<div class="card_new h-100" style="">
<img src="" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">..............................</p>
</div>
</div>
<div class="card_new h-100" style="">
<img src="" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">.........................</p>
</div>
</div>
</div>
</div>
try
.owl-carousel {display: flex;}
.card_new{
display: flex;
flex: 1 0 auto;
height: 100%;
}
Related
I have simple section with card with image and title. How can I fix image size inside the card, so it stays the same no matter what is the actual size of the original image?
<section class="page-section bg-primary">
<div class="container mx-auto mt-4">
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-5 mt-5">Card section</h2>
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="~/images/img.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
</div>
Just put the Width of the image 100% so it will take 100% of its father (card) width or you can also use the max-width exp:
<img style="max-width: 100%;"
Inside the tag
<img src="~/images/img.jpeg" class="card-img-top" alt="..." style="width:100%;">
or with css in a class:
css:
.myimage{
width:100%;
}
<img src="~/images/img.jpeg" class="card-img-top myimage" alt="...">
You can size between 1% - 100% to the parent div/tag.
I am using Bootstrap 4 and I have the following Bootstrap code block:
<div class="card-body text-success">
</div>
I need to create an image gallery: 3 horizontal boxes of the same size and 2 vertical boxes, so I tried the following code:
<div class="card-body text-success">
<div class="row">
<div class="col-4">
Your text
</div>
<div class="col-4">
Your text
</div>
<div class="col-4">
Your text
</div>
</div>
<div class="row">
<div class="col-4">
Your text
</div>
<div class="col-4">
Your text
</div>
<div class="col-4">
Your text
</div>
</div>
</div>
But this generates the gallery with some space between images. I need images without any space between. What could I do to achieve this?
CSS
.borders{
border: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
HTML
<div class="card-group">
<img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
<img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
<img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
</div>
<div class="card-group">
<img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
<img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
<img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
</div>
Preview Screenshort
You could also consider doing your gallery with plain CSS. Witch makes the HTML so much nicer:
.gallery {
width: 600px;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-gap: 0;
}
.gallery > * {
width: 200px;
}
<div class="gallery">
<img src="https://source.unsplash.com/random/200x200?1" alt="">
<img src="https://source.unsplash.com/random/200x200?2" alt="">
<img src="https://source.unsplash.com/random/200x200?3" alt="">
<img src="https://source.unsplash.com/random/200x200?4" alt="">
<img src="https://source.unsplash.com/random/200x200?5" alt="">
<img src="https://source.unsplash.com/random/200x200?6" alt="">
</div>
Try this way:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-group flex-wrap">
<div class="card border-0">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
</div>
<div class="card border-0">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
</div>
<div class="card border-0">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
</div>
</div>
<div class="card-group flex-wrap">
<div class="card border-0">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
</div>
<div class="card border-0">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
</div>
<div class="card border-0">
<!-- this is empty space -->
</div>
</div>
I don't understand how to change the height of my column in a way to have three elements in my first and second column. I'm new to design element so a little help would be very helpful for me
Mock-up that I want to create:
My code looks like this:
<div class="card-columns pl-5 pr-5">
<!-- col 1-->
<div class="mb-3">
<h1>Lorem Ipsum</h1>
</div>
<div class="card">
<img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
</div>
<!-- col 2-->
<div class="card">
<img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
</div>
<div>
<span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
style="padding-left: 10px; transform: rotate(270deg);"> </span>
</div>
<!-- col 3-->
<div class="card" style="width: 300px;height: auto;">
<img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
</div>
<div class="card" style="width: 300px;height: auto;">
<img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
</div>
</div>
I hope you can help me to understand how Masonry work in a way to help me with this code.
Bootstrap Masonry using .card-columns is not so flexible solution for this case. Better to use simple Bootstrap grid system. I made three columns, which are .col-sm-6, .col-sm-4 and .col-sm-2. As you probably now, BS grid contains of 12 columns, so we have 6+4+2=12 columns here. In my example the sizes of the blocks will depend on the proportions of image inside. .img-fluid class makes images max-width: 100%; so thew will not tear the parent block.
This example made by using only Bootstrap 4 classed, for instance. If you want to add some specific setting - you will need to write additional CSS classes and their properties.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-5">
<div class="row">
<!-- col 1-->
<div class="col-sm-6 px-1">
<div class="mb-2">
<h1>Lorem Ipsum</h1>
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x600">
</div>
<div class="mb-2 text-right">
<img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
</div>
</div>
<!-- col 2-->
<div class="col-sm-4 mt-1 px-1">
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x600">
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x1000">
</div>
<div class="text-right">
<span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
</div>
</div>
<!-- col 3-->
<div class="col-sm-2 px-1">
<div class="mb-2 mt-4">
<img class="img-fluid" src="https://via.placeholder.com/1000x1300">
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x1100">
</div>
</div>
</div>
</div>
More about Bootstrap technologies I used in this exapmple:
Grid https://getbootstrap.com/docs/4.0/layout/grid/
Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
image-fluid https://getbootstrap.com/docs/4.0/content/images/
Sizing https://getbootstrap.com/docs/4.0/utilities/sizing/
How do I make images take up the entire width of a card-img in a Bootstrap 4 card? What I want to do is set the height of the card-img and have the width be automatically filled and the image vertically centered in the card. I need to do this because I have multiple cards with different images of different sizes in a row. Right now, my code looks like this:
<div class="row">
<div class="col-6">
<div class="card h-100 border-0 shadow">
<div class="card-img-top overflow-hidden">
<img src="..." alt="" class="img-fluid" />
</div>
<div class="card-body">
<p>Card content goes here</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 border-0 shadow">
<div class="card-img-top overflow-hidden">
<img src="..." alt="" class="img-fluid" />
</div>
<div class="card-body">
<p>Card content goes here</p>
</div>
</div>
</div>
</div>
So in this scenario, the two imgs are different sizes. I want the two cards to be the same height, and I want the images to fully take up the card-img whether they are longer than they are wide, or wider than they are long.
By far the simplest form of image equality in size is using aspect ratio's. Bootstrap has an embed utility that you can utilise for such a case. It's shipped with 16x9 and 4x3 aspect ratio but you can easily add your own.
In this demonstration I've provided two images, one landscape and the other portrait, both of which appear the same and fill the available aspect ratio.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 border-0 shadow">
<div class="card-img-top">
<div class="embed-responsive embed-responsive-4by3">
<div class="embed-responsive-item">
<img src="https://placeimg.com/640/480/any" alt="" class="img-fluid w-100" />
</div>
</div>
</div>
<div class="card-body">
<p>Card content goes here</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 border-0 shadow">
<div class="card-img-top">
<div class="embed-responsive embed-responsive-4by3">
<div class="embed-responsive-item">
<img src="https://placeimg.com/480/640/any" alt="" class="img-fluid w-100" />
</div>
</div>
</div>
<div class="card-body">
<p>Card content goes here</p>
</div>
</div>
</div>
</div>
</div>
If I have a card inside a column, that needs to have an image with a set height, how do I make it not stretched out, as it currently is in my code example? And without having to have a set width on the image because I want it to be replaceable.
What am I missing and/or doing wrong? Thanks!
.card-block {
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="https://placeimg.com/640/480/animals" alt="Card image cap" height="200">
<div class="card-block text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
Your best solution is to instead of placing the image directly onto the page you can create an empty div and then set the background image to be https://placeimg.com/640/480/animals then set its size to cover and then it will cover the height and width of the div you have specified
so for example...
css
card-image-container{
background: url('https://placeimg.com/640/480/animals') 50% no-repeat;
background-size: cover;
}
Making an image responsive in Bootstrap 4 is very easy:
You just add the img-fluid class to the image.
HOWEVER... responsiveness comes at a cost and that is: You cannot set a minimum height for a responsive image (because that in itself would make the image non-responsive).
Luckily, there are a few workarounds for managing the size of your card image while still keeping it responsive. You can do that by manipulating the horizontal padding (use the px-* class and swap the * for a number between 0 and 5) as well as increasing or decreasing the column width.
Take a look at the 3 examples here:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row mt-3">
<div class="col-md-6">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 px-5">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Column with px-5 class</p>
<p class="card-subtitle">to make the image smaller</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-5 px-5">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Smaller column AND px-5 class</p>
<p class="card-subtitle">to make the image even smaller!</p>
</div>
</div>
</div>
</div>
</div>
Usually, when using Bootstrap you should use div with the class of container or container-fluid and after that div with the class of row. This worked for me
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="https://placeimg.com/640/480/animals"
alt="Card image cap" height="200">
<div class="card-body text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
</div>
</div>
Cards know to be pain in the.. But I hope this helps.