I am wondering how I can make a column in bootstrap to be full page height no matter what. I have currently tried making an id and setting the height to 100%, but I have had no luck.
<div id="main-row" class="row">
<div id="left" class="col-lg-3">
TEXT
</div>
<div id="center" class="col-lg-3">
TEXT
</div>
<div id="right" class="col-lg-3">
TEXT
</div>
This is an example of what I have tried. All I want to achieve is to set the entire column to be the entire height of the page. It currently locks to content height. Is there any way around this?
You will need to use CSS to set the height.
First, you need your body to be 100%. Then I would put the columns in a containing div and set that to be 100% (looks like main-row is the containing div). Then if you want only select columns to extend to the full height, give them an class that has 100% set as height.
You can try setting the css to this.
.html, body {
height:100%;
}
#main-row {
height:100%;
}
.fullheightcol {
height: 100%;
}
HTML:
<div id="main-row" class="row">
<div id="left" class="col-lg-3">
TEXT
</div>
<div id="center" class="col-lg-6 fullheightcol">
TEXT
</div>
<div id="right" class="col-lg-3">
TEXT
</div>
</div>
Related
I am trying to execute some simple container code to center an image, I cannot find it why my Container has a height of 0.
#test {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class="container">
<div class="row">
<div class="col">
<div id="test">
</div>
</div>
</div>
</div>
Why does the container have a height of 0, and hence my image not appearing?
By default, block elements get their heights from their content. Content meaning what goes between the opening and closing tag of the element in the HTML. A background image would not be content, but can be thought of more like decoration.
You can set the height manually with css to whatever you like. Keep in mind though that an empty element is unsemantic code.
Adding a height property could fix this as mentioned by you in comments.
Another alternative that would solve the problem with varying image sizes could be to use an img tag inside #test element.
<div id="test" style="background-image: url(/my-image.jpg);">
<img src="/my-image.jpg" style="visibility: hidden;" />
</div>
This way the div takes up the height based on the image size.
<div class="text-center d-flex" style="height: 100vh">
<div class="container m-auto">
<div class="row">
<div class="col-8 mx-auto">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8 mx-auto">
<h1> I should be centered </h1>
</div>
</div>
</div>
</div>
Using margin:auto to vertically-align a div
As the second answer from the linked stackoverflow question over, it was because my parent was not of type flex.
I am creating a basic text reverser on https://shinkarom.github.io/reverser/ (the source code is https://github.com/shinkarom/reverser). For CSS framework I am using http://mincss.com.
The reverser is split into two columns. The left one has the textarea. The right one has the reversed text.
Unfortunately, the textarea is too small and doesn't fill the whole column. Giving it width: 100%;height: 100%; box-sizing:border-box solved the width problem, but the height is still too small.
As a workaround, I tried to give the textarea 25 rows, but it looked very ugly on a smaller browser window.
Here's the relevant code:
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100%;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
How to make the textarea fill the whole height?
put height:100vh instead of 100% if you want the textarea to take full height of page. height:100% can't be applied unless your parent div has specified static height.
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100vh;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
How can I ajdust container to make it full width?
This is the space that's container taking right now, but I want it to have full width (like website).
I have created it like this
<div class="container-fluid container-va">
<div class="row row-dk">
<div class="col-md-12">
<p>SOME TEXT</p>
</div>
</div>
</div>
I have tried adjusting css like:
.container-va {
width: 100%;
}
but it doesn't work... Help please!
I want to create grid view, where header contains 10% height of the page and body 90%.
I have tried to adjust this, but body part does not grow when element section on right hand scales.
I want to add elements in right panel in responsive manner.
Is there any good way to organize this?
fiddle: http://jsfiddle.net/karimkhan/q18yzkoz/5/
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background-color:lavender;">
<div class="header">Header Height should be 10% of the page</div>
</div>
</div>
<div class="row" >
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
<div class="row" >
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item1</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item2</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item3</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item4</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item5</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item6</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item7</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item8</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item9</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item10</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item11</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item12</div>
</div>
</div>
</div>
</div>
</body>
You have a ton of divs that you're not actually using. ALL of those need to explicitly be set to 100% height and also have a wrapper.
Take a look at this pen: http://codepen.io/anon/pen/bdOyJp
You have a ton of nested divs. I cut the HTML down to this:
<div class="header">Header Height should be 10% of the page</div>
<div class="content row">
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">
Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- all the items... -->
</div>
</div>
And here's what I cut the CSS down to:
html, body {
height: 100%;
}
.header {
height : 10%;
background: teal;
}
.content {
width: 100%;
height: 90%;
background: deeppink;
}
I set a background on .content so that it would fill the right column. It is a 'faux column' technique but there are many more.
Neither the BODY (.col-xs-8) or the HEADER (.header) heights in your code are being recognized. Hence, not only is the body not 90%, but the header is not 10%. The height of the header is simply the height of the content. You can plug in other percentage values and you'll see nothing changes.
This is caused by the multitude of nested containers and various assigned heights in your code, which is a bit confusing and convoluted. However, your mark-up doesn't have to change to accomplish your goal.
Below are my adjustments to your code. I've used inline styles. Eventually, you may want to move these styles to your external stylesheet which may be better for clarity, convenience and maintenance, but I've used inline styles here for demonstration purposes.
First, add a 100% height to your primary div container:
<div class="container-fluid" style="height: 100%;">
Second, add a 10% height to your header row and include the inline styles from the child div.
<div class="row" style="height: 10%; background-color:lavender;">
<div class="col-xs-12" //DELETE THIS: style="background-color:lavender;"//>
Third, add a 90% height to your body row and and include the inline styles from the child div.
<div class="row" style="height: 90%; background-color: lavenderblush;">
<div class="col-xs-8" //DELETE THIS: style="background-color:lavenderblush; height:100%"//>
This does the trick. I gives you 10% for the height and 90% for the body.
http://jsfiddle.net/q18yzkoz/6/
Just keep in mind that the 90% is relative to the parent container (.container-fluid) with height 100%, which is relative to the HTML/BODY height 100%. So it extends all the way down to the bottom of the page (which is what your questions asks).
However, if you want the body div to match the right column, adjust the height value of the body row from 90% to ~55%.
http://jsfiddle.net/q18yzkoz/8/
OR, you can reduce the height value of the parent container (.container-fluid) to, let's say, 70%, and work from there.
Lastly, you stated in your question:
Is there any good way to organize this?
There are other ways to create a responsive grid layout that may be more efficient and robust. Here are four methods you may want to consider:
Easy Responsive CSS Grid Layouts
Hope this helps. If you have any questions leave a comment below.
I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx