I developed a grid with three columns (2 equal and one smaller).
My problem is that I can't set a height on the cards, I used them in px and it worked, but it's not the best way. I expect that the three columns have the same height (100% of the page) and some of the cards occupy 75%, 50%, 25% 20% of the page.
Is there a way to define a fully responsive height without using px?
Thanks !
CODE
<div class="row">
<div class="col">
<div class="card card1">
<div class="card-body">
<p class="card-text">With supporting .</p>
</div>
</div>
</div>
<div class="col">
<div class="card card1">
<div class="card-body">
<p class="card-text">With supporting .</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card1">
<div class="card-body">
<p class="card-text">With supporting .</p>
</div>
</div>
</div>
<div class="col">
<div class="card card1">
<div class="card-body">
<p class="card-text">With supporting .</p>
</div>
</div>
</div>
</div>
</div>
use the class d-flex as mentioned below. It will give you the same height for all the 4 cards.
<div class="col-3 d-flex">
<div class="row">
<div class="col">
<div class="card card2">
<div class="card-body">
<p class="card-text">50% height</p>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col">
<div class="card card2">
<div class="card-body">
<p class="card-text">50% height</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex">
<div class="row">
<div class="col">
<div class="card card3">
<div class="card-body">
<p class="card-text">25% height</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card4">
<div class="card-body">
<p class="card-text">75% height</p>
</div>
</div>
</div>
</div>
</div>
If you are okay with it being 50% of the screen height, you could use "vh".
The following CSS worked in your code pen:
.card2 .card-body{
height: 50vh;
}
Related
What I want - I'm using Bootstrap grid cards to create two cards in a row that are aligned horizontally on wider screens both with equal height. I want to keep the 1st image (col-md-4, col-md-8) and make the 2nd image (col-md-5, col-md-7) to show more of the image in the card, but when I do this the 2nd cards image gets taller in height. You can see this in the Stackblitz and image below.
Problem - The 1st image is a 1:1 and the second image is a 16:9 and I want more of the 2nd image (16:9) showing (wider) in the 2nd card. But increasing the column size in the second image increases the height, which is not what I want.
Stackblitz - component, url
What have I tried - I can and have created 2 cards both using a horizontal placement in the card using a row and columns (col-md-4, col-md-8), which makes the images both equal height. I used a class of "h-100" on each card. But when I change the columns of the second image to (col-md-5, col-md-7) to show more of the image, the card increases in size making the 1st card not sized correctly.
I guess another way I can say it is, I don't want the images expanding higher than the text (right side column).
Here is an image from my Stackblitz. The top row is what I have with equal columns for each image and the bottom row is when I increase the size of the column for the 2nd image. Note - I don't want the height to increase, just the width.
Here is the code I'm using.
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
some text
</div>
<div class="col-lg-9">
<div class="py-2">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Park</h5>
<span class="float-right center-star">
3.4
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">None</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Hosted</span>
<span class="float-right">2</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-2">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-5">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
</picture>
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Park</h5>
<span class="float-right center-star">
3.4
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">None</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Hosted</span>
<span class="float-right">2</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Targetting the image column of the card by creating a class works for me.
for example,
1# Here is the HTML for a card.
<div class="col mb-4 bg-green1">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2# I created a class my-custom-class to target the image area.
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
3# Here is the CSS property I wrote
.my-custom-class{
min-height: 130px;
overflow: hidden;
}
NOTE: It doesn't make any issue in the responsiveness of the card.
Result
Desktop Version
Responsive Version
I am trying to develop a grid of cards using rows and columns.
Since I started using bootstrap, I always had doubts about how to use the column breakpoints correctly. I intend that in desktop size, it will have three columns, but in mobile size, these three columns will "become" just one.
Does anyone know how I can configure breakpoints in order to get just everything in one column, in mobile size?
DEMO
.html
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
</div>
Problem
I set the moblie size and get 3 columns, how can I get everything in just one column and occupying the entire screen?
Instead use col-sm on the columns...
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> a </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> Ta </div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/DPFuoonZgF
Also, you can use the padding utils (ie: pb-3) on some of the columns to create vertical spacing on mobile.
This is 1 column on mobile & 3 columns otherwise, based on a 12 column grid.
<div class="col-12 col-md-4">...</div>
The instruction is - fill all 12 columns by default (mobile first), and fill 4 of the columns otherwise.
I think your issue may come from nesting cols within cols, so for simplicity I've reduced this to just one level deep:
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 1</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 2</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 3</h1>
</div>
</div>
</div>
</div>
Codepen here.
https://getbootstrap.com/docs/4.0/layout/grid/
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
i'm trying to get text to be positioned to the right of a card header, this working example on fiddle strangely doesn't work in my project, i'm using bootstrap 4
https://jsfiddle.net/LL0qnnxm/61/
This is what i get on my app
The corresponding code:
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-sm-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
Thanks for your time.
It's likely that you have a style which makes card-header width only as large as its content, such as display: inline.
Try adding display: block; to card-header or double check that no other styles are overriding it being display: block.
.card-header {
display: block;
}
When you have float-sm-right, it will only float to the right if your screen is sm size (768px and up). Simply remove the -sm.
https://jsfiddle.net/g9nu8f7d/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
My page has three cards in it as shown in image 1. The cards are not the same width in columns 1. When testing it on the mobile (Chrome) they are all different widths and the bottom two cards are touching as shown in image 2.
How do I get the columns on the left to be the same width and maintain responsiveness and size when on mobile? I'm expecting uniform width and height on both web and mobile.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">More Numbers</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Some stuff</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
Layout on web page:
The layout on mobile:
https://www.codeply.com/go/Fia8Y6YPNl
You're breaking the bootstrap rule of always having div.col-* being a child of a div.row. A div.col-* cannot be a direct child of another div.col-*. This is likely your issue.
Try this:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>