Stack layout differently on mobile devices - javascript

I have been trying to stack three div's differently based on desktop, mobile and tablet with out having to duplicate the div's.
It should look like this
Is this possible with pure css?
A javascript answer will be fine if there is no way to do this with css alone.
Here is a fiddle
https://jsfiddle.net/DTcHh/19086/
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-12 sidebar-block">
<div class="block" style="background-color:red;"></div>
</div>
<div class="col-lg-6 col-sm-8 col-xs-12 ">
<div class="block" style="background-color:blue;"></div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="block" style="background-color:yellow;"></div>
</div>
</div>
Thanks in advance!


If you think "mobile first", use col-*-push/col-*-pull classes like this..
<div class="row">
<div class="col-lg-6 col-lg-push-2 col-sm-8 col-sm-push-4 col-xs-12 ">
<div class="block" style="background-color:blue;"></div>
</div>
<div class="col-lg-2 col-lg-pull-6 col-sm-4 col-sm-pull-8 col-xs-12 sidebar-block">
<div class="block" style="background-color:red;"></div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="block" style="background-color:yellow;"></div>
</div>
</div>
http://www.codeply.com/go/N8wCdrlkK3

Related

there is bug in my working code.it does not work properly

thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>

Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.

Change Panel heading color based on click and show panel body content

I have a panel which is divided into 3 section.
When I click on other section then it's background color should change along with its text color and according to it, panel body content should get changed.
app.controller('three_panel_controller', function () {
$scope.switch_panel = false;
})
.clicked_section_background_color{
background: #2fabe9;
color:#ffffff;
}
.unclicked_section_background_color{
background: #f5f5f5;
color:#000000;
}
.padding_top_bottom_15{
padding-top:15px;
padding-bottom:15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = !switch_panel"
ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
<span class="font_size_14">Compose</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = !switch_panel"
ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
<span class="font_size_14">Subject</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
<div class="panelbody">
<span>Show div on compose click</span>
</div>
<div class="panelbody">
<span>Show div on subject click</span>
</div>
<div class="panelbody">
<span>Show div on send click</span>
</div>
</div>
just like in the image
Any help would be great.
thank you.

You could track which one is selected in your scope variable switch_panel , by assigning an Id to every panel:
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = '1'"
ng-class="{clicked_section_background_color : switch_panel == '1', unclicked_section_background_color : switch_panel !='1'}">
<span class="font_size_14">Compose</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = '2'"
ng-class="{clicked_section_background_color : switch_panel == '2' , unclicked_section_background_color : switch_panel !='2'}">
<span class="font_size_14">Subject</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
Then for your second part:
<div class="panelbody" ng-if="switch_panel=='1'">
<span>Active panel 1</span>
</div>
<div class="panelbody" ng-if="switch_panel=='2'">
<span>Show div on subject click</span>
</div>
<div class="panelbody" ng-if="switch_panel=='3'">
<span>Show div on send click</span>
</div>
Working Sample: https://plnkr.co/edit/0eDZX467y22tDuW7wMef?p=preview

Try something like this:
//Controller
app.controller('three_panel_controller', function () {
$scope.switch_panel = false;
$scope.currentTab = 'first';
})
//View
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="currentTab=first"
ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
<span class="font_size_14">Compose</span>
</div>
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="currentTab=second"
ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
<span class="font_size_14">Subject</span>
</div>
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15" ng-click="currentTab=third">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
<div class="panelbody" ng-if="currentTab=first"> <-- added ng-if
<span>Show div on compose click</span>
</div>
<div class="panelbody" ng-if="currentTab=second"> <-- added ng-if
<span>Show div on subject click</span>
</div>
<div class="panelbody" ng-if="currentTab=third"> <-- added ng-if
<span>Show div on send click</span>
</div>

Responsive Row Not Respecting Height Of DIVs inside it

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>

How to create the following responsive layout with bootstrap?

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>

How to layout grid items properly in a responsive site

I am working on designing the layout a site which currently looks like this Site snapshot
However, currently sub-elements on page have irregulars height. Can you please suggest any tutorial or approach for such problems?
Using Bootstrap framework and responsive design.
UPDATE:
I know that I can write it this way:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
But I don't know how to add elements to columns properly?
Should I measure hight of elements in JS and then append them to columns?

To have the same result just split the page un 3 divs of equal size and add others divs in these columns for the article.
Something like :
#column {
width: 30℅;
display: inline-block;
}
#article {
width: 100℅;
}

Categories