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>
Related
Can you help me fix this Bootstrap 5 code to fit in all 16:9 full screen device (mobile and desktop/1080p/2160p chrome browser) to 100% width and 100% height? (and no scroll to right and no scroll to down) I read 100+ examples and tutorial about this and not found any working solution. All images are 16:9 ratio.
At 1920p width landscape mobile screen still need to scroll about 5% for right and down. But it's just spacing and no information in right and down. Also same as desktop too.
Ideal: first row about 40% height and second row is about 60% to fit 5 column in 1 row at same size. In the first column image should be fit this 40% total height.
Ideal sketch layout:
------------------------------------------------------
- -
- big-img-big-img -
- big-img-big-img have a nice day -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
------------------------------------------------------
- -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- text text text text text -
- -
------------------------------------------------------
The source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column vw-100 vh-100">
<div class="row justify-content-center row-cols-1">
<div class="card mb-4 justify-content-center" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-4">
<div class="card-body">
<h5 class="card-title">Have a nice day!</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center row-cols-5">
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 1</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 2</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 3</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 4</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 5</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ideal if 5 column fit the 100% width and no scroll to right.
Please help me how possible to fit in 1 screen without any scrolling right and down!
Seems like it's already responsive but need to fix to be better.
Thank you!
A couple of things about bootstrap:
If images in columns in a row have the same aspect ratio, they will have the same height.
The number of grid items in a row are 12.
So, if you want the 40% and 60%, then is either col-5 and col-7 or col-4 and col-8. This caters for the first row.
The second row is even more direct. You can just have one row and several columns with either col-2 or just col.
Here is what I mean:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
</div>
<div class="col-7">
Place content here.
</div>
</div>
<div class="row">
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
</div>
the picture of the website on mobile, and the problem
<div class="row">
<div class="col-md-7 col-xs-12">
<div>
<img class="img-responsive" src="https://www.thedrisco.co.il/octopus/Upload/images/Pages/restor-his%201.jpg" /></div>
<div style="display: inline-flex; padding-top: 45px;">
<img src="https://www.thedrisco.co.il/octopus/Upload/images/Pages/classic2%201%20(6).jpg" style="height: 240px;" /></div>
<div style="padding-right: 67px;">
<img src="https://www.thedrisco.co.il/octopus/Upload/images/Pages/classic2%201%20(5).jpg" style="height: 240px;" /></div>
</div>
</div>
</div>
I have this piece of code.. now, I need the images that are in inline flex to fit in a column instead of next to eachother on mobile, and the images to stretch to the size of the device of course. Any Ideas? I added an image for reference to what I'm talking about. Thanks in Advance!
When working with Bootstrap, it’s easiest to define each row separately, and then divide up each row into different columns based on the device, so you could have your restorer image on its own row and the two classic images in the same row.
<div class="container">
<div class="row justify-content-end mb-3">
<div class="col-12 col-md-9">
<img class="float-right w-100"
src="restor-his%201.jpg" />
</div>
</div>
<div class="row justify-content-end">
<div class="col-12 col-md-7 mb-3 mb-md-0">
<img class="float-right w-100" src="classic2%201%20(6).jpg" />
</div>
<div class="col-12 col-md-5 order-md-first">
<img class="float-right w-100" src="classic2%201%20(5).jpg" />
</div>
</div>
</div>
To get the ratio right between the two classic images, I did reduce the width from 430 to 419px, rather than setting the height to a fixed value.
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 a row consisting of 8 cards.
I want to have all these in single line.
There is a margin of column size 2 on left side and I have set each card of size 1 (so 8 + 2 = 10)
But then, my row is all messed up.
Currently my code for border is
<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-lg-1 text-center">
<div class="card border-secondary mb-3" style="width: 10rem;">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
</img>
<div class="card-block">
<div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
</div>
</div>
</div>
</div>
I want the card to have this width (so not card to be small)..It can overflow on the right side of the screen..
How do i do this?
The problem has to do with your inline style of width:10rem. It's going to supersede the width of col-lg-1 when it is greater than that column width. Removing this inline style results in expected behavior.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
For the purposes of this example I've changed your column breakpoints to something that works better when you choose 'Run Code Snippet'. I suspect you were applying an inline width because col-lg-1 is too small; that being the case I recommend you consider a larger column breakpoint in lieu of inline styles overriding grid behavior.
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.