I’m using the Packery layout mode in Isotope JS. I was using Masonry, but I found I was getting more desirable results using this mode instead, but I’m totally open to other options. I’m also using it integrated with the Bootstrap responsive grid as described here. Everything is working great with the exception of one thing.
I have a single-wide tile, then a double-wide tile, followed by several single-wide tiles. Everything looks great in the Bootstrap 4 and 3 column configurations. As soon as I collapse it to the 2 column configuration, I only have 1 single-wide tile up top in the first position. The double-wide is below, and all the single wide tiles show up side-by-side (2 per row) all the way down, as desired. There is even 1 tile left over at the bottom by itself, that if rearranged, each single-wide tile would be paired with another of the same type.
Here are some quick grids of the 3 different column configurations for some visualization:
4-Columns: 3-Columns: 2-Columns:
+--+--+--+--+ +--+--+--+ +--+--+
|88|88888|88| |88|88888| |88| <---this empty tile right here...
|88|88|88|88| |88|88|88| |88888|
|88|88| | | |88|88|88| |88|88|
+--+--+--+--+ |88| | | |88|88|
+--+--+--+ |88|88|
|88<------...should be filled up by this
+--+--+ tile (or one before it)
Here's a repro:
$('.grid').isotope({
packery: {
columnWidth: '.grid-sizer'
},
itemSelector: '.grid-item',
percentPosition: true,
});
.one {
background-color: red;
}
.two {
background-color: orange;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: blue;
}
.six {
background-color: purple;
}
.seven {
background-color: red;
}
.eight {
background-color: orange;
}
.nine {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
<div class="grid-item-content">ONE</div>
</div>
<div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
<div class="grid-item-content">TWO</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
<div class="grid-item-content">THREE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
<div class="grid-item-content">FOUR</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
<div class="grid-item-content">FIVE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
<div class="grid-item-content">SIX</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
<div class="grid-item-content">SEVEN</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
<div class="grid-item-content">EIGHT</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
<div class="grid-item-content">NINE</div>
</div>
</div>
</div>
</div>
Any ideas? Thank you!
Solution below (credit to #Macsupport !):
$('.grid').packery({
itemSelector: '.grid-item',
});
.one {
background-color: red;
}
.two {
background-color: orange;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: blue;
}
.six {
background-color: purple;
}
.seven {
background-color: red;
}
.eight {
background-color: orange;
}
.nine {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/packery#2/dist/packery.pkgd.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
<div class="grid-item-content">ONE</div>
</div>
<div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
<div class="grid-item-content">TWO</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
<div class="grid-item-content">THREE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
<div class="grid-item-content">FOUR</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
<div class="grid-item-content">FIVE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
<div class="grid-item-content">SIX</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
<div class="grid-item-content">SEVEN</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
<div class="grid-item-content">EIGHT</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
<div class="grid-item-content">NINE</div>
</div>
</div>
</div>
</div>
Related
Here I have 2 rows and 2 columns in each row. I want the yellow blocks to have a margin and take all the available space in the column besides the margin. But as you can see, the margin completely misaligns the yellow content.
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
}
.content-margin {
margin: 10px;
background: yellow;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
</div>
The result I want is similar to this:
THE QUESTION: Is there any way to achieve that by adding margin to the yellow block?
NOTE: I know I can achieve that by adding padding to the COL itself, but that's no good for my real world use case.
https://jsfiddle.net/39zp4tc0/
Just use a padding on the parent (col) instead of a margin on the child:
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
padding: 10px
}
.content-margin {
background: yellow;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
</div>
I do recommend using margin to positioning and padding for that spaces between components. You can use margin: auto in combination with display flex to make a div in a specific position. You can view more information on https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change the height of the yellow column to 60% with margin: 12px 0;
Try this:
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
}
.content-margin {
margin: 12px 0;
background: yellow;
}
.h-60 {
height: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
</div>
</div>
I'd still use padding, but if you can't put it on the columns put it on an inner element acting as a wrapper for your yellow boxes.
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
}
.bg-yellow {
background: yellow;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container-fluid">
<div class="row gx-0 justify-content-md-center">
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
</div>
<div class="row gx-0 justify-content-md-center">
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
</div>
</div>
Ok, so I found a way to effectively apply MARGIN to the yellow div elements.
I'm using d-flex and align-items-stretch classes on the COL elements and using flex-grow-1 class on the yellow div elements. If we stretch the yellow elements this way, the MARGIN is respected and does not ruin the layout.
<div class="container">
<div class="row g-0 justify-content-md-center">
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
</div>
<div class="row g-0 justify-content-md-center">
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
</div>
</div>
https://jsfiddle.net/dwjk5upn/1/
NOTE: I'm using the g-0 class on the COL elements as well to get rid of the default COL paddings.
I would like to trigger the appearance of a text after pressing a button for each user individually,The objective is that if you press the button of a specific user, the text will appear only for this one and not for the others. Unfortunately my code does not work. When I click on the button the text appears for all users. How can I do it?
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button onclick="hiddenButton(this)">Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
// End the foreach loop
?>
<script>
function hiddenButton(this) {
var x = document.getElementsByClassName("DIV");
for (i = 0; i < x.length; i++)
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
</script>
</body>
This is fairly straightforward - assign a single delegated event handler to a common ancestor ( here simply the document itself ) and use the event and specifically the event.target to identify which button invoked the click event. From that you can query the DOM using querySelector ( or by other means if required such as sibling selectors )
The question title refers to using this within your function but you have that supplied as the argument where one might expect event - and you should be able to access the target property in the same manner as in the code here.
document.addEventListener('click',e=>{
if( e.target.tagName=='BUTTON' ){
let div=e.target.parentNode.querySelector('div.DIV');
div.style.display=div.style.display=='block' ? 'none' : 'block'
}
})
.DIV{
display:none
}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button>Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button>Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button>Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The meaning of this varies depending upon how it is used but using it like this function hiddenButton(this){} is not correct. Consider these simple examples of referring to this within a function / event handler.
document.getElementById('apple').addEventListener('click',function(e){
console.info(`
function(e){} /* conventional */
this:%s
this.id:%s
e.target:%s
e.target.id:%s`,
this,
this.id,
e.target,
e.target.id
);
});
document.getElementById('banana').addEventListener('click',e=>{
console.info(`
(e)={}/* arrow */
this:%s
this.id:%s
e.target:%s
e.target.id:%s`,
this,
this.id,
e.target,
e.target.id
);
});
function hiddenButton(that){
console.info(`
function(this){} /* inline */
this:%s
that:%s
this.id:%s
that.id:%s`,
this,
that,
this.id,
that.id
);
}
.fruit div{
padding:0.5rem;
width:100px;
margin:0.5rem;
display:inline-block;
text-align:center;
border:2px solid black;
border-radius:0.5rem;
}
.fruit div:after{
content:attr(id)
}
#apple{
background:green;
color:white;
}
#banana{
background:yellow
}
#plum{
background:purple;
color:white;
}
<div class='fruit'>
<div id='apple'></div>
<div id='banana'></div>
<div id='plum' onclick='hiddenButton(this)'></div>
</div>
How can i solve this problem with CSS of floating DIV like in photo:
In my case, DIV-s after red DIV doesn't float arount it.
I have created divs in this form:
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
</div>
You could wrap the left and right side in seperate div Tags, like this:
Edit: Updated Example for updated Question. You might need to watch the Stack Snippet in Fullscreen.
*Edit 2: I was wondering, why it was working on jsfiddle (https://jsfiddle.net/6z4orL6b/), but not as Stack Snippet, so instead of changing my Snippet to some kind of workadround, I decided not to change anything here. Instead, I will explain, why this happens. On JSFiddle the Custom CSS below gets applied AFTER the CSS from Bootstrap, and since it is called Cascading Stylesheet, the custom styles are overwritten by Bootstrap.
At jsfidlle on the other hand, the Bootstrap CSS gets applied first, so the custom lines overwrite the bootstrap CSS in this case, and it works.
If someone could explain to me in the comments, why the bootstrap float: left statement does not work, but the custom float: left; actually does, it would be great!
.blue {
border: 10px solid #fff;
background: blue;
height: 150px;
float: left;
}
.red {
border: 10px solid #fff;
background: red;
height: 300px;
float: right;
}
#media screen and (max-width: 768px) {
.red, .blue {
float: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 red">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
</div>
Just use in the style css the parameter:
<div style="float: inside"></div>
You can put in the float: any of the parameters suits better for you.
You can try this Html
<div class="outer">
<div c3ass="row">
<div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;">
</div>
<div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12 col-md-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:red;height:100px;border:1px solid black;">
</div>
<div class="col-lg-12 col-sm-12 col-md-12"style="background-color:red;height:100px;border:1px solid black;" >
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:pink;height:200px;border:1px solid black;">
</div>
</div>
</div>
</div>
</div>
I have three divs inside a 12 col div in a row with a min height set for the desktop view. When the viewer is narrowed, the surrounding div does not stretch to contain the now stacked divs. I know this must be a simple fix but my brain is fighting me! See the Fiddle below and thanks for your help!
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
JSfiddle
Bootstrap columns make use of the float property and therefore are not counted as block elements.
To fix this issue, you need to add overflow: auto to the containing element like so:
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px; overflow: auto;">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
JSFiddle
Try this http://jsfiddle.net/ok696Lkw/4/
HTML
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div class="row">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content
<br>Content
<br>Content
<br>Content
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content2
<br>Content22
<br>Content2
<br>Content2
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content3
<br>Content3
<br>Content3
<br>Content3
<br>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?
You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>
Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>
Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/
You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>