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
Related
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>
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 am creating a bootstrap template which will be contain two divs, from which one div the left-one should be fixed and the right one should be scrollable, similar to the http://www.trulia.com. I have tried the following code:
<div class="row">
<div class="col-md-6">
<img src="">
</div><!--Fixed one-->
<div class="col-md-6">
</div><!--Scrollable-->
</div>
It will solve your problem
.col-md-6:nth-child(1){
position:fixed;
}
.col-md-6:nth-child(2) {
height: 200px; // Set this height to the appropriate size
overflow: scroll;
}
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
I'm using bootstrap in my RoR project. I have 2 columns, span3 and span9, which move while resizing the browser window: the span9 falls below and then returns to the side of the other span.
Here is the code, however the displayed result is different for some reason: http://jsfiddle.net/jUJn7/3/
HTML:
<div class="row">
<div class="span3 well" style="min-height:600px;">
</div>
<div class="span9 well" style="min-height:600px;">
</div>
</div>
I want the 2 spans to stay together in the same line. span3 must have a fixed width of 300px, span9 must adjust itself to the remaining space in the window.
I've tried the solutions in all other related questions with no success, and I've been trying to solve this problem for weeks, so I'll appreciate any help!
Fixed span3 and flexible span9
html:
<div class="row">
<div class="span3 well" style="min-height:600px;">
</div>
<div class="span9 well" style="min-height:600px;">
</div>
</div>
css:
.span3 {
float: left;
width: 300px;
}
.span9 {
margin-left: 350px;
}