I'm trying to make a grid based on bootstrap only I need 1 div to span 3 rows.
I've added a picture below inclusive the code I used. For the main grid I used a generator but now I get stuck.
The div which says REMOVE I added as a dummy and need to be removed. only when I do that the div with MOST READ will move to the right and closes the gap.
What I'm trying to achieve is that COMMENTS - SITE FEED will span 3 rows (vertically downwards) next to, in the spot light, quiz/poll and most read.
How can I do this with wrapping some stuff so it not move and shift anymore :-)
<div class="container">
<div class="row">
<div class="col-md-12">col-md-12 - MARQUE</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8 - CAROUSEL</div>
<div class="col-md-4">col-md-4 - MY STUFF</div>
</div>
<div class="row">
<div class="col-md-12">col-md-12 - 5 ARTICLES</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6 - LOCAL NEWS</div>
<div class="col-md-6">col-md-6 - SEGMENTS NEWS</div>
<div class="col-md-6">col-md-6 - COUNTRY NEWS</div>
<div class="col-md-6">col-md-6 - TWITTER</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3 - BLOG</div>
<div class="col-md-3">col-md-3 - IN SPOT LIGHT</div>
<div class="col-md-6">col-md-6 - - COMMENTS - SITE FEED</div>
<div class="col-md-3">col-md-3 - STEEL FABRIC</div>
<div class="col-md-3">col-md-3 - QUIZ/POLL</div>
<div class="col-md-6">col-md-6 - remove !!!!</div>
<div class="col-md-6">col-md-6 - MOST READ</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3 - UNDETER 1</div>
<div class="col-md-3">col-md-3 - UNDETER 2</div>
<div class="col-md-3">col-md-3 - UNDETER 3</div>
<div class="col-md-3">col-md-3 - SHAREHOLDER</div>
</div>
<div class="row">
<div class="col-md-12">col-md-12 - QUICK ACCESS</div>
</div>
I have not tried the suggested code but I will soon. I've noticed I was not so clear after all so I made a second picture. The Red block represent the COMMENTS SITE FEED div how i need it in the end result. Hopefully it helps a bit thanks so far guys. it#s really appreciated!
enter image description here
You have to nest row in another row to achieve your goal.
HTML:
<div class="container">
<div class="row">
<div class="col-md-12 red col">col-md-12 - MARQUE</div>
</div>
<div class="row">
<div class="col-md-8 blue col">col-md-8 - CAROUSEL</div>
<div class="col-md-4 green col">col-md-4 - MY STUFF</div>
</div>
<div class="row">
<div class="col-md-12 orange col">col-md-12 - 5 ARTICLES</div>
</div>
<div class="row">
<div class="col-md-6 blue col">col-md-6 - LOCAL NEWS</div>
<div class="col-md-6 green col">col-md-6 - SEGMENTS NEWS</div>
</div>
<div class="row">
<div class="col-md-6 green col">col-md-6 - COUNTRY NEWS</div>
<div class="col-md-6 blue col">col-md-6 - TWITTER</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 orange col">col-md-3 - BLOG</div>
<div class="col-md-6 blue col">col-md-3 - IN SPOT LIGHT</div>
</div>
<div class="row">
<div class="col-md-6 green col">col-md-3 - STEEL FABRIC</div>
<div class="col-md-6 orange col">col-md-3 - QUIZ/POLL</div>
</div>
<div class="row">
<div class="col-md-12 red col">col-md-6 - MOST READ</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 green comments-site-feed">
col-md-6 - - COMMENTS - SITE FEED
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 green col">col-md-3 - UNDETER 1</div>
<div class="col-md-3 blue col">col-md-3 - UNDETER 2</div>
<div class="col-md-3 orange col">col-md-3 - UNDETER 3</div>
<div class="col-md-3 green col">col-md-3 - SHAREHOLDER</div>
</div>
<div class="row">
<div class="col-md-12 red col">c`ol-md-12 - QUICK ACCESS</div>
</div>
</div>
CSS:
.col {
background: #ccc;
height: 125px;
}
.row > .red {
background: red;
color: #fff;
}
.row .blue {
background: blue;
color: #fff;
}
.row .green {
background: green;
}
.row .orange {
background: orange;
}
.row > .comments-site-feed {
background: black;
color: #fff;
height: 375px;
}
CODEPEN
I may have misunderstood what exactly you are going for but I think you may have to nest some elements in order to get the rowspan effect you are looking for.
<div class="row">
<div class="col-md-6">COMMENTS - SITE FEED</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">STEEL FABRIC</div>
</div>
<div class="row">
<div class="col-md-12">QUIZ/POLL</div>
</div>
<div class="row">
<div class="col-md-12">MOST READ</div>
</div>
</div>
</div>
You need to group these divs as two columns.
The following should achieve the desired grid layout:
<div class="row">
<div class="col-md-6">
<div class="col-md-6">col-md-6 - BLOG</div>
<div class="col-md-6">col-md-6 - IN SPOT LIGHT</div>
<div class="col-md-6">col-md-6 - STEEL FABRIC</div>
<div class="col-md-6">col-md-6 - QUIZ/POLL</div>
<div class="col-md-12">col-md-12 - MOST READ</div>
</div>
<div class="col-md-6">
col-md-6 - - COMMENTS - SITE FEED
</div>
</div>
Related
I try to make infinity scroll table with only currently visible items rendered in HTML. But with some millions of entries I encountered glich in rendering extreme tall placeholders for unloaded data.
I tried this with div elements and HTML tables too but with similiar glitch.
Please use Chrome to reproduce the problem. With Firefox is problem too but it behaves differently.
Here is minimal example code:
https://jsfiddle.net/bj0tmh2r/
<style>
.row {
border-bottom: 1px solid #f00 !important;
}
</style>
<div class="table-responsive" style="max-height: 600px;">
<div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #f00;height: 33100000px;">
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #0f0;height: 299px;">
</div>
</div>
</div>
If you scroll to last .row elements, you can see missing bottom red borders between rows.
Why this happens. How to avoid it?
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
I want to achieve something like this
So, in the image , A is occupying two rows and B is occupying two columns
I tried, something like this, but as you can see, the logo is never
two column wide, because it is inside a nested row, so it never looks aligned , it always looks shorter or larger
.row{
border:1px solid red;
}
.row div{
min-height: 100px;
border:1px solid black;
}
<div class="container-fluid">
<div class="row upper-row">
<div class="col-md-7" id="">
<div class="row">
<div class="col-md-12">
x
</div>
</div>
<div class="row">
<div class="col-md-8">
s
</div>
<div class="col-md-4">
LOGO
</div>
</div>
</div>
<div class="col-md-5" id="">
A
</div>
</div>
<div class="row bottom-row">
<div class="col-md-5" id="">
</div>
<div class="col-md-7" id="">
B
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
A
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
B
</div>
</div>
I'm sure I'm overcomplicating this in my head, but is the following layout possible using the standard bootstrap 3 grid system?
Header and sub header can fill 12 columns. Then Image, probably fixed height, spans 8-col then a side bar which spans 4-col. The problem is the side bar has an undefined height and the underneath of the image is content.
So far got something like:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
<div class="col-sm-8">
Content
</div>
</div>
Layout
According to your image
You should use the following layout (Click the "Full page" button to see it in action. Also, ignore the CSS. It's just for testing purposes):
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
[class*='col-'] > div:not(.row) {
background: #DDD;
margin: 0.25em 0;
padding: 0.5em;
text-align: center;
height: 5em;
}
.red [class*='col-'] > div:not(.row) {
background: #C55;
color: #FFF;
height: auto;
}
[class*='col-sm-4'] > div:not(.row) {
height: 9em;
}
<div class="container">
<div class="red row">
<div class="col-sm-12">
<div>HEADER</div>
</div>
<div class="col-sm-8">
<div>SUB HEADER</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div>IMAGE</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div>LEFT COL</div>
</div>
<div class="col-sm-6">
<div>RIGHT COL</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div>SIDEBAR</div>
</div>
</div>
</div>
Essentially you want a nested row with 6 wide columns for a 12 column grid layout.
Bootstrap row has only twelve spans. I see that 8 + 4 + 8 = 20 > 12, so the "content" div will be at a new line...
And you can't put col-sm-x with col-md-x in the same row...
My suggestion: split into two rows
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>
<div>
<div class="col-sm-8">
Content
</div>
</div>
But If you want all of it in the same row:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-5">
image
</div>
<div class="col-md-2">
Navigation down right
</div>
<div class="col-md-5">
Content
</div>
</div>
And if you want a side section, you can cascade rows:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
Image
</div>
</div>
<div class="row">
<div class="col-md-12">
Content
</div>
</div>
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>
This is what I want to achieve : http://i.imgur.com/n91OYWN.png
How can I construct the above layout using bootstrap? The left part (2 col) and the right has 1 col, I color them so you can see.
The problem is this is not a static site. So here's the take for the markup
<div class="row">
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
orange
</div>
</div>
<div class="row">
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
orange
</div>
</div>
the orange and the white will mix up in mobile and above markup is hard to maintain because I have to loop using php to display the content for the white box.
This is very easy to do with the push and pull classes that come with bootstrap 3.
DEMO: http://jsbin.com/riniri/1/
This will have orange on top on small viewports (under the col-lg- class) and will be on the right when it's at that min-width or larger.
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8">
<div class="box orange"></div>
<div class="box orange"></div>
</div>
<div class="col-lg-8 col-lg-pull-4">
<div class="row">
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
</div>
</div>
</div>
</div>
DEMO CSS ONLY:
.box {width:100%;height:300px;margin-bottom:30px;border:5px solid #000}
.orange {background:orange}
Instead of using many rows, Use one row which contains three children divs.
<div class="row">
<div class="col1 col-lg-4" id="left">
<div>White 1</div>
<div>White 1</div>
<div>White 1</div>
<div>White 1</div>
</div>
<div class="col2 col-lg-4" id="middle">
<div>White 2</div>
<div>White 2</div>
<div>White 2</div>
<div>White 2</div>
</div>
<div class="col3 col-lg-4" id="right">
<div>Orange</div>
<div>Orange</div>
</div>
</div>
The children divs (White 1, White 2 and Orange) may be dynamically generated, and insert them correctly to the targets (#left, #middle, #right) by code (either PHP or JS).