For example, I have following html:
<html><head>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.col-1{
height: 300px;
}
.col-2{
/*
height: 100% not working, how to stretch col-2 like col-1
*/
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1">
</div>
<div class="col-md-6 col-2">
</div>
</div>
</body></html>
Height of container is auto, but actual height is defined, because col-1 height is 300px. How to set col-2 height 100% of actual parent height?
You have to add .row outside of any col-* because col-* have float attribute. To make the same height of col-*, add .row-eq-height with this style:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
The HTML is like this:
<div class="container">
<div class="row row-eq-height">
<div class="col-md-6 col-1">
a
</div>
<div class="col-md-6 col-2">
b
</div>
</div>
</div>
DEMO
Maybe you should try to use "row row-eq-height" classes.
Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>
And add this CSS property to your custom CSS
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
min-height:100% usually works.
<html>
<head>
<style type="text/css">
.container {position:relative;height:600px;width:100%;background-color:black;}
.col-1{float:left;width:50%;height:300px;background-color:red}
.col-2{float:left;min-height:100%;width:40%;background-color:green}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1"></div>
<div class="col-md-6 col-2"></div>
</div>
</body>
</html>
Here is a sample:
https://jsfiddle.net/001cbskq/
You are using bootstrap but I am not in this example.
Related
I try to make a layout with a right column with bootstrap. However, I don't know how to do it in order to have a disposition like this.
I've tried different things but the right column doesn't have the size of the content of the left. I'm on bootstrap 3.
This is what've tried but has you can see the right column doesn't have the height of the 3 left content.
bootply
Can you help me?
You can do it using bootstrap rows/cols, and add flexbox on top. You could do this with bootstrap alone if you used bootstrap 4, since it utilizes flex instead of floats for the rows/cols.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
</style>
<div class="container">
<div class="row flex">
<div class="col-xs-8">
<div class="row flex wrap">
<div class="col-xs-6 red">1</div>
<div class="col-xs-6 yellow">2</div>
<div class="col-xs-12 blue">3</div>
</div>
</div>
<div class="col-xs-4 green">4</div>
</div>
</div>
Looks like what you are wanting to do is something like:
<div class="row equal-height-cols">
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
.equal-height-cols{
display: flex;
flex-wrap: wrap;
justify-content: stretch;
}
You will need to pus some content in there to see it in action, but that should set you up with what you are looking for.
*edit: misunerstood exact meaning of questions, updated
You can use flexbox, it is the best approach for this, or your can use your right column as a absolute position and make it height: 100% and width: 100%, providing a max-width size, please see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here you have a codepen demo :D
https://codepen.io/johuder33/pen/awYoBo
I've been reading lot of answers on how to have same height columns within the same row, but none seems to work in my case. I know the solution is probably something really dumb, but I cannot figure it out...
So, first I created a style.css and imported it in my index.php this way (I also include the other style reference I am actually using and the important part of the code below):
index.php
<link rel="stylesheet" href="./static/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/animazione.jpg" alt="Animazione" style="width:100%">
<div class="caption">
<h2>Some text COL2</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/rinnovabili.jpg" alt="Rinnovabili" style="width:100%">
<div class="caption">
<h2>Some text COL2</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/rugby.jpg" alt="Rugby" style="width:100%">
<div class="caption">
<h2>Some text COL3</h2>
</div>
</div>
</div>
</div>
My style.css is like (as proposed here):
style.css
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
After that, I tried to replace <div class="row"> with <div class="row equal"> but nothing happened: the columns are still each a different height. I also tried to set the first row of my style.css to .row.equal{ but still with no luck.
I am using FireFox ver. 53. When i open the Developer Tools, I can see that display: flex; in my css is ignored (it's ruled out). I guess it is something related to flexbox, but I am a novice and I really don't know how to solve this problem.
I also created a bootply as suggested. Hope it will help understanding my point.
The columns are equal height, but the thumbnails inside the columns are not filling the height. Just set the height...
.row.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
height: 100%;
}
.thumbnail {
height: 100%;
}
https://www.bootply.com/8wQiUUKL53
I guess the flex property was getting overriding by the bootstrap classes and can be resolved by '!important' in your custom css.
.target-class{
display: flex !important;
}
But you can simplify the code by removing the predefined thumbnail class and styling it in your own way.
Display your parent class as flex and align your children as 'stretch' (will give the height equal to the height of the parent div).
.parent {
background: lightgrey;
display: flex;
}
.child {
align-items: stretch;
flex: 1;
background: #fff;
margin: 10px;
padding-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="parent">
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL2 some text</h2>
</div>
</div>
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL2 some more text</h2>
</div>
</div>
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL3</h2>
</div>
</div>
</div>
</div>
</div>
</div>
Simple html below. The purpose is to make left span height 100% of outer div height and than center its text vertically (i.e. "abc" should become one one line with "ghi"). Result on the screenshot (chrome, win10): styles has no effect.
"row-eq-height" used to make columns of same height and are copied from here.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div style="display: table;">
<div class="row row-eq-height">
<div class="col-md-6" style="background-color: lightblue">
<span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span>
</div>
<div class="col-md-6" style="background-color: lightcoral">
def<br/>ghi<br/>jkl
</div>
</div>
</div>
</div>
</body>
</html>
How should I fix it to make span 100% of height?
UPD: SOF's "run snippet" shows span with 100% height but not centered text. Wonder why result differs from chrome.
Use the following style for parent div to center the text of child div/span :
style="display: flex;align-items: center;"
In your code,change the following line:
<div class="col-md-6" style="background-color: lightblue;">
into
<div class="col-md-6" style="background-color: lightblue;display: flex;align-items: center;">
you can use div instead of span, but giving span display:block can do the trick
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span{
display:block;
}
</style>
</head>
<body>
<div class="container">
<div style="display: table;">
<div class="row row-eq-height">
<div class="col-md-6" style="background-color: lightblue">
<span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span>
</div>
<div class="col-md-6" style="background-color: lightcoral">
def<br/>ghi<br/>jkl
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way that I can make the nested columns height equal the row height? Currently they only equal 75% of the row height. I have tried setting the column height vs css, but that doesn't seem to work either.
<body>
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="row">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-md-12">
<h1>Current Visitors</h1>
<h2>0</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Online Orders</h1>
<h2>00</h2>
</div>
</div>
</div>
<div class="col-md-8">
Grid Here
</div>
</div>
</body>
I think you are looking for something like this? https://jsfiddle.net/0cL2qaq1/3/
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
im trying to use bootstrap for a site, but what i am trying to achieve to have to columns within a row col-sm-6. Where i want one column to be in an ordinary container and the other to have container fluid effect.
So it would one column as normal and the other column as full width. So far this has been difficult to do:
<div class="container">
<div class="row">
<div class="col-sm-6 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
http://jsfiddle.net/8fyjtn09/
i think i figured it out, instead of using a normal container i would have to use container fluid as i said before but just an offset
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-2 col-xs-4 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
Do you know flex-box layout in CSS ?
As i understand your question, i believe that on wider screens you want to have first column fixed and second column should be responsive. And for a smaller screen you want the default bootstrap behaviour. If this is what you are looking for, i have created a simple fiddle. Please check that and let me know if this is helpful.
Here is the link : https://jsfiddle.net/YameenYasin/7zaxx06z/23/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="row flexbox">
<div class="first">
</div>
<div class="second">
</div>
</div>
</div>
.flexbox {
display: -webkit-flex;
-webkit-flex-flow: row; // Children elements will be in rows
-webkit-flex-wrap: wrap;
width: 100%;
}
.first
{
border:1px solid red;
height:50px;
width:200px;
}
.second{
border:1px solid green;
width:100%;
-webkit-flex: 1;
height:50px;
}
#media (max-width: 767px) {
.flexbox {
-webkit-flex-flow: column;
}
.first,.second{
width:100%;
}
}