I'm trying to make a web that has exactly the screen's height (no scrolling), using Bootstrap 4 and flex containers. So far, the structure was holding up, until I decided to try inserting tall images.
The image scales to fit the width and it exceeds the height of the screen (I dont want this).
I want everything to fit in the screen without scrolling: this means, the image has to fill all the available height, without starving other rows of height (e.g. the footer). I've tried specifying height:100% on all parent containers and on the image as well (using bootstrap's h-100 class), but I've encountered two problems:
the image changes the aspect ratio
the added height of rows inside a column exceeds the total parent height, so the total height ends up being larger than the screen, and some elements go off the screen.
I haven't come up with a way of telling child elements of a column (rows in this case), to have a total height of 100% without manually specifying each row's height. I think that would solve the issue.
The whole structure is basically as follows (I've removed unnecessary elements):
<body id="page-top" class="bg-light">
<div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden h-100">
<div class="container-fluid d-flex flex-row overflow-auto flex-fill justify-content-center pt-3 pb-3 h-100">
<div class="container flex-column d-flex col-7 mr-3 ml-3 h-100">
<!-- play area -->
<div class="row flex-fill h-100">
<div class="section-div flex-grow-1 flex-column d-flex h-100" id="play-area">
<div class="row flex-grow-1">
<div class="jumbotron jumbotron-fluid d-flex w-100">
<div class="container-fluid d-flex flex-column">
<h1 class="display-4 pb-2">title</h1>
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/9/93/Burj_Khalifa.jpg" style="object-fit:contain">
<hr class="mb-3" />
<p>
some more text
</p>
</div>
</div>
</div>
<div class="row" style="height:100px">
<div class="row mt-auto justify-content-md-center">
<div class="col-md-auto text-center">
<p>some text at bottom</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And a JSfiddle: https://jsfiddle.net/prx4k76t/
Related
i wanna ask something about display flex
<div class="container mx-auto">
<div class="d-flex">
<div class="bg-red-300 w-100 mr-3">halo</div>
<div class="bg-red-300 w-50 mr-3">halo</div>
</div>
</div>
how to display flex can manage width flex item with width 100% and 50% ?
Thankyou :)
In BS, if you want to have that kind of 2:1 ratio of width of elements, you'd have to use the grid system. Your above code will turn into:
<div class="container mx-auto">
<div class="row">
<div class="col-8 bg-red-300 mr-3">halo</div>
<div class="col-4 bg-red-300 mr-3">halo</div>
</div>
</div>
Here's how to use Flex's Bootstrap,
The 'col' has to be used to give the width of the box
<div class="container">
<div class="row">
<div class="col-6 bg-red-300">halo</div>
<div class="col-6 bg-red-300">halo</div>
</div>
</div>
So my problem is that my code:
<div class="row">
<div class="w-100 col-auto col-lg-5 w-auto p-3 p-lg-5 m-4 rounded-sm bg-dark text-white shadow-lg">
<h3>This is a very very very long Text</h3>
</div>
</div>
results in this:
Too long Text in Mobile
The column is too wide for my Mobile (or in this case Firefox), i think it is because of the Margin and Padding.
Is there any way to avoid this?
Add flex-shrink-1 and flex-grow-1. It should work.
Best way is, don't try to apply your custom or any other classes to flex layout or the bootstrap's dedicated classes.
don't use margin in col bcz they have a predifined width. width auto take the width till it's content.
<div class="row">
<div class="col-lg-5 p-lg-5">
<div class="w-auto p-3 m-4 rounded-sm bg-dark text-white shadow-lg">
<h3>This is a very very very long Text</h3>
</div>
</div>
</div>
I have a page with 3 columns as follows :
<div class="row">
<div class="col-lg-3">
<div>**Section 1**</div>
<div>**Section 2**</div>
</div>
<div class="col-lg-6">**Section 3**</div>
<div class="col-lg-3">
<div>**Section 4**</div>
<div>**Section 5**</div>
</div>
</div>
I want to change the order of sections in mobile as this picture :
Here are 2 options...
Use flex direction responsively:
Use flexbox column on lg and larger. The row container must have a defined height. In this case I used h-100 (height: 100%;).
<div class="container vh-100">
<div class="row h-100 flex-lg-column flex-wrap">
<div class="col-lg-3 border flex-grow-1 overflow-auto order-3 order-lg-0">1</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-4 order-lg-0">2</div>
<div class="col-lg-6 border order-first order-lg-0 min-vh-100 overflow-auto">3</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto">4</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-last order-lg-0">5</div>
</div>
</div>
https://www.codeply.com/go/WDjcxLu5bC
Hack with flexbox & floats:
This option uses floats on lg and larger, and the returns to flexbox on smaller screens which allows us to change the order of the cols when the layout stacks vertically. This layout is also limited to height:100%.
<div class="row d-lg-block vh-100">
<div class="col-lg-3 float-left d-flex flex-column h-100 p-0">
<div class="flex-grow-1 px-3 border">1</div>
<div class="flex-grow-1 px-3 border">2</div>
</div>
<div class="col-lg-6 float-left border order-first order-lg-0 h-100 overflow-auto">3</div>
<div class="col-lg-3 float-left border h-50">4</div>
<div class="col-lg-3 float-left border h-50">5</div>
</div>
https://www.codeply.com/go/eXY3HFr5A4
I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.
The grid layout is
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
the cards are just to outline the containers.
I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.
So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?
Here's a good way to do this using Bootstrap's build in flexboxes.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.
The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.
Example screenshot of the above code in bootstrap
You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.
EDIT: d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.
Simplest solution is to make the rows 50% height instead...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
Demo: https://www.codeply.com/go/7POJtgNaQI
Or, the flexbox method would be to use Bootstrap flex-grow-1 class. Also you don't need the height on the body. Just use min-vh-100 on the container...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
https://www.codeply.com/go/n1eL2Jakuo
Always give the height through the inner element height, If I will give the height on container class element, it won't work, so let the container depend on the inner element's height, So try like this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="col-12" style="min-height: 180px;">
<div
class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">
<div class="col-6 pr-2">
<div class="card text-center">
hello
</div>
</div>
<div class="col-6 pl-2">
<div class="card text-center">
world
</div>
</div>
</div>
</div>
</div>
Hope you will understand this tiny mess, and so it would help you.
I'm trying to set up two cards adjacent to one another in a single row, but I'm having an issue where the shorter length card always resizes itself automatically to match the longer one. When resizing the page, the cards are no longer adjacent and collapse onto separate rows and at that point they are independent sizes- I'd like them to be independent sizes in any case. They appear as independent sizes when I manually set the height of both of them, but the content in the cards will be dynamic so I want to avoid that. How would I go about doing this?
<div class="row justify-content-center">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblah</p>
</div>
</div>
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
</div>
</div>
CSS:
.card {
width: 36rem;
}
How they look (without forced height)
How I want them to look (this is by manually styling their height, which I want to avoid)
How they look when shrinking the page (this is fine, just for reference)
https://jsfiddle.net/fu7q6jca/
The .row is designed to contain col-, not card. Put the cards inside col-*...
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblah</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/xDnbMaM6Dm