I have a web page that contain images in bootstrap card but some of them in landscape and some in portrait so how I force all images to show in portrait preferably using only css or bootstrap 4 or html5.
here is my code:
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
<img src="images/1.jpeg" alt="image" class="card-img-top img-responsive">
</div>
This is going to require some form of cropping using a div element. It is hard to tell exactly what you are after without seeing the website, but here is one potential solution using height:0; and a percentage padding-bottom to create a div with a fixed aspect ratio and then using a background image instead of an image.
If you wanted to still use an image you would either need to use Javascript or the new object-fit CSS property, but object-fit isn't supported by IE.
.portrait {
height:0;
padding-bottom:150%;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
<div class="portrait" style="background-image:url(https://via.placeholder.com/200x300);"></div>
<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>
</div>
</div>
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
<div class="portrait" style="background-image:url(https://via.placeholder.com/300x200);"></div>
<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>
</div>
</div>
Related
I have added custom CSS to flip the image n show text in a bootstrap site, but the image falls out of bootstrap card.
One solution I found was to add image height, but that makes its irresponsive.
I want the image in the card + want it to be responsive.
It's a temporary portfolio site I am trying to develop to learn bootstrap.
problem image
.flip-container,
.front,
.back {
width: 100%;
/* height: 400px; */
}
```
```
<div class="card-body text-center">
<h3 class="card-title mb-3">GCET Prep App</h3>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="1.png" class="img-fluid" alt="#" />
</div>
<div class="back">
<p class="card-text">
text
</p>
</div>
</div>
</div>
<p class="card-text">
(Deployed on playstore)
<br />
An app for Gcet Preparation
</p>
<a
href=""
target="_blank"
class="btn btn-danger me-5"
>Playstore</a>
</div>
Zip file of full project drive link
add style="height: 100%;" to .card class
I was able to fix the issue by taking the front (image) as relative (position) n back (text) as absolute.
In my project, I used bootstrap v.5 cards. I wanted to make the image a perfect circle and I used bootstrap class="rounded-circle" but the output image appears oval in shape. here is my code,
<img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} />
How do I fix this problem ?
You can use class ratio ratio-1x1 which is pre-defined classes in Bootstrap-5 and if your image is not in Square format then you need to write single line of css code like object-fit: cover.
.img-cover{
object-fit: cover;
object-position: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container py-4">
<div class="row g-4 row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="col">
<div class="card">
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
<img src="https://i.stack.imgur.com/fcbpv.jpg?s=256&g=1" class="card-img-top img-cover" alt="Raeesh">
</div>
<div class="card-body">
<h5 class="card-title">Raeesh Alam</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>
View More
</div>
</div>
</div>
</div>
</div>
as far as I know, rounded-circle class is just border-radius:50%. So if your image dimensions are not equal (like 50 x 50). you won't get perfect circle.
You can give your image some width and height to fix it's dimensions.
like :
img:{
width:50px;
height:50px
}
or
<img id="myImage" src=".." >
#myImage{
width:50px;
height:50px
}
Create your css code and remove bootstrap rounded class.
<img src="elonMusk.png" class="card-img-top" alt="elonMusk">
and in css file
img {
border-radius: 50%;
}
Use the border-radius property to add rounded corners to an image. 50% will make the image circular:
In .css:-
img {
border-radius: 50%;
}
For more follow this link
put equal height and width...
<img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk}
style={{height:"200px", width:"200px"}} />
Just use card component from Bootstrap and update little code for Circle image.
Bootstrap Card Component Documentation: https://getbootstrap.com/docs/5.1/components/card/
Already updated below code snippet, i hope it'll help you out. Thank You
.card .card-img-top {
height: 140px;
width: 140px;
}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card" style="width: 18rem;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" class="rounded-circle card-img-top mt-3 mx-auto img-thumbnail">
<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>
I have a simple page with a navbar + one main-body div + one footer.
What I am trying to achieve is the navbar and footer remain in that position no matter what, while only the main white space show these bootsrap cards, but in horizontal position max-4 per row. What I managed so far is:
<div="wrap>
<navbar boostrap>
</navbar>
<form>
<div class="card">
</div>
</form>
</div>
<footer>
</footer>
And applying this css for the wrap div and the footer:
WRAP:
.wrap {
min-height: 100%;
margin-bottom: -12vh;
padding-bottom: 12vh;
}
Footer:
.footer {
text-align: center;
height: 12vh;
width: 100%;
background-color: #393e46;
}
What I did after is adding a class to my form that encapsualtes the bootsrap card and in css doing this:
.form-events {
display: flex;
flex-wrap: wrap;
}
Is there a better practise or my solution works??
You can try to do as follows if you are using Bootstrap.
Keep the navbar and footer as it is. Only thing you will need to work on is the main whitespace part.
First create a <div></div> which has a class of container as such <div class="container"></div>
Then you can put another <div></div< element with a class of row, so that your cards will be placed in same row horizontally <div class="row"></div>
Next you can use the col classes that Bootstrap offers, to create a div element for each of your cards <div class="col"></div>. It is basically used for defining how many elements you will need in a single row and it makes your content responsive.
Be sure to check the documentation here if you need more details: Bootstrap Grid System
Finally you can put your cards. Just remember to wrap a single card inside each <div class="col"></div>
Below you can find the code example of how I did it. Run the snippet in full page to see the cards horizontally; otherwise, it will show then stacked on top of each other because of screen size
From my experience, I would suggest using container class for a div to put your elements in, especially card elements.
JSFiddle Demo Here
EDIT : If you have a problem where your cards stack on top of each other while resized, wrap all of them up in "card deck" class inside a <div> element
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row ">
<div class="card-deck">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
Card link
Another link
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
Card link
Another link
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
Card link
Another link
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You could add the position:fixed line to your ".footer" CSS class like so.
.footer {
position:fixed;
bottom:0;
left:0;
text-align: center;
height: 12vh;
width: 100%;
background-color: #393e46;
}
By doing this it will stay positioned at the bottom of the page even if a user scrolls down the page.
Hi I am having some trouble with bootstrap image sizing.
If I pass in a images with smaller dimensions it is "blowing them up" to fit the card and they can become blurry.
Here is the html in question:
{% for item in book_list %}
The Arsonist
Lorem Ipsum...
More Info
{% endfor %}
~~~
Now what is happening is when I render this I end up with this:
And whilst it might be difficult to tell from the screenshots the card-img-top are much larger than the source image this is not what I want for two reasons:
I would like the cards to be smaller, making them smaller and adding some white space either side would work fine.
It is resizing the images too large and this can make the images look blurry, especially when the resolutions are small to begin with and then they are blown up.
Can anyone tell me how I can make the cards images smaller whilst still staying the same size as the other cards images (which will have similar but not identical resolutions)?
I am looking for something like this (image on top is what I currently have and the black box is my fullscreen). It doesn't have to be 5 cards in a row or the margins don't need to be that big it is to just give an idea of what I roughly want.
It shouldn't matter what the dimensions of the original image is it should display like that, so for example if I put in a 2000x3000 image it shouldn't take up more space on the screen than a 200x300.
What I have tried so far:
I have tried adding the custom CSS and playing around with the height
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
as well as trying the style attribute style="width: 100%;" which I figured might take the original image width as the width in the card and the height would follow, however in both cases it is still getting blown up. But nothing is working for me.
So to summarise my question again:
How can I stop my card top images "blowing up" regardless of the dimensions of the image?
I am new to this kind of thing and new to this site so let me know please if I need to do more!
Thank you.
The only thing that worked from me was changing class from "card-img-top" to "card-img"...
<img src="pic.jpg" class="card-img" style="width: 200px;">
This will do:
<div class="container-fluid">
<div class="row mb-5">
<div class="col py-1 d-flex align-items-stretch">
<div class="card m-3">
<img src="https://www.booktopia.com.au/blog/wp-content/uploads/2018/12/the-arsonist.jpg" class="card-img-top" style="width: 100%;" alt="image">
<div class="card-body">
<h5 class="card-title">The Arsonist</h5>
<p class="card-text">Lorem Ipsum...</p>
More Info
</div>
</div>
<div class="card m-3">
<img src="https://www.booktopia.com.au/blog/wp-content/uploads/2018/12/the-arsonist.jpg" class="card-img-top" style="width: 100%;" alt="image">
<div class="card-body">
<h5 class="card-title">The Arsonist</h5>
<p class="card-text">Lorem Ipsum...</p>
More Info
</div>
</div>
<div class="card m-3">
<img src="https://www.booktopia.com.au/blog/wp-content/uploads/2018/12/the-arsonist.jpg" class="card-img-top" style="width: 100%;" alt="image">
<div class="card-body">
<h5 class="card-title">The Arsonist</h5>
<p class="card-text">Lorem Ipsum...</p>
More Info
</div>
</div>
<div class="card m-3">
<img src="https://www.booktopia.com.au/blog/wp-content/uploads/2018/12/the-arsonist.jpg" class="card-img-top" style="width: 100%;" alt="image">
<div class="card-body">
<h5 class="card-title">The Arsonist</h5>
<p class="card-text">Lorem Ipsum...</p>
More Info
</div>
</div>
<div class="card m-3">
<img src="https://www.booktopia.com.au/blog/wp-content/uploads/2018/12/the-arsonist.jpg" class="card-img-top" style="width: 100%;" alt="image">
<div class="card-body">
<h5 class="card-title">The Arsonist</h5>
<p class="card-text">Lorem Ipsum...</p>
More Info
</div>
</div>
</div>
</div>
</div>
see:https://jsfiddle.net/sugandhnikhil/rx4p8zgc/1/
As you can see, i do have 3 bootstrap cards having 3 images with different heights. I want to make the images having same height compared to others (like the bigger one "takes the lead" and all the other one in the row adapting to this bigger one).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="/images/produits/1" alt=""><hr>
<div class="card-body">
<h6 class="card-title">
slt la mif
</h6>
<small class="text-muted">Puissance : 10 à 100W</small>
</div>
</div>
</div>
I already put the h-100 class in the card div but it only adapts the card's height, and I want the images to be adapted (in order to not have the blank after the text), how to do that pls?
Bootstrap class card-body has property flex: 1, it means, that this element also grows for available space.
You can add some special class, for example to row, or higher, where you use card, to modify that parameter. Something like that.
.special .card-body {
flex-grow: 0;
}
Also wrap link image with div which has class="flex-fill", it makes grow the link images.
Look into the snippet, I;ve added special class to row, and set different height to link images to illustrate the idea.
UPDATE. Made link images center
Play with flexboxes. For example: add to div which wraps <a> class d-flex it will make this div with display: flex. And then you can add to this div classes justify-content-center and align-items-center, but I prefer in your case to add class m-auto to <a>, it gives margin: auto, which make element centralized with flex parent. Look into snippet.
.special .card-body {
flex-grow: 0;
}
.img_mock1 {
padding: 50px;
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row special">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<div class="flex-fill d-flex">
<span class="img_mock1"></span>
</div>
<hr>
<div class="card-body">
<h6 class="card-title">
slt la mif
</h6>
<small class="text-muted">Puissance : 10 à 100W</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<div class="flex-fill d-flex">
<a href="/led/catalogue/produit/1" style="height:300px;" class="m-auto">
<img src="" alt="">
</a>
</div>
<hr>
<div class="card-body">
<h6 class="card-title">
slt la mif
</h6>
<small class="text-muted">Puissance : 10 à 100W</small>
</div>
</div>
</div>
</div>
Use the following CSS
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
The object-fit: cover; enables zoom instead of image stretching.
Give fix height suppose 150px to the wrapper of image(anchor tag). Then for the image tag use max-width: 100%, height: auto, display: block
give the image div a fixed height, use the height preference of the largest image to put a fix height on the dive of the image, this will allow the all to show the same way.