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.
Related
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%;
}
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/
I have this code containing a row of bootstrap template cards:
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
I would like the cards to display with 4/row on large screens, 2/row on medium screens, and 1/row on small screens. When I remove the margin (m-3 class) from each card, this works perfectly. However, with the margin added, one or more of the cards ends up getting bumped down to another row, like the image below. How can I have these set numbers of cards in each row, while still allowing the cards to be spaced out nicely?
When you add side margin to columns then the calculation of bootstrap row gets disturbed, now the row have to accommodate that extra margin also with the columns and since the width of row here is fixed then it will shift the last column to next line. You can achieve the same effect by using padding in an inner container instead of using margin on cols.
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card w-100 inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
</div>
But you can apply margin to cols from top and bottom,
Hope it helps !
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.