This question already has answers here:
Bootstrap 4 row fill remaining height
(3 answers)
Closed 2 years ago.
Sorry for the newbie post but I am new to bootstrap (using version 4.0) and have been doing a lot of reading but have not been able to achieve the simple task of stack two divs on top of each other.
<div class="d-flex flex-column">
<div style="background: blueviolet">
Flex item 1
</div>
<div style="background: burlywood">
Flex item 2
</div>
</div>
My aim is to have Flexbox 1 50% height and Flexbox 2 fill the remaining height or have Flexbox 1 at 40% height and have Flexbox 2 fill the remaining space.
I have been following bootstrap documentation to learn. What other resources could I look into?
Thank you for the help.
You can use the class flex-fill to auto-fill for the rest of the space.
Try to adjust the height of class .item-1 to see the result.
https://jsfiddle.net/ramseyfeng/bqvwcLe5/1/
html,body {
height: 100%;
}
.item-1 {
height: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-column h-100">
<div style="background: blueviolet" class="item-1">
Flex item 1
</div>
<div style="background: burlywood" class="flex-fill">
Flex item 2
</div>
</div>
There are normally a couple of properties to ensure are set on the parent and each child in order to get flex items to behave how one expects.
Check out this handy summary:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could also refer to this one:
https://www.w3schools.com/css/css3_flexbox.asp
Your example displays as two divs, one vertically above the other. Is this not what you want? Or do you just want them to be taller?
If you want your enclosing DIV to be taller in order to cause your flex items to stretch taller, you could consider setting a min-height of the wrapper. For example, see How can I make my flexbox layout take 100% vertical space? or flexbox + bootstrap 4. How to stretch child of .col-**-*?
If you want an item to be 50% of the visible window space, you could use this css on that object: min-height: 50vh;
Related
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 3 years ago.
I have a container with two flex items. The last flex item is also a flex container which allows its flex items to wrap. My goal is for that last flex item to only occupy as much space as needed, so that when its children wrap, the two main flex items can be centered within the main flex container.
In other words, I would like the red div to only be as wide as necessary, so that the blue and red divs can be centered within the green div. No matter what classes I apply I can't seem to get this to work.
In this example I am using Tailwind classes, but it's still a general CSS question.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/>
<div class="border-2 border-green-500 flex items-center justify-center" style="width:700px;">
<div class="border-2 border-blue-500 mr-2">
Left
</div>
<div class="border-2 border-red-500 flex flex-wrap">
<span>Right side has much longer text that I would like to wrap.</span>
<span>When it wraps why is the red parent still full width?</span>
</div>
</div>
Here's a JSFiddle: https://jsfiddle.net/flyingL123/26jxpqez/12/
Set the flex-basis CSS property of the right div to 0.
Example
Edit: If you want the div to take up more width, you can replace 0 with some other value, e.g. 200px.
I am trying to create my own blogger template. I want to have posts on three column. I tried to ad float on the post component but it create bugs.
My blog with float : https://words-deep-water.blogspot.fr/
The code is here : https://words-deep-water.blogspot.fr/2017/03/version1.html
Could you help me ?
Better try to use 3 column responsive blogger template. There are many free responsive templates available for blogger users. If you added extra style code then it may affect mobile users.
Didn't much understand from the link you posted.But if you are looking to divide a row into 3 equal columns to show the posts, you might want to have a look at this:
http://materializecss.com/grid.html.
<style>
.row {width : 100%}
.col s4 {width : 33.33%}
</style>
<div class="row">
<div class="col s4">This div takes 33.33% width of the outer div. POST 1</div>
<div class="col s4">This div takes 33.33% width of the outer div. POST 2</div>
<div class="col s4">This div takes 33.33% width of the outer div.POST 3</div>
</div>
Using something similar to above code,you might be able to achieve your functionality.
Explanation of the code: We have a div with class row which gives it width 100%. And all the inner divs inside it will take 33.33% width of the outer div giving us three divs of equal width.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I need divs always to display in 3 columns regardless of their heights in flex parent and number of the divs (it can be 10 or more - but always in 3 columns - underneath each other) How do I make it? Code Pan example appreciated.
EDIT:
<div class='main'>
<div class='div'>1</div>
<div class='div'>2</div>
<div class='div'>3</div>
<div class='div'>4</div>
</div>
.main {display:flex;flex-direction:row;background:silver;}
.div {width:33%; height:10px;background:gold;margin:10px;}
Here is my EXAMPLEhttp://codepen.io/broudi/pen/MyVNyz - there are 4 equal divs in parent flex div. I need no matter how much divs there are in parent div always to situate them in 3 columns(so one underneath another if first 3 places are taken).
NEW EDIT: ANOTHER PROBLEM: HERE IS MY CODE:http://codepen.io/broudi/pen/MyVNyz
The problem is that if one or more of thechild dovs have height different then others then the div below doesnt go as it supposed to. it takes some space. Please, check out my CODEPAN example. How can I makkw inner divs no matter what go one after another with equal 5px margin regardless of their heights?
you have to give the parent flex-wrap:wrap; andto the div 30% not 33% because of the margin:10px; and now you will always have a row of 3 div's
even put in justify-content:space-around; or between for that it looks better
.main {display:flex;flex-direction:row;background:silver; flex-wrap:wrap; justify-content:space-around;}
.div {width:30%; height:10px;background:gold;margin:10px;}
<div class='main'>
<div class='div'>1</div>
<div class='div'>2</div>
<div class='div'>3</div>
<div class='div'>4</div>
<div class='div'>5</div>
<div class='div'>6</div>
<div class='div'>7</div>
<div class='div'>8</div>
<div class='div'>9</div>
<div class='div'>10</div>
<div class='div'>11</div>
<div class='div'>12</div>
</div>
I am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:
So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.
Is that even possible? Also there should be some space between blocks, so background image should fill those space.
Please help me out.
What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.
Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.
#media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}
I think the most efficient way to do this is to simply use a single row with three columns. Your divs can stack inside the appropriate columns, and you can define the heights for each one. You can see it in action here: http://jsfiddle.net/StSmith/Z9SpM/1/
<div class="container">
<div class="row">
<div class="col-lg-6">
<div id="box1">1</div>
</div>
<div class="col-lg-3">
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="col-lg-3">
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
A simple way to do this is to declare the divs in the order you listed, and then apply a simple float: left. If you define the heights of each div manually it should all fit into place!
Rachel's got the right idea. You really just need to nest rows into a container, then use CSS to adjust the heights.
I have two div-columns of different height which I like to have the same height. I achieved this using the padding-margin hack with the following css for my div-columns:
.lane1 {
padding-bottom: 800px;
margin-bottom: -800px;
}
The html is displaying a flow-diagram. I would like to have a line from the end of each lane to the bottom of the two-lane part to have a continuous diagram.
I tried to achieve this with an additional div with class .LineFilling that is a line going down, but I don't know how heigh the line should be. So I put
position: absolute;
overflow: hidden;
in the .lane1-class and made the .LineFilling-element of height 600px, but that doesn't work, since the overflow is displayed. Is there a way to have the .LineFilling-element extend to the end of the lane? Or extend further but the overflow being cut?
Thanks for help.
EDIT: I posted the code online here: Click here to see code
Yes it is possible with pure css.
I have used display table-row and table-cell properties to achieve it.
HTML:
<div class="parent">
<div class="child">
<p>line 1</p>
</div>
<div class="child">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</div>
CSS:
.parent{display:table-row;}
.child{display:table-cell;border:1px solid #ccc;padding:10px;}
p{margin:5px 0;}
See fiddle.
Update: probable solution DEMO
Pure CSS solution
Here is a DEMO of that solution.
In this DEMO, you see multipple Rows,
each Row can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called ElementsHolder, and can have any number of Elements you want.
all the column in a row will always have the same height, and the last arrow in the row will fill that space.
In the DEMO you can see 3 Rows.
The First Row has the starting point, so no stretch needed there.
The Second Row has 3 ElementsHolder, without stating anything special in the markup, 2 of them will stretch to fill the gap.
The Third Row has 2 ElementsHolder, behave as expected.
notice that the stretching works regardless of the Elements height. (some of them have 2 or 3 lines of text, and it works perfectly)
If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)
The solution is done by using the new CSS flex model.
the direction is set via flex-direction: row;,
Each row has ElementsHolders that gets equal width.
each one of those ElementsHolder is also a flex box, but this time his direction is opposite (flex-direction: column;).
the child's of ElementsHolder are Elements & Arrows, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.
all of that is achieved using the flex property with the appropriate values.
More about the flex-model can be found HERE
I don't know if I really understand what you need. I've tried the following
Adding a new absolute element in the laneContainer with height: 100%
#straightLine {
background-color: #FFBF80;
height: 100%;
left: 104px;
position: absolute;
width: 3px;
z-index: 5;
}
Plus some small modifications to some other objects, you'll find them in the fiddle...
http://jsfiddle.net/RRupc/9/
Is something like that what you want?
Rather than adding another div to fill the space, wouldn't it be easier to add a class to the div on the left column, and style that to fill any spacing/line requirements you have?
So you could have:
HTML:
<div class="twoColumn">
<div class="column">
<div class="step doubleRow">
<p>One step covering two rows here</p>
</div>
</div>
<div class="column">
<div class="step">
<p>Single size step</p>
</div>
<div class="step">
<p>Single size step</p>
</div>
</div>
</div>
have you seen these 2 plugins?
jQuery Isotope
jQuery Mansonry
Eventually there is a solution for you!?
Take a look.
FlexBox could be worth a look too.
if you are ok with IE10 +
Auto Align Heights (CSS)
align-items: stretch
Good Reads here and here
Cheers,
Rob