I have a bootstrap grid that is the UI of a calculator, and it is nested in a div that is sized at 100vw and 100vh. I set the size properties of the bootstrap container to height: 50% and width: 20%, but the content is only filling the width I set, not the height.
I want the height of the grid to resize dynamically so that it is 50% of it's container always.
https://gyazo.com/940d7d3aa77c464e351970bdbd5271b7 (the black line is the border that I am wanting the grid to fill to)
`
return (
<div
style={{ width: "100vw", height: "100vh" }}
class="d-flex align-items-center"
>
<div style={{ height: "50%", width: "20%"}} class="container">
<div class="row">
<div class="col col-6">
<p>AC</p>
</div>
<div class=" col col-3">
<p>/</p>
</div>
<div class="col col-3">
<p>x</p>
</div>
</div>
<div class="row">
<div class="col">
<p>7</p>
</div>
<div class="col">
<p>8</p>
</div>
<div class="col">
<p>9</p>
</div>
<div class="col">
<p>-</p>
</div>
</div>
<div class="row">
<div class="col">
<p>4</p>
</div>
<div class="col">
<p>5</p>
</div>
<div class="col">
<p>6</p>
</div>
<div class="col">
<p>+</p>
</div>
</div>
<div class="row">
<div class="col col-9">
<div class="row">
<div class="col col-4">
<p>1</p>
</div>
<div class="col col-4">
<p>2</p>
</div>
<div class="col col-4">
<p>3</p>
</div>
<div class="col col-8">
<p>0</p>
</div>
<div class="col col-4">
<p>.</p>
</div>
</div>
</div>
<div class="col col-3">
<p>=</p>
</div>
</div>
</div>
</div>
);
}
}
`
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 have following:
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
This is view with screen size >992:
This is view with screen <992:
How can I display elements below each other as is viewed in image2 ? I do not know why, but "display:block" is not working.
You can use
<div class="row">
to create separate rows of content satisfying your needs.
I recommend to read about grid system in this article:
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
</div>
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
In bootstrap 5 there is an option named order. So in your question, You can add a class named order-md-2 to things that you want to shift down and order-md-1 to things that you want to shift up.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
Hope my answer helps you
you could simply use the flex-direction of the flexbox.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div class='contacts'>
<div class='mail'>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div class='phone'>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
</div>
Inside CSS:
.contacts {
display: flex;
flex-direction: column;
}
This should allow you to orient both of your div-containers to be underneath each other.
Maybe I am blind, but my Bootstrap Grid is not behaving as expected.
Shouldn't it fill the whole row? Image of possily wrong behavior
<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
<div class="col-4 row bg-info" style="max-height: 60vh;">
<div class="col-12 row" style="max-height: 15vh;">
<div class="col-8 bg-danger row">
<div class="col-5 text-right"><h5>0</h5>Heim</div>
<div class="col-1 text-center"><h5>:</h5></div>
<div class="col-5 text-left"><h5>0</h5>Gast</div>
<div class="col-1"></div>
<div class="col-12"><p class="text-sm-center">Spielstand</p></div>
</div>
<div class="col-4 bg-success row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
</div>
</div>
</div>
</div>
You must remember that "row" class has set default properties:
margin-right: -15px;
margin-left: -15px;
And "col-anything" classes have set default properties:
padding-right: 15px;
padding-left: 15px;
That's why your idea don't work as you expected.
Bootstrap 5 (update 2021)
The Bootstrap 5 grid still uses flexbox so nesting the grid row/col still works the same way...
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
</div>
Bootstrap 4 (original answer)
Don't use col and row together in the same div. Instead follow the Bootstrap grid rules...
"In a grid layout, content must be placed within columns and only
columns may be immediate children of rows."
<div class="row py-0">
<div class="col-4 bg-info" style="max-height: 60vh;">
<div class="row" style="max-height: 15vh;">
<div class="col-8 bg-danger">
<div class="row">
<div class="col-5 text-right">
<h5>0</h5>Heim
</div>
<div class="col-1 text-center">
<h5>:</h5>
</div>
<div class="col-5 text-left">
<h5>0</h5>Gast
</div>
<div class="col-1"></div>
<div class="col-12">
<p class="text-sm-center">Spielstand</p>
</div>
</div>
</div>
<div class="col-4 bg-success">
<div class="row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left">
<p class="text-sm-center">Teamfouls</p>
</div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/mKFXWjc39k
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 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;
}