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.
Related
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;
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
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 played with bootstrap a little, then I found this annoying problem about how to centering a span class. After trying offset to do centering some span, I can centering a certain span class like (span8 with offset2, or span6 with offset 3), but the problem is, I want to centering the span7/span9/span10.
Then I trying to use some tricks to centering the span10...
<div class="container"> <!--Or span12 since the width are same-->
<div class="row">
<div class="span1" style="background:black;">Dummy</div>
<div class="span10" style="background:blue;">The Real One</div>
<div class="span1" style="background:black;">Dummy</div>
</div>
</div>
Is there any solution rather than using the code above?
And what should I do if I want to centering the span7, span9 or even span11 without changing the row margin-left value? Because the class row already set the margin-left by 20px, that makes me hard to centering the span.
Centering "even" .spanN? Use .offsetN
<div class="span10 offset1">
Centering "odd" .spanN? Impossible using framework resources. As you decided to use Twitter Bootstrap, you assumed working with a grid. If you center an "odd" column width element, you're breaking the grid, so there are no Bootstrap tools to do that.
There's a theoric (but strange) solution: duplicate your column count. In a 24-column layout, a .span7 becomes a span14, wich you can center with an .offset5.
This is a non-issue in Bootstrap 3, but for Bootstrap 2.x, I've come up with a CSS workaround that creates a 'half' offset that can be used to center (almost) odd numbers of spans. These half spans create a percentage that is half the standard offsetX in the bootstrap.css
/* odd span centering helpers */
.row-fluid .offsetHalf {margin-left:8.5% !important;}
.row-fluid .offsetHalf1 {margin-left:12.9% !important;}
.row-fluid .offsetHalf2 {margin-left:21.6% !important;}
.row-fluid .offsetHalf3 {margin-left:25.6% !important;}
Link to demo