Currently i am working on a eCommerce site (i am newbie).
i am using bootstrap for basic styling.
the structure is given below.
The div Of class "nl-row" is dynamic.depending upon the no of items in the db it will increase.
so i am trying to dynamically center the divs in a ".container" div.
the "nl-row" is given the width of 300px, so if the ".container" had the width of 1000px, there should be 3 "nl-row" in a row and if the ".container" had the width of 700px there should be 2 "nl-row" in a row and should center themselves in the row.
-Please help Me with this issue.
<div id="nl-container-1" class="nl-container">
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<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>
</div>
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<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>
</div>
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<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>
</div>
</div>
For the parent use (display:flex;justify-content:center)for the children use :width 300px)
Related
I am using flex to contain cards using bootstrap but the cards are not shown to the full width of the screen. They are stacked up on the left half of the screen.
The HTML file is this:
<section class="projects" id="projects">
<div class="services-cards">
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_develop_app_re_bi4i.svg" alt="Card image cap">
<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>
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_for_review_eqxk.svg" alt="Card image cap">
<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>
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_Success_factors_re_ce93.svg" alt="Card image cap">
<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>
</div>
</section>
And the css is as
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
padding:10px;
}
.services-cards{
display: flex;
flex-direction: row;
margin-top: 20px;
margin-left:30px;
margin-bottom: 90px;
justify-items:auto;
}
What am I doing wrong? I'm expecting that the content of the flexed (cards in this case) will be full width of the screen.
Right now it looks like this
enter image description here
Just use .justify-content-between or .justify-content-around on .service-cards. Between will put the first and last at the far edges and evenly distribute the items between them, while around will make all the spaces on outsides and between equal.
<section class="projects" id="projects">
<div class="services-cards justify-content-between">
{card} {equal-space} {card} {equal-space} {card}
</div>
</section>
Or
<section class="projects" id="projects">
<div class="services-cards justify-content-around">
{equal-space} {card} {equal-space} {card} {equal-space} {card} {equal-space}
</div>
</section>
I've created a custom "product card" for my site, and I want the images to take the parent's full width and height, regardless of the image's dimensions. I have tried max-width min-width max-height min-height and none seem to work. I can't think of any other solution. I'm attaching an image of what I'd like and what I'm achieving now.
https://codepen.io/paulamourad/pen/MdxedG
If you want to maintain aspect ratio and don't mind cropping:
.product-img-container {
width: 100%;
height: 260px;
display: inline-block;
position: relative;
overflow:hidden; //This will crop off image portions that overflow the container
}
.card-img-top {
width: 100%; /*If you specify only width, height will be calculated automatically
and aspect ratio is maintained. Similarly, if only height is specified, width is
calculated automatically */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 0px;
}
You can use the top and bottom in the .card-img-top to position the image.
It seems you are making a simple layout more complex.
You don't need to use position properties in this case. This will make simple layout more complex.
There are different scenarios how to use image more efficiently in webpages, like considering their height-width, and aspect ratio as well.
I have created a Snippet, hope so you will find it useful.
Bootstrap Cards Snippet
For dynamic product card images use the following CSS properties:
.card-img-top {
height: 100px; /* Change it based upon requirement */
object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<h2>Bootstrap Cards Varation: </h2>
<h3>Same Aspect Ratio ―</h3>
<div class="row mb-5">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<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>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<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>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<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>
</div>
</div>
<!-- row -->
<h3>Same height for image (Suitable for dynamic different size images) ―</h3>
<style>
.cstm-height-card .card-img-top {
height: 100px;
object-fit: cover;
}
</style>
<div class="row mb-5 cstm-height-card">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1200x900" class="card-img-top" alt="...">
<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>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1500x800" class="card-img-top" alt="...">
<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>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1400x700" class="card-img-top" alt="...">
<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>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="https://source.unsplash.com/random/600x800" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="https://source.unsplash.com/random/600x800" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- row -->
</div>
Use a div with a background image. Set its height to 100%, background-position to center, and background size to cover.
.card-img-top {
height: 100%;
background-size: cover;
background-position: center;
}
Works in bootstrap cards, I forked your pen. https://codepen.io/Jason_B/pen/RmdoaQ
I am trying to create 3 simple image cards with captions in Bootstrap 4, but no matter how I attempt to do it, the image within the card takes up the entire card, covering the caption below it.
The cards should look just like the example as I am using the same code, just putting it in a row. The card text is there, but it is directly beneath the image. How can I get the card to be longer so that the images stay at the top and reveal the text below?
Here's Bootstrap's example card:
And here's what mine look like:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<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>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<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>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
Looks good to me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
Good evening all!
I've written the following code which was working perfectly. But using the images I use which are different resolutions this makes the card images different sizes. Is there a way to make all the images scale to the same size?
Example here:
https://imgur.com/a/PWVQH
My code is using Bootstrap 4 CDN.
<section>
<div class="container">
<div class="card-group">
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/removals.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/truck image.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/sprintervan.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
Any help would be amazing!
Thank you.
From your example, it looks like you're having a problem with height.
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
https://getbootstrap.com/docs/4.0/content/images/
A suggested workaround would be to add .h-100 (height 100%) to the parent node of each fluid img card
<div class="h-100">
<img class="card-img-top img-fluid" src="assets/images/removals.jpg" alt="Card image cap">
</div>
https://github.com/twbs/bootstrap/issues/21885
I am using Bootstrap 4 Beta to set up a series of cards that must look like following layout:
As the second image at the bottom depicts, I am having issues to make the cards in the middle column responsive to the height of the parent container. As you can see, the bootstrap card body of the 2 little cards at the top disappear and the image in the card at the bottom stretch by itself. I don't know what I am doing wrong. I would appreciate any help:
My code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
</div>
<div class="col-md-4 flex-column flex-wrap">
<div class="d-inline-flex h-50 ">
<div class="card w-50">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
<div class="card w-50">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
</div>
<div class="d-flex flex-column h-50">
<div class="card align-self-stretch">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top img-fluid " src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
</div>
</div>
Style:
.col-md-4{
max-height: 357px;
}
See jsfiddle in Here