Bootstrap stretch contents on entire screen - html

I am using bootstrap for responsive design.
I want contents to auto-fill depend on the screen size (Which bootstrap allows in-built). Although it is not working when I am connecting to the big monitor (22 inch)
See as below:
Picture 1 (on my Laptop); Covers the entire screen
Picture 2 on Big Monitor (Notice the empty area in the bottom)
(Between Header 6 and End of Browser window)
I expect Headers and contents will be displayed big to cover the entire screen
HTML as below:
<div class="container-fluid">
<div class="row" >
<table class="table">
<tr>
<td><img alt="Bootstrap Image Preview" src="Images/Logo.png"></td>
<td align="right"><img alt="Bootstrap Image Preview" src="Images/Header_RequestExpress.png"></td>
</tr>
</table>
</div>
<div class="row" style="border:1px solid; color:Red;">
<div class="col-md-4" style="border:1px solid; color:green;">
<h2>Categories</h2>
<!--Images Carousel Here-->
</div>
<div class="col-md-8">
<div class="row" style="border:1px solid; color:blue;">
<div class="col-md-12">
<h2>Locations</h2>
<!--Images Carousel Here-->
</div>
</div>
<div class="row" style="border:1px solid; color:Maroon;">
<div class="col-md-12">
<h2>Location Current Requests</h2>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</div>
</div>
</div>
</div>

Apply height:100vh;to the container div.

In your example, on your laptop it was just lucky to appear that way, with the content you filled as you didn't put any rule for the page to be full-height.
You either have to proportion .table and .row vertically.
Example:
.table {
height: 30vh;
}
.row {
height: 70vw;
}
Or let's say the table height is 100px and you want the other part to be filled for the rest of the screen, you can apply:
.table {
height: 200px;
}
.row {
height: calc(100vh - 200px);
}
NOTE I'd suggest you add another class as well to the div .row as that class can be used other places as well, as the Bootstrap provides it.

Related

Equal distribution of height across multiple Flex Columns [duplicate]

This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 10 months ago.
We have the following problem:
It is about accommodating three boxes in a row, which should have the same height. In addition, the boxes each contain two parts: an introductory block and a detailed description.
If we now build the whole thing with Bootstrap 4, this is the structure:
/**
* CSS just for visualization
**/
.block-wrap {
background: lightgrey;
height: 50px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 block-wrap">
<div>
Intro text
</div>
<div>
Detais text
</div>
</div>
<div class="col-4 block-wrap">
<div>
Intro text
</div>
<div>
Detais text
</div>
</div>
<div class="col-4 block-wrap">
<div>
Intro text
</div>
<div>
Detais text
</div>
</div>
</div>
We want the blocks (cols) to always have the same height - this means that the tallest block (based on the content) dictates the height of the others. We achieve this by setting the height of all blocks to 100 percent. It will look somewhat like this:
Now it gets tricky. While the blocks should always have the same height among themselves, the detail blocks should always start at the same height, like this:
Any idea how we can achieve this - it is important that the responsive behavior is retained and the blocks also make sense on mobile.
Edit:
I found a simple solution while stumbling across another problem - in hindsight I wonder why I didn't think of that right away, after all I've already worked with it. Thats how it works:
Bootstrap comes with a function to sort the columns. So in the end I just created a row with 6 columns. I then gave them a sorting on the different devices during the break.
I have recreated it again for you to illustrate:
Codepen fullscreen
we can use table to do that. not sure if we can do that flex box or grid without using javascript
.container {
border: 1px solid black;
border-collapse: collapse;
}
.intro {
background:lightblue;
}
.intro div{
background:orange;
}
.details div{
background:lightgreen;
}
.details {
height:100px;
background:lightblue;
}
table td {
width: 1%;
border: 1px solid black;
padding:10px;
vertical-align:top;
}
table td.details{
vertical-align:bottom;
}
.ch-50 {
height: 5em;
}
.ch-75 {
height: 7.5rem;
}
.ch-100 {
height: 10rem;
}
.ch-20 {
height: 2rem;
}
table{width:100%;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<table class="container">
<tr>
<td class="intro ch-50">
<div class="h-75"></div>
</td>
<td class="intro ch-75">
<div class="h-100"></div>
</td>
<td class="intro ch-100">
<div class="h-50"></div>
</td>
</tr>
<td class="details">
<div class="h-50"></div>
</td>
<td class="details">
<div class="h-75"></div>
</td>
<td class="details">
<div class="h-100"></div>
</td>
<tr>
</tr>
</table>
/**
* CSS just for visualization
**/
.row {
display: flex;
}
.block-wrap {
background: lightgrey;
flex: 1;
border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 block-wrap">
<div>
Intro text
Intro text
Intro text
</div>
<div>
Detais text
</div>
</div>
<div class="col-4 block-wrap">
<div>
Intro text
</div>
<div>
Detais text
</div>
</div>
<div class="col-4 block-wrap">
<div>
Intro text
Intro text
Intro text
Intro text
</div>
<div>
<p>Detais text</p>
<p>Detais text</p>
<p>Detais text</p>
<p>Detais text</p>
</div>
</div>
</div>
Please check the properties of flex that I have given to block-wrap. You have to give class to Intro Text as well if you want the height of that column to be same as well

Bootstrap row - force the same height of divs when collapsed on small devices

I'm trying to force the same height of both divs in a bootstrap row when the row collapses on small device.
So the code is pretty much this:
<div class="row">
<div class="col-md-6">
content
</div>
<div class="col-md-6>
content
</div>
</div>
The bottom picture tells a thousand words: the top part of the image is what happens on bigger devices: both divs have same height which is what I want - but when I open the page on a small device, the green div's height is way lower than the red ones. How can I force the same height when the row collapses?
Do you need to heights to be dynamic or can they be a set height? If so, you could force the height by giving your divs an id and setting the css for devices of a certain size like so:
HTML:
<div class="row">
<div class="col-md-6" id="row1">
content
</div>
<div class="col-md-6" id="row2">
content
</div>
</div>
CSS:
#media only screen and (max-width: 768px)
{
#row1{
height: 300px;
}
#row2{
height: 300px;
}
}
You could create a new class (example: content1,content2), then manually set the dimensions you require in a css file.
.content1 {
background-color: red;
height: 400px;
}
.content2 {
background-color: blue;
height: 400px;
}
<div class="row">
<div class="col-md-6 content1">
content1
</div>
<div class="col-md-6 content2">
content2
</div>
</div>

Why does my image go outside of the bootstrap grid?

I have created a 3 column grid which contains some text and an image in between using Bootstrap 4 for the grid system.
I've noticed that although my image has a img-fluid class assigned the image overflows outside the div.
Can anyone explain the reason for this?
HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
Might be easier to see on an actual page, please view the CodePen.
Because you have set a height on a parent div to 300px, if you remove height it works. Or you can set the height of img-fluid to 300px as #august suggested:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
Or you can keep the height and stop the image overflowing like this:
.blue-bg
{
overflow: hidden;
}

centering 3-column div containing variable sized text in another div

I'm trying to create a 3-column layout entirely of DIVs but I have difficulty.
If I used tables the old HTML 4 way, I can do this:
<div style="width:100%">
<table width="50%" align="center">
<tr>
<td align="left">
<img src="whatever.jpg">
</td>
<td align="center">
1 2 3
</td>
<td align="right">
<img src="whateverright.jpg">
</td>
</tr>
</table>
</div>
And the nice thing is the table spans 50% and the table is centered. Here's what I tried in DIV:
<div style="width:100%;overflow:hidden;">
<div>
<div style="float:left;">
<img src="whatever.jpg">
</div>
<div>1 2 3</div>
<div style="float:right;">
<img src="whateverright.jpg">
</div>
</div>
</div>
The only way I could do it is if I know the total size in pixels or em's of all elements in the inner div, then I could set the width of it and center it, but here's the problem.
The images I use are from sprites and the sizes are expressed in pixels.
The middle text I use are numbers of large size.
The size of the text is adjusted based on user's screen resolution.
Specifying text size in pixels will cause people with the wrong size monitor to have a problem reading the numbers. I'm creating an advanced pagination system.
Is there a way I can center a div of 3-columns inside another div without requiring the sum of the inner div width?
I tried only adding margin:auto to the main div inside the outer div without success.
And remember,
The inner columns of the inside div do render correctly for me as I like it. It's just the matter of centering the whole thing nicely inside the larger div is an issue. And I'm looking for a solution that can work with IE7.
I think it will solve your problem
HTML
<div style="width:100%;overflow:hidden;">
<div>
<div class="div" style="">
<img src="whatever.jpg">
</div>
<div class="div2">1 2 3</div>
<div class="div3">
<img src="whateverright.jpg">
</div>
</div>
CSS
div .div,.div2,.div3{
width: calc(100% - 66.666666%);
/* Firefox */
width: -moz-calc(100% - 66.666666%);
/* WebKit */
width: -webkit-calc(100% - 66.666666%);
/* Opera */
width: -o-calc(100% - 66.666666%);
width: expression(100% - 66.666666%);
display: inline-block;
}
.div{
float:left;
background:purple;
}
.div2{
float:right;
background:red;
}
.div3{
background:blue;
}
Ok, you have to use display properties accordingly.
.table{
width: 500px;
}
.row{
width: inherit;
display: block;
}
.cell{
width: 33.3%;
height: 50px;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0px -2.5px;
border: 1px solid #C0C0C0;
}
<div class='table'>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
</div>
Well it turned out that the real answer for me was to float each inner container and specify a percentage of width for each inner container and have the widths add up to be the width of the outer container and each inner container must have something. For example:
<div style="width:100%;overflow:hidden">
<div style="float:left;width:20%">
some text at left
</div>
<div style="float:left;width:60%">
some text in middle
</div>
<div style="float:left;width:20%">
some text at right
</div>
</div>

How to center text inside a bootstrap grid

I have a grid divided into 2. One side holds an image and the other side some text. Currently it looks as follows:
I want to make it look as follows:
I am looking to get rid of the black spot and center the text. There is no issue in centering it horizontally but unable to do it vertically to fit nicely in relation to the image. Please advice if there is any pre built class already available in bootstrap or I need to rewrite additional CSS.
The following are my current html and css.
HTML
<div class="col-md-6 custom-info">
<img src="img/test.jpg" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
CSS
.custom-info{
background-color: #c0d023;
padding: 30px;
}
After Editing:
You may try this.
HTML
<div class="row xclassrow">
<div class="col-md-6 custom-info">
<img src="http://i.imgur.com/VpelmxT.png?1" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-left">
<div class="content">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
</div>
<h3>View the menu.</h3>
</div>
CSS
.xclassrow{
background-color:#C0D123
}
.content {padding:40px 0px}
.custom-info{
background-color: #c0d023;
padding: 30px;
}
Hope this works. Do comeback if still any issue.!!
EDIT : Removed the xclass and wrap the content in a new class. Check DEMO
TLDR;
Use display:table with display:table-cell to accomplish vertical centering of elements.
For newer browser you can use flexbox. I will demonstrate both approaches here.
Old but secure way (may not work for you here)
What I do most of the time is define 2 helper classes called t and td
*This works if you have a defined height of the containing element
The code then looks something like this:
HTML
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<div class="t">
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.t {
display: table;
height: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
height: 100%;
}
Jsfiddle
Old and even more secure way
Since you know that your 2 columns are 6+6 and that makes 12 columns total width.
Make 1 long element col-md-12 and make a table inside it (either with regular table elements or the helper classes i used in the above example.
HTML
<div class="col-12 specific-class">
<div class="t">
<div class="td">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.specific-class .td {
width: 50%;
background: rgba(0,0,0,.2);
}
.t { display: table; height: 100%; width: 100%; }
.td { display: table-cell; vertical-align: middle; height: 100%; }
Jsfiddle
Note: added vertical align to the image to remove small spacing under it
The mighty flexbox (the future looks bright)
Flexbox is a sight for sore eyes for us fe-devs and will be an integral building block of the future www.
HTML
<div class="col-12 specific-class">
<div class="fl-element">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="fl-element">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
CSS
.specific-class {
display: flex;
align-items: center;
}
.specific-class .fl-element {
width: 50%;
}
Jsfiddle