Issue in responsive grid item - html

I have an issue in responsive images in desktop the outcome is as expected but in any other device the last two grid item height is different than other grid item which is not as expected
It is supposed to have same height as rest of grid item The images are extracted from https://drive.google.com/uc?export=download&id=1gJ-g7EWreZu38DlaZltLDylPIBDHLSxX
The last two grid items i am talking about canopy and beach gateaway it should have same height as market and monument
.adventure-card {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
display: flex;
flex-wrap: wrap;
cursor: none;
align-content: space-around;
justify-content: right;
height: 80%;
}
.adventure-card img {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">
<!-- TODO: MODULE_ADVENTURES_GRID -->
<!-- 1. Create the grid of adventures by adding child elements as required. -->
<div class="row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<a href="resort/index.html">
<div class="adventure-card p-1 border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/resort.jpg" alt="resort.jpg">
</div>
<p>Resort</p>
<p>₹1200 </p>
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/tower.jpg" alt="tower.jpg">
</div>
<p>Tower</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/mount.jpg" alt="Skiing.jpg">
</div>
<p> Skiing</p>
<p>₹1,900 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/university.jpg" alt="university.jpg">
</div>
<p> University</p>
<p>₹800 </p>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/market.jpg" alt="market.jpg">
</div>
<p> Market</p>
<p>₹600 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/church.jpg" alt="monument.jpg">
</div>
<p> Monument</p>
<p>₹1,200 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/canopy.jpg" alt="canopy.jpg">
</div>
<p> Canopy</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/beachside.jpg" alt="canopy.jpg">
</div>
<p> Beach Gateaway</p>
<p>₹2,200 </p>
</div>
</div>
</div>
</div>
</div>

The images' you have mentioned size are different than the others so if you give them width and height %100 as custom CSS, they look different. That's why you can give them specific width and height to make equal instead of using percentage.

Related

Bootstrap v4.5 Make Cards The Same Size [duplicate]

This question already has answers here:
Bootstrap 4 Cards of same height in columns
(7 answers)
Closed 2 years ago.
First, I'm sorry if there is already an answer to this somewhere. If so, just point me in that direction. I've been looking for a while and can't seem to find an answer that works the way I need.
I am trying to get all of the bootstrap cards on my heroku page to be the same size. I had it set with the container surrounding the responsive divs as display flex and justify-content-center and align-items-center. I have also tried align-items-stretch but it still doesn't result in the cards all being the same height. I've also tried using the bootstrap height utility (h-100) on the responsive divs within the row. Also used css min-height but ran into problems as content would overflow the divs when resizing window.
This is what I currently have that ends up with different sized cards based on the content:
<div class='home-container m-5'>
<div class="row d-flex mb-5 justify-content-center align-items-center">
<div class="col-sm-6 col-lg-4">
<a href='./Multi-welders'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder2.png" alt="ESAB Rebel EMP215IC welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Multiprocess Welders</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<a href='./helmets'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Safety_Equipment2.png" alt="Black welding helmet with red flames" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Helmets</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4 h-100">
<a href='./gloves'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Welding_Gloves.png" alt="Generic pair of leather welding gloves" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Gloves</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card m-3 bg-light">
<img src="./images/Home/MIG_Welder.png" alt="MIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best MIG Welders</h2>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class='card m-3 bg-light'>
<img src="./images/Home/Tig Welder2.png" alt="TIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best TIG Welders</h2>
</div>
</div>
</div>
<div class='col-sm-6 col-lg-4'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder.png" alt="Professional Welder" class="card-img-top p-3 pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best Professional Welders</h2>
</div>
</div>
</div>
</div>
</div>
You can add the following css class:
.card {
height: 200px
}
This will give all your cards the same height. You can just change the height to whatever you like.

How to set the backgroundcolor of a Bootstrap card fo the whole column?

I've got a questtion about the Bootstrap Card Deck.
I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?
Thanks for your help!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
If you want to have the height be equals the container, you can use h-100 on the div row mx-0.
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal"></p>
</div>
</div>
</div>
</a>
</div>
Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center.
Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<p class="font-weight-light text-muted mb-2 px-2">Some text</p>
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> -->
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
</div>
Please check the code differences https://i.stack.imgur.com/0Q2IX.png
Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4".
Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"
.grey {
background-color: #f5f5f5 !important;
}
/*OR*/
.grey.lighten-4 {
background-color: #f5f5f5 !important;
}
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0 grey lighten-4">
<div class="row mx-0">
<div class="col-md-8 rounded-left pt-2">
...
</div>
<div class="col-md-4 text-center pt-3">
...
</div>
</div>
</div>
</a>
</div>

Column not splitting properly

Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>

Div bottom aligned in column

I am using Bootstrap 4 with a four column layout. Now I have one column with longer text which causes the "buttons" at the end to be not aligned.
The HTML is as follows:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 title-1 text-center">
My Headline
</div>
</div>
<div class="row py-5">
<div class="col-lg-3">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
This is longer text which causes the issue
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 align-self-end">
MORE INFOS
</div>
</div>
</div>
</div>
So what can I do to make the "buttons" of all columns aligned?
Make the columns flexbox (d-flex flex-column), and then use mt-auto to push the buttons to the bottom...
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 title-1 text-center">
My Headline
</div>
</div>
<div class="row py-5 border">
<div class="col-lg-3 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
This is longer text which causes the issue
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column ">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
</div>
</div>
https://codeply.com/go/B1vKo06A3i
Option 1: flexbox with column flow and use margin: auto to push the button
That's the answer #Zim posted (he's fast!)
Option 2: with text-overflow
Another option without flexbox is to style the text-overflow on the text instead. You can use text-overflow on your title-2 class to ensure the title would be just 1 line.
CSS
.title-2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Result
http://jsfiddle.net/aq9Laaew/261632/

Rowspan on Bootstrap 4 Beta 0 Grid System

Hi I'm working on a eCommerce template witch uses Bootstrap 4 Beta. I made it work on mobile, but on desktop I could not figure how to make the Buy Box stay under title. On my aproach it apears under the Gallery section.
Desired Desktop
Desired Mobile
<div class="container-fluid">
<div class="row">
<div class="col-xl-1 d-none d-md-block"></div>
<div class="col-xl-10 col-12">
<div class="row">
<div class="col-xl-6 order-xl-1 col-12 order-2 d-flex">
Gallery
</div>
<div class="col-xl-6 order-xl-2 col-12 order-1">
Title
</div>
<div class="col-xl-6 order-xl-3 col-12 order-3">
Buy Box
</div>
<div class="col-12 order-xl-4 order-4">
Description
</div>
<div class="col-12 order-xl-5 order-5">
Related
</div>
</div>
</div>
<div class="col-xl-1 d-none d-md-block"></div>
</div>
</div>
You could use the util classes to float the cols on xl widths, which would cause the "Best Buy" box to move under the title, assuming the height of the gallery is taller.
https://www.codeply.com/go/3E3Y9A5zZa
<div class="container-fluid">
<div class="row">
<div class="col-xl-1 d-none d-md-block"></div>
<div class="col-xl-10 col-12">
<div class="row d-xl-block d-flex h-100">
<div class="col-xl-6 order-xl-1 col-12 order-2 order-xl-1 d-flex bg-warning tall float-left">
Gallery
</div>
<div class="col-xl-6 order-xl-2 col-12 order-1 bg-primary float-left">
Title
</div>
<div class="col-xl-6 order-xl-3 col-12 order-3 bg-primary float-left">
Buy Box
</div>
<div class="col-12 bg-info order-4 float-left">
Description
</div>
<div class="col-12 bg-info order-5 float-left">
Related
</div>
</div>
</div>
<div class="col-xl-1 d-none d-md-block"></div>
</div>
</div>