i want to add bootstrap row with col-lg-3class. my div contains different heights.hope to add articles with different length texts.
my output is but designed expected output and here. code as follows
<div class="row">
<div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
<div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
<div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
<div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
Updated
values put as 1,2,3 etc comes from mysql database. so the height is equal to text row numbers. php code is follows
`
foreach ($value as $add) {
echo "<div class='col-md-3'><p>";
echo $add->item;
echo "</p></div>";
}
?>`
Perhaps, I ruin your original code. I change everywhere. I hope this helps you.
Add customized stylesheet inside tag head:
<style>
.col-md-3{padding:0px;} // default: 15px -> left and right.
</style>
Here's the code:
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
1
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
5
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
2
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #b56969;height: 70px;">
6
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
3
</div>
<div class="col-md-12" style="background-color: #daad86;height: 20px;">
7
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
4
</div>
<div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
8
</div>
</div>
</div>
</div>
Because I don't know what version of your bootstrap, I use v3.1.1 for clearfix ... you can customize this based on your version.
You are on right track. This will definitely work. You need to use col-md-3 like this :
<div class="row">
<div class="col-md-3">
<p>1</p>
<p>5</p>
</div>
<div class="col-md-3">
<p>2</p>
<p>6</p>
</div>
<div class="col-md-3">
<p>3</p>
<p>7</p>
</div>
<div class="col-md-3">
<p>4</p>
<p>8</p>
</div>
</div>
I think try this
<div class="row">
<div class="col-lg-5">
<div id="1" ></div>
<div id="5" ></div>
</div>
<div class="col-lg-5">
<div id="2" ></div>
<div id="6" ></div>
</div>
<div class="col-lg-5">
<div id="3" ></div>
<div id="7" ></div>
</div>
<div class="col-lg-5">
<div id="4" ></div>
<div id="8" ></div>
</div>
</div>
Hope this will help you..
You can first use columns with col-lg-3 and then place your blocks inside each one. That way you will get your desired result.
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
</div>
</div>
CSS:
.grid-row{
margin-left: -15px;
margin-right: -15px;
}
.left-block{
float: left;
width: 100%;
}
Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/
Hope that helps.
Related
const slidesLength = slideRight.querySelectorAll('div').length / 2;
<div class="right-slide">
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic1.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic2.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic3.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic4.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic5.jpg);"></div>
</div>
</div>
I am trying to target the inner most using querySelectorAll(), but I am unsure of how to do that. With the JS code I have right now, I am able to to get the exact number of divs I want, but only by using a different method. I was wondering whether or not there is a way where I can disregard the divs with background-color and only obtain the ones with background image.
Yes, document.querySelectorAll('.right-slide div[style*=background-image]') will get a list together of all divs inside of .right-slide that have a background-image as an inline style
const bgImageDivs = document.querySelectorAll('.right-slide div[style*=background-image]');
console.log(bgImageDivs)
<div class="right-slide">
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic1.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic2.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic3.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic4.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic5.jpg);"></div>
</div>
</div>
You could use a for loop to check it if the div has background-image or not.
let div = document.querySelectorAll('div');
let num =0;
for(let i =0;i<div.length;i++){
if(div[i].style.backgroundImage !=='')
num++
}
console.log(num)
<div class="right-slide">
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic1.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic2.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic3.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic4.jpg);"></div>
</div>
<div style="background-color: #773f47bd">
<div style="background-image: url(/pic5.jpg);"></div>
</div>
</div>
I have here a user profile. I have the html and css code perfect the way I want it.
But what I need now is to combine my html and css together. But I am not sure how to. Because without the css it changes the display of the user profile.
Could someone help me please?
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
All You Need To Do Is Rap It In <style> ADD CODE HERE </style>
Just wrap the CSS in <style> tags.
Example
<style> /* Note the opening style tag */
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce;
}
.tital {
font-size:16px;
font-weight:500;
}
.bot-border {
border-bottom:1px #f8f8f8 solid;
margin:5px 0 5px 0;
}
</style> /* When you're done with the CSS, close the style tag. */
You can keep it exactly where you already have it in your HTML. Here is the exact code you'd use:
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center">
<img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar</h4>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Last Name:</div>
<div class="col-sm-7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
</div>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
</style>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
Put your css code in <style></style> tag and js in <script></script> tag. That's it
I have an image that is supposed to appear on a website page. It works in Firefox, but does not appear in either Safari or Chrome for some reason. This is the line I have used for the image in the JS file:
$("#picture").append("<img src='/images/sub1/Green_graph.png' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")
I can't seem to figure out why it appears in one browser but not the others and have not yet found an answer to this problem.
Edit: this is the code from the HTML file:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
You are appending an img to an img. I'm surprised that worked at all.
Either change the parent tag:
<span id="picture"></span>
$(document).ready(function(){
$("#picture").append("<img src='https://www.fillmurray.com/300/250' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<span id="picture"></span>
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
Or set the attributes on the existing tag.
$(document).ready(function(){
$("#picture").attr("src", "https://www.fillmurray.com/300/250");
$("#picture").attr("alt", "Bill is awesome");
//Style should really come from a stylesheet, but I'll leave it for now
$("#picture").attr("style", "width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</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>