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.
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>
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.
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>
I have simple Bootstrap 4 card with footer that has some text and icon. Here is the code:
<div class="card ">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer ">
<i style=" font-size: 2.5em;" class="fab fa-facebook "></i>
<span class="float-right" >some text</span>
</div>
</div>
If I place fa icon code it expands the footer. What I want that the icon is simply overlayed on footer area (kind of floating on it) without disturbing the size of footer i.e the size of the footer to remain the same as if the icon code is not placed. There are multiple cards on page with same footer.
How to accomplish this ?
You can remove your icon element from the normal elements flow by set its parent to position: relative and the icon element to position: absolute. This way, your icons position depends on the footer and you can adjust the position e.g. with top.
If you have multiple icons, you can either adjust the position of every single icon or place them in a container <div> which then is set to position: absolute instead of the icons.
.card-footer {
position: relative;
}
.icons {
position: absolute;
top: -.35rem;
font-size: 2.5em;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card ">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer">
<div class="icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
<span class="float-right">some text</span>
</div>
</div>
Well there technically is multiple ways to achieve this.
Either the icon needs a set position: absolute attribute.
But you could also have a set height on your footer element height: 300px for example. But that might move your other content around (unsure if that is what you want).