I'm new to Bootstrap and am struggling to figure out why my left column height is not displaying as the full height of the parent div. From what I understand in the docs, you just add h-100 as a class to have it take up 100% of the height relative to the parent, but I'm obviously not understanding it right. It probably has something to do with the fact that it's a block element?
<div class="container vh-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
<div class="col-6 bg-secondary h-100">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
There are too many row divs, and a missing h-100 on the parent...
<div class="container vh-100">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="row g-0 d-flex justify-content-center w-75 align-items-center border border-dark h-100">
<div class="col-6 bg-secondary h-100 border">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
https://codeply.com/p/RyTy1s0AF8
Note, only columns should be the immediate children of row.
<div class="container vh-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
<div class="col-6 bg-secondary vh-100">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="https://cdn.pixabay.com/photo/2021/07/21/07/09/cygnet-6482420_960_720.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
Do you mean something like this?
The bg-secondary is now filling the entirety of the div.
Related
Is there are any solution to make different size images be the same height on a card? Problem is that content is coming from cms, and I do not know what the image size will be and how much text will be in the card.
<div class="card">
<div class="card-body h-100">
<div class="row d-flex h-100 mx-0">
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" class="img-fluid"
alt="image">
</div>
<div class="d-flex flex-column col-12 flex-grow-1 px-0">
<div class="mb-auto">Will be content...</div>
<a href="link" class="btn card-btn btn-outline-secondary"
role="button">Button</a>
</div>
</div>
</div>
Here is how it looks now:
example here
images could be higher or lower. Can't fix them in px. I need that card will stretch, not image making shorter.
Add these in your code "
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" style="object-fit: contain;"
alt="image">
</div>
I have applied the solution from this question: Bootstrap 4 vertical center - equal height cards
But, my issue is not getting solved. I can't achieve the equal height & vertically centered together though I have applied these:
<div class="cycle-des h-100 justify-content-center">Product Cycle</div>
Here is the screenshot of my issue:
Here is my Demo
Here you go,
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 pr-md-0">
<div class="cycle-des h-100 align-items-center justify-content-center">Product Cycle</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">01</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">handloom: 4-7days</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">02</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">S/S MQ: 50M</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">03</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">S/S: 25-30days</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">04</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">Order MQ: 2000M</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">05</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">Order delivery date: 35-50 days</div>
</div>
</div>
</div>
</div>
</div>
.cycle-num, .cycle-des {
color: #fff;
text-align: center;
padding: 20px 10px;
display: flex;
}
.cycle-num {
background-color: #666;
}
.cycle-des {
background-color: #333;
}
But I believe you can reduce the div's and can do it much better. Just a suggestion, you don't have to use grid classes everywhere. Just use it for the layout.
https://jsfiddle.net/mdsebans/yhcb30L5/5/
In the following example is there a bootstrap way of making the div with id "second" fit inside its parent container and not overflow when given h-100 class? A hacky way I used was applying overflow:hidden to the parent container of #second div and it does the job for my specific case but would this be called an elegant solution in this scenario?
<div class="container">
<div class="row">
<div class="col-6 bg-dark">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
https://www.codeply.com/go/pSVIlOETpB
Sure, just make the containing col-6 display:flex, flex-direction:column by using d-flex flex-column classes on it...
https://www.codeply.com/go/5YiBkLo0qO
<div class="container">
<div class="row">
<div class="col-6 bg-dark d-flex flex-column">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
I need to have one column placed under the other when viewed on a cell phone.
I am using bootstrap 4 and the divs are flex, I use flex columns and flex rows, already using the property property order and it did not work.
My code
<div id="menu-text" class="d-flex flex-row">
<div class="d-flex flex-column col-sm justify-content-center">
<div class="d-flex flex-row menu-subtitle">Sashomi </div>
<div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
<div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
<img src="images/BrochazoBlanco.png" class="white-brush">
<div class="d-flex flex-row">
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 72</div>
</div>
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 50</div>
</div>
<div class="d-flex flex-column col-md-6">
<div class="d-flex flex-row">Sushi california</div>
</div>
</div>
</div>
<div class="d-flex flex-column col-sm justify-content-center">
<div class="d-flex flex-row menu-subtitle">Sashimi</div>
<div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
<div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
<img src="images/BrochazoBlanco.png" class="white-brush">
<div class="d-flex flex-row">
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 72</div>
</div>
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 50</div>
</div>
<div class="d-flex flex-column col-md-6">
<div class="d-flex flex-row">Sushi california</div>
</div>
</div>
</div>
</div>
Check this example for a simplified, responsive version of the code that you provided.
I don't know how many columns you need, as you didn't give any code, but here is a three column grid that is responsive.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-secondary">
One of three columns
</div>
<div class="col-sm bg-danger">
One of three columns
</div>
<div class="col-sm bg-success">
One of three columns
</div>
</div>
</div>
You can see the same thing here, and resize the output to see how it works.
I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns..
The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height...
HTML
<div class="container">
<div class="row align-items-center bg-faded">
<div class="col-md-2">
<div class="card card-block h-100">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100">
I have a little bit.
</div>
</div>
</div>
</div>
Demo of problem
Here is a simpler solution for you:
using only justify-content-center utility class because .card has already flex-direction: column property
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<code>normal .row with .card inside .col-*</code>
<h6>Problem is that card content is not centered</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a little bit.
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<code>.align-items-center.row with .card inside .col-</code>
<h6>Problem is that cards are no longer full height</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
One way I've found to solve the centering issue is using the flex-column utility class. Since each card is display: flex, flex-column can be used to set flex-direction: column. Then, justify-content-center vertically aligns the content...
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="card card-block h-100 flex-column justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 flex-column justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 flex-column justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
Demo