Bootstrap responsive 9by16
5
I am trying to provide a 'draw space' that is 16x9, but I want the user to be able to choose portrait or landscape orientation. I am already using class="embed-responsive embed-responsive-16by9". Is there an easy way to make the change using CSS?
Edit
Keep in mind that I will be adding divs into these containers. Their position within the 16x9 container should be relative to it's orientation as I wish to save the user's drawspace in order to re-create it.
jquery css3 twitter-bootstrap-3
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
add a comment |
5
I am trying to provide a 'draw space' that is 16x9, but I want the user to be able to choose portrait or landscape orientation. I am already using class="embed-responsive embed-responsive-16by9". Is there an easy way to make the change using CSS?
Edit
Keep in mind that I will be adding divs into these containers. Their position within the 16x9 container should be relative to it's orientation as I wish to save the user's drawspace in order to re-create it.
jquery css3 twitter-bootstrap-3
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
Why not use canvas and just define dimensions that way? Why the bootstrap grid? It doesn't make sense in this application.
– staypuftman
Mar 16 '16 at 16:38
My requirements are bootstrap as I don't have time to write a library around the canvas element and we are already using bootstrap, Jquery, and Jquery UI on the other 200+ pages of the site.
– Pastor Bones
Mar 17 '16 at 15:48
Hmmm, so you would probably want a 16:9 container that gets manipulated by JS to make the portrait/landscape adjustments? Can you sketch something out that shows this layout? It would be helpful.
– staypuftman
Mar 17 '16 at 18:08
add a comment |
5
5
5
I am trying to provide a 'draw space' that is 16x9, but I want the user to be able to choose portrait or landscape orientation. I am already using class="embed-responsive embed-responsive-16by9". Is there an easy way to make the change using CSS?
Edit
Keep in mind that I will be adding divs into these containers. Their position within the 16x9 container should be relative to it's orientation as I wish to save the user's drawspace in order to re-create it.
jquery css3 twitter-bootstrap-3
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
I am trying to provide a 'draw space' that is 16x9, but I want the user to be able to choose portrait or landscape orientation. I am already using class="embed-responsive embed-responsive-16by9". Is there an easy way to make the change using CSS?
Edit
Keep in mind that I will be adding divs into these containers. Their position within the 16x9 container should be relative to it's orientation as I wish to save the user's drawspace in order to re-create it.
jquery css3 twitter-bootstrap-3
jquery css3 twitter-bootstrap-3
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
edited Mar 17 '16 at 15:47
Pastor Bones
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
asked Mar 10 '16 at 14:23
Pastor BonesPastor Bones
5,00412952
5,00412952
Why not use canvas and just define dimensions that way? Why the bootstrap grid? It doesn't make sense in this application.
– staypuftman
Mar 16 '16 at 16:38
My requirements are bootstrap as I don't have time to write a library around the canvas element and we are already using bootstrap, Jquery, and Jquery UI on the other 200+ pages of the site.
– Pastor Bones
Mar 17 '16 at 15:48
Hmmm, so you would probably want a 16:9 container that gets manipulated by JS to make the portrait/landscape adjustments? Can you sketch something out that shows this layout? It would be helpful.
– staypuftman
Mar 17 '16 at 18:08
add a comment |
Why not use canvas and just define dimensions that way? Why the bootstrap grid? It doesn't make sense in this application.
– staypuftman
Mar 16 '16 at 16:38
My requirements are bootstrap as I don't have time to write a library around the canvas element and we are already using bootstrap, Jquery, and Jquery UI on the other 200+ pages of the site.
– Pastor Bones
Mar 17 '16 at 15:48
Hmmm, so you would probably want a 16:9 container that gets manipulated by JS to make the portrait/landscape adjustments? Can you sketch something out that shows this layout? It would be helpful.
– staypuftman
Mar 17 '16 at 18:08
Why not use canvas and just define dimensions that way? Why the bootstrap grid? It doesn't make sense in this application.
– staypuftman
Mar 16 '16 at 16:38
Why not use canvas and just define dimensions that way? Why the bootstrap grid? It doesn't make sense in this application.
– staypuftman
Mar 16 '16 at 16:38
My requirements are bootstrap as I don't have time to write a library around the canvas element and we are already using bootstrap, Jquery, and Jquery UI on the other 200+ pages of the site.
– Pastor Bones
Mar 17 '16 at 15:48
My requirements are bootstrap as I don't have time to write a library around the canvas element and we are already using bootstrap, Jquery, and Jquery UI on the other 200+ pages of the site.
– Pastor Bones
Mar 17 '16 at 15:48
Hmmm, so you would probably want a 16:9 container that gets manipulated by JS to make the portrait/landscape adjustments? Can you sketch something out that shows this layout? It would be helpful.
– staypuftman
Mar 17 '16 at 18:08
Hmmm, so you would probably want a 16:9 container that gets manipulated by JS to make the portrait/landscape adjustments? Can you sketch something out that shows this layout? It would be helpful.
– staypuftman
Mar 17 '16 at 18:08
add a comment |
3 Answers
3
active
oldest
votes
1
You'll need to copy a big part of the bootstrap css and add some class prefixes
I'll be going by the simple names portrait and landscape instead of embed-responsive and embed-responsive-16by9
so .col-md-6 for example will become .portrait .portrait-col-md-6 and .landscape .landscape-col-md-6
The grid system is nothing more than a few percentage values and media queries.
so. going back:
Copy all grid system classes.
paste the grid system classes.
copy each individual class after a comma
Prefix the originals with .landscape-
Prefixed the pasted ones with .portrait-
How it looks:
Original bootstrap.css
.col-xs-12
width: 100%;
.col-xs-11
width: 91.66666667%;
.col-xs-10
width: 83.33333333%;
.col-xs-9
width: 75%;
.col-xs-8
width: 66.66666667%;
.col-xs-7
width: 58.33333333%;
.col-xs-6
width: 50%;
.col-xs-5
width: 41.66666667%;
.col-xs-4
width: 33.33333333%;
.col-xs-3
width: 25%;
.col-xs-2
width: 16.66666667%;
.col-xs-1
width: 8.33333333%;
your modified bootstrap.css
.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
of course you have to do this will ALL the classes that are related to the grid system.
In the example below I hacked in the float left by an inline style, but if you process all the grid classes by prefixing it with the general mode class and mode specific prefix, you should pass those settings too :-)
have fun!
$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
add a comment |
1
What I did:
I have created a grid with flexbox that let you change the orientation with a simple js-action and a button. This solution does not involve bootstrap besides the button its just css and html.
Solution:
you can check it out on: jsfiddle.net
Notes:
- As it is
flexboxit comes along with aresponsive design. You can
play around with the size of the elments and maybe also add some
restrictions with regards tomax-widthormax-heightandoverflow: auto. - The background colors are just for presentation purpose.
- The 'actual' content is wrapped into 2 divs. The first one is used for the
sizing and margins. In the inner div you can put theuser contentas you wish. - If you don't want each
containerto take the same size you can simply set thewidth/heightof the inner div toautoas to let the content take in as much space as it needs.
I hope this is what you had in mind. If not then please add more details to your question that I can adjust my solution accordingly.
Edit:
Is this more like it? updated version with bootstrap
$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
1
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
add a comment |
0
I wanted to use 16by9 and 9by16 for fullscreen iFrames with possibility to switch between portrait and landscape. With Bootstrap4 and SCSS just add
// 21/9 - 9/21
@media screen and (orientation:portrait)
.embed-responsive-21by9-rotating
padding-bottom: percentage(21 / 9); // 233.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-21by9-rotating
padding-bottom: percentage(9 / 21); // 42.8571428571%
// 16/9 - 9/16
@media screen and (orientation:portrait)
.embed-responsive-16by9-rotating
padding-bottom: percentage(16 / 9); // 177.7777777778%
@media screen and (orientation:landscape)
.embed-responsive-16by9-rotating
padding-bottom: percentage(9 / 16); // 56.25%
// 4/3 - 3/4
@media screen and (orientation:portrait)
.embed-responsive-4by3-rotating
padding-bottom: percentage(4 / 3); // 133.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-4by3-rotating
padding-bottom: percentage(3 / 4); // 75%
...and use embed-responsive-[n]by[m]-rotating as class name of the aspect ratio.
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35919107%2fbootstrap-responsive-9by16%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You'll need to copy a big part of the bootstrap css and add some class prefixes
I'll be going by the simple names portrait and landscape instead of embed-responsive and embed-responsive-16by9
so .col-md-6 for example will become .portrait .portrait-col-md-6 and .landscape .landscape-col-md-6
The grid system is nothing more than a few percentage values and media queries.
so. going back:
Copy all grid system classes.
paste the grid system classes.
copy each individual class after a comma
Prefix the originals with .landscape-
Prefixed the pasted ones with .portrait-
How it looks:
Original bootstrap.css
.col-xs-12
width: 100%;
.col-xs-11
width: 91.66666667%;
.col-xs-10
width: 83.33333333%;
.col-xs-9
width: 75%;
.col-xs-8
width: 66.66666667%;
.col-xs-7
width: 58.33333333%;
.col-xs-6
width: 50%;
.col-xs-5
width: 41.66666667%;
.col-xs-4
width: 33.33333333%;
.col-xs-3
width: 25%;
.col-xs-2
width: 16.66666667%;
.col-xs-1
width: 8.33333333%;
your modified bootstrap.css
.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
of course you have to do this will ALL the classes that are related to the grid system.
In the example below I hacked in the float left by an inline style, but if you process all the grid classes by prefixing it with the general mode class and mode specific prefix, you should pass those settings too :-)
have fun!
$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
add a comment |
1
You'll need to copy a big part of the bootstrap css and add some class prefixes
I'll be going by the simple names portrait and landscape instead of embed-responsive and embed-responsive-16by9
so .col-md-6 for example will become .portrait .portrait-col-md-6 and .landscape .landscape-col-md-6
The grid system is nothing more than a few percentage values and media queries.
so. going back:
Copy all grid system classes.
paste the grid system classes.
copy each individual class after a comma
Prefix the originals with .landscape-
Prefixed the pasted ones with .portrait-
How it looks:
Original bootstrap.css
.col-xs-12
width: 100%;
.col-xs-11
width: 91.66666667%;
.col-xs-10
width: 83.33333333%;
.col-xs-9
width: 75%;
.col-xs-8
width: 66.66666667%;
.col-xs-7
width: 58.33333333%;
.col-xs-6
width: 50%;
.col-xs-5
width: 41.66666667%;
.col-xs-4
width: 33.33333333%;
.col-xs-3
width: 25%;
.col-xs-2
width: 16.66666667%;
.col-xs-1
width: 8.33333333%;
your modified bootstrap.css
.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
of course you have to do this will ALL the classes that are related to the grid system.
In the example below I hacked in the float left by an inline style, but if you process all the grid classes by prefixing it with the general mode class and mode specific prefix, you should pass those settings too :-)
have fun!
$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
add a comment |
1
1
1
You'll need to copy a big part of the bootstrap css and add some class prefixes
I'll be going by the simple names portrait and landscape instead of embed-responsive and embed-responsive-16by9
so .col-md-6 for example will become .portrait .portrait-col-md-6 and .landscape .landscape-col-md-6
The grid system is nothing more than a few percentage values and media queries.
so. going back:
Copy all grid system classes.
paste the grid system classes.
copy each individual class after a comma
Prefix the originals with .landscape-
Prefixed the pasted ones with .portrait-
How it looks:
Original bootstrap.css
.col-xs-12
width: 100%;
.col-xs-11
width: 91.66666667%;
.col-xs-10
width: 83.33333333%;
.col-xs-9
width: 75%;
.col-xs-8
width: 66.66666667%;
.col-xs-7
width: 58.33333333%;
.col-xs-6
width: 50%;
.col-xs-5
width: 41.66666667%;
.col-xs-4
width: 33.33333333%;
.col-xs-3
width: 25%;
.col-xs-2
width: 16.66666667%;
.col-xs-1
width: 8.33333333%;
your modified bootstrap.css
.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
of course you have to do this will ALL the classes that are related to the grid system.
In the example below I hacked in the float left by an inline style, but if you process all the grid classes by prefixing it with the general mode class and mode specific prefix, you should pass those settings too :-)
have fun!
$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
You'll need to copy a big part of the bootstrap css and add some class prefixes
I'll be going by the simple names portrait and landscape instead of embed-responsive and embed-responsive-16by9
so .col-md-6 for example will become .portrait .portrait-col-md-6 and .landscape .landscape-col-md-6
The grid system is nothing more than a few percentage values and media queries.
so. going back:
Copy all grid system classes.
paste the grid system classes.
copy each individual class after a comma
Prefix the originals with .landscape-
Prefixed the pasted ones with .portrait-
How it looks:
Original bootstrap.css
.col-xs-12
width: 100%;
.col-xs-11
width: 91.66666667%;
.col-xs-10
width: 83.33333333%;
.col-xs-9
width: 75%;
.col-xs-8
width: 66.66666667%;
.col-xs-7
width: 58.33333333%;
.col-xs-6
width: 50%;
.col-xs-5
width: 41.66666667%;
.col-xs-4
width: 33.33333333%;
.col-xs-3
width: 25%;
.col-xs-2
width: 16.66666667%;
.col-xs-1
width: 8.33333333%;
your modified bootstrap.css
.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
of course you have to do this will ALL the classes that are related to the grid system.
In the example below I hacked in the float left by an inline style, but if you process all the grid classes by prefixing it with the general mode class and mode specific prefix, you should pass those settings too :-)
have fun!
$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>$('#thetoggle').on('click',function()
var container = $(".container");
if(container.hasClass('portrait'))
container.removeClass('portrait');
container.addClass('landscape');
$(this).text('Toggle mode to portrait');
else
container.removeClass('landscape');
container.addClass('portrait');
$(this).text('Toggle mode to landscape');
);.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12
width: 100%;
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11
width: 91.66666667%;
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10
width: 83.33333333%;
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9
width: 75%;
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8
width: 66.66666667%;
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7
width: 58.33333333%;
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6
width: 50%;
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5
width: 41.66666667%;
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4
width: 33.33333333%;
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3
width: 25%;
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2
width: 16.66666667%;
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1
width: 8.33333333%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
<div class="row">
<div class="portrait-col-xs-12 landscape-col-xs-4" style="float:left">
<h1>Title foo bar baz</h1>
</div>
<div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
edited Mar 18 '16 at 9:08
answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
answered Mar 18 '16 at 8:51
TschallackaTschallacka
15.1k65289
15.1k65289
add a comment |
add a comment |
1
What I did:
I have created a grid with flexbox that let you change the orientation with a simple js-action and a button. This solution does not involve bootstrap besides the button its just css and html.
Solution:
you can check it out on: jsfiddle.net
Notes:
- As it is
flexboxit comes along with aresponsive design. You can
play around with the size of the elments and maybe also add some
restrictions with regards tomax-widthormax-heightandoverflow: auto. - The background colors are just for presentation purpose.
- The 'actual' content is wrapped into 2 divs. The first one is used for the
sizing and margins. In the inner div you can put theuser contentas you wish. - If you don't want each
containerto take the same size you can simply set thewidth/heightof the inner div toautoas to let the content take in as much space as it needs.
I hope this is what you had in mind. If not then please add more details to your question that I can adjust my solution accordingly.
Edit:
Is this more like it? updated version with bootstrap
$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
1
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
add a comment |
1
What I did:
I have created a grid with flexbox that let you change the orientation with a simple js-action and a button. This solution does not involve bootstrap besides the button its just css and html.
Solution:
you can check it out on: jsfiddle.net
Notes:
- As it is
flexboxit comes along with aresponsive design. You can
play around with the size of the elments and maybe also add some
restrictions with regards tomax-widthormax-heightandoverflow: auto. - The background colors are just for presentation purpose.
- The 'actual' content is wrapped into 2 divs. The first one is used for the
sizing and margins. In the inner div you can put theuser contentas you wish. - If you don't want each
containerto take the same size you can simply set thewidth/heightof the inner div toautoas to let the content take in as much space as it needs.
I hope this is what you had in mind. If not then please add more details to your question that I can adjust my solution accordingly.
Edit:
Is this more like it? updated version with bootstrap
$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
1
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
add a comment |
1
1
1
What I did:
I have created a grid with flexbox that let you change the orientation with a simple js-action and a button. This solution does not involve bootstrap besides the button its just css and html.
Solution:
you can check it out on: jsfiddle.net
Notes:
- As it is
flexboxit comes along with aresponsive design. You can
play around with the size of the elments and maybe also add some
restrictions with regards tomax-widthormax-heightandoverflow: auto. - The background colors are just for presentation purpose.
- The 'actual' content is wrapped into 2 divs. The first one is used for the
sizing and margins. In the inner div you can put theuser contentas you wish. - If you don't want each
containerto take the same size you can simply set thewidth/heightof the inner div toautoas to let the content take in as much space as it needs.
I hope this is what you had in mind. If not then please add more details to your question that I can adjust my solution accordingly.
Edit:
Is this more like it? updated version with bootstrap
$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
What I did:
I have created a grid with flexbox that let you change the orientation with a simple js-action and a button. This solution does not involve bootstrap besides the button its just css and html.
Solution:
you can check it out on: jsfiddle.net
Notes:
- As it is
flexboxit comes along with aresponsive design. You can
play around with the size of the elments and maybe also add some
restrictions with regards tomax-widthormax-heightandoverflow: auto. - The background colors are just for presentation purpose.
- The 'actual' content is wrapped into 2 divs. The first one is used for the
sizing and margins. In the inner div you can put theuser contentas you wish. - If you don't want each
containerto take the same size you can simply set thewidth/heightof the inner div toautoas to let the content take in as much space as it needs.
I hope this is what you had in mind. If not then please add more details to your question that I can adjust my solution accordingly.
Edit:
Is this more like it? updated version with bootstrap
$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>$('[data-js-flip]').on('click', function()
$('[data-js-board]').toggleClass('flipped');
)*
box-sizing: border-box;
.board
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
.embed-responsive
position: relative;
display: block;
height: 0;
padding: 0;
overflow: auto;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.embed-responsive-16by9
padding-bottom: 56.25%;
.board-container
width: 6.25%;
height: auto;
padding: 4px;
background-color: wheat;
.board-container:nth-child(n):nth-child(-n+16)
background-color: tomato;
.board-container:nth-child(n+33):nth-child(-n+48)
background-color: tomato;
.board-container:nth-child(n+65):nth-child(-n+80)
background-color: tomato;
.board-container:nth-child(n+97):nth-child(-n+112)
background-color: tomato;
.board-container:nth-child(n+129):nth-child(-n+144)
background-color: tomato;
.board.flipped > .board-container
background-color: wheat;
.board.flipped > .board-container:nth-child(n):nth-child(-n+9)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117)
background-color: tomato;
.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135)
background-color: tomato;
.board.flipped > .board-container
width: 11.1111%;
.content
background: lightgray;
height: 100%;
width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
<div class="board-container">
<div class="content">#1</div>
</div>
<div class="board-container">
<div class="content">#2</div>
</div>
<div class="board-container">
<div class="content">#3</div>
</div>
<div class="board-container">
<div class="content">#4</div>
</div>
<div class="board-container">
<div class="content">#5 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#6</div>
</div>
<div class="board-container">
<div class="content">#7</div>
</div>
<div class="board-container">
<div class="content">#8</div>
</div>
<div class="board-container">
<div class="content">#9</div>
</div>
<div class="board-container">
<div class="content">#10 more content</div>
</div>
<div class="board-container">
<div class="content">#11</div>
</div>
<div class="board-container">
<div class="content">#12</div>
</div>
<div class="board-container">
<div class="content">#13</div>
</div>
<div class="board-container">
<div class="content">#14</div>
</div>
<div class="board-container">
<div class="content">#15 here too</div>
</div>
<div class="board-container">
<div class="content">#16</div>
</div>
<div class="board-container">
<div class="content">#17</div>
</div>
<div class="board-container">
<div class="content">#18</div>
</div>
<div class="board-container">
<div class="content">#19</div>
</div>
<div class="board-container">
<div class="content">#20 content is cool</div>
</div>
<div class="board-container">
<div class="content">#21</div>
</div>
<div class="board-container">
<div class="content">#22</div>
</div>
<div class="board-container">
<div class="content">#23</div>
</div>
<div class="board-container">
<div class="content">#24</div>
</div>
<div class="board-container">
<div class="content">#25 good stuff</div>
</div>
<div class="board-container">
<div class="content">#26</div>
</div>
<div class="board-container">
<div class="content">#27</div>
</div>
<div class="board-container">
<div class="content">#28</div>
</div>
<div class="board-container">
<div class="content">#29</div>
</div>
<div class="board-container">
<div class="content">#30 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#31</div>
</div>
<div class="board-container">
<div class="content">#32</div>
</div>
<div class="board-container">
<div class="content">#33</div>
</div>
<div class="board-container">
<div class="content">#34</div>
</div>
<div class="board-container">
<div class="content">#35 and me ...</div>
</div>
<div class="board-container">
<div class="content">#36</div>
</div>
<div class="board-container">
<div class="content">#37</div>
</div>
<div class="board-container">
<div class="content">#38</div>
</div>
<div class="board-container">
<div class="content">#39</div>
</div>
<div class="board-container">
<div class="content">#40 third.</div>
</div>
<div class="board-container">
<div class="content">#41</div>
</div>
<div class="board-container">
<div class="content">#42</div>
</div>
<div class="board-container">
<div class="content">#43</div>
</div>
<div class="board-container">
<div class="content">#44</div>
</div>
<div class="board-container">
<div class="content">#45 nice</div>
</div>
<div class="board-container">
<div class="content">#46</div>
</div>
<div class="board-container">
<div class="content">#47</div>
</div>
<div class="board-container">
<div class="content">#48</div>
</div>
<div class="board-container">
<div class="content">#49</div>
</div>
<div class="board-container">
<div class="content">#50</div>
</div>
<div class="board-container">
<div class="content">#51</div>
</div>
<div class="board-container">
<div class="content">#52</div>
</div>
<div class="board-container">
<div class="content">#53 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#54</div>
</div>
<div class="board-container">
<div class="content">#55</div>
</div>
<div class="board-container">
<div class="content">#56</div>
</div>
<div class="board-container">
<div class="content">#57</div>
</div>
<div class="board-container">
<div class="content">#58 more content</div>
</div>
<div class="board-container">
<div class="content">#59</div>
</div>
<div class="board-container">
<div class="content">#60</div>
</div>
<div class="board-container">
<div class="content">#61</div>
</div>
<div class="board-container">
<div class="content">#62</div>
</div>
<div class="board-container">
<div class="content">#63 here too</div>
</div>
<div class="board-container">
<div class="content">#64</div>
</div>
<div class="board-container">
<div class="content">#65</div>
</div>
<div class="board-container">
<div class="content">#66</div>
</div>
<div class="board-container">
<div class="content">#67</div>
</div>
<div class="board-container">
<div class="content">#68 content is cool</div>
</div>
<div class="board-container">
<div class="content">#69</div>
</div>
<div class="board-container">
<div class="content">#70</div>
</div>
<div class="board-container">
<div class="content">#71</div>
</div>
<div class="board-container">
<div class="content">#72</div>
</div>
<div class="board-container">
<div class="content">#73 good stuff</div>
</div>
<div class="board-container">
<div class="content">#74</div>
</div>
<div class="board-container">
<div class="content">#75</div>
</div>
<div class="board-container">
<div class="content">#76</div>
</div>
<div class="board-container">
<div class="content">#77</div>
</div>
<div class="board-container">
<div class="content">#78 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#79</div>
</div>
<div class="board-container">
<div class="content">#80</div>
</div>
<div class="board-container">
<div class="content">#81</div>
</div>
<div class="board-container">
<div class="content">#82</div>
</div>
<div class="board-container">
<div class="content">#83 and me ...</div>
</div>
<div class="board-container">
<div class="content">#84</div>
</div>
<div class="board-container">
<div class="content">#85</div>
</div>
<div class="board-container">
<div class="content">#86</div>
</div>
<div class="board-container">
<div class="content">#87</div>
</div>
<div class="board-container">
<div class="content">#88 third.</div>
</div>
<div class="board-container">
<div class="content">#89</div>
</div>
<div class="board-container">
<div class="content">#90</div>
</div>
<div class="board-container">
<div class="content">#91</div>
</div>
<div class="board-container">
<div class="content">#92</div>
</div>
<div class="board-container">
<div class="content">#93 nice</div>
</div>
<div class="board-container">
<div class="content">#94</div>
</div>
<div class="board-container">
<div class="content">#95</div>
</div>
<div class="board-container">
<div class="content">#96</div>
</div>
<div class="board-container">
<div class="content">#97</div>
</div>
<div class="board-container">
<div class="content">#98</div>
</div>
<div class="board-container">
<div class="content">#99</div>
</div>
<div class="board-container">
<div class="content">#100</div>
</div>
<div class="board-container">
<div class="content">#101 here some stuff</div>
</div>
<div class="board-container">
<div class="content">#102</div>
</div>
<div class="board-container">
<div class="content">#103</div>
</div>
<div class="board-container">
<div class="content">#104</div>
</div>
<div class="board-container">
<div class="content">#105</div>
</div>
<div class="board-container">
<div class="content">#106 more content</div>
</div>
<div class="board-container">
<div class="content">#107</div>
</div>
<div class="board-container">
<div class="content">#108</div>
</div>
<div class="board-container">
<div class="content">#109</div>
</div>
<div class="board-container">
<div class="content">#110</div>
</div>
<div class="board-container">
<div class="content">#111 here too</div>
</div>
<div class="board-container">
<div class="content">#112</div>
</div>
<div class="board-container">
<div class="content">#113</div>
</div>
<div class="board-container">
<div class="content">#114</div>
</div>
<div class="board-container">
<div class="content">#115</div>
</div>
<div class="board-container">
<div class="content">#116 content is cool</div>
</div>
<div class="board-container">
<div class="content">#117</div>
</div>
<div class="board-container">
<div class="content">#118</div>
</div>
<div class="board-container">
<div class="content">#119</div>
</div>
<div class="board-container">
<div class="content">#120</div>
</div>
<div class="board-container">
<div class="content">#121 good stuff</div>
</div>
<div class="board-container">
<div class="content">#122</div>
</div>
<div class="board-container">
<div class="content">#123</div>
</div>
<div class="board-container">
<div class="content">#124</div>
</div>
<div class="board-container">
<div class="content">#125</div>
</div>
<div class="board-container">
<div class="content">#126 don't forget about me</div>
</div>
<div class="board-container">
<div class="content">#127</div>
</div>
<div class="board-container">
<div class="content">#128</div>
</div>
<div class="board-container">
<div class="content">#129</div>
</div>
<div class="board-container">
<div class="content">#130 and me ...</div>
</div>
<div class="board-container">
<div class="content">#131</div>
</div>
<div class="board-container">
<div class="content">#132</div>
</div>
<div class="board-container">
<div class="content">#133</div>
</div>
<div class="board-container">
<div class="content">#134</div>
</div>
<div class="board-container">
<div class="content">#135 third.</div>
</div>
<div class="board-container">
<div class="content">#136</div>
</div>
<div class="board-container">
<div class="content">#137</div>
</div>
<div class="board-container">
<div class="content">#138</div>
</div>
<div class="board-container">
<div class="content">#139</div>
</div>
<div class="board-container">
<div class="content">#140 nice</div>
</div>
<div class="board-container">
<div class="content">#141</div>
</div>
<div class="board-container">
<div class="content">#142</div>
</div>
<div class="board-container">
<div class="content">#143</div>
</div>
<div class="board-container">
<div class="content">#144</div>
</div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
edited Mar 18 '16 at 9:00
Tschallacka
15.1k65289
15.1k65289
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
answered Mar 16 '16 at 21:54
F. MüllerF. Müller
1,32311826
1,32311826
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
1
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
add a comment |
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
1
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
I was requesting a Bootstrap solution. Thank you for trying though :)
– Pastor Bones
Mar 17 '16 at 15:49
1
1
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones wrap the whole component into a freaking bootstrap grid ... where is the problem? Your question lacks of information and provides nothing more than a few thoughs. I told you that you can tell me what you need exactly - can't read your mind though. Make a drawing or provide some useful information (like markup) or a detailed requirement catalogue for your case.
– F. Müller
Mar 17 '16 at 21:10
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
@PastorBones I have updated my solution. Is this better now?
– F. Müller
Mar 18 '16 at 8:16
add a comment |
0
I wanted to use 16by9 and 9by16 for fullscreen iFrames with possibility to switch between portrait and landscape. With Bootstrap4 and SCSS just add
// 21/9 - 9/21
@media screen and (orientation:portrait)
.embed-responsive-21by9-rotating
padding-bottom: percentage(21 / 9); // 233.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-21by9-rotating
padding-bottom: percentage(9 / 21); // 42.8571428571%
// 16/9 - 9/16
@media screen and (orientation:portrait)
.embed-responsive-16by9-rotating
padding-bottom: percentage(16 / 9); // 177.7777777778%
@media screen and (orientation:landscape)
.embed-responsive-16by9-rotating
padding-bottom: percentage(9 / 16); // 56.25%
// 4/3 - 3/4
@media screen and (orientation:portrait)
.embed-responsive-4by3-rotating
padding-bottom: percentage(4 / 3); // 133.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-4by3-rotating
padding-bottom: percentage(3 / 4); // 75%
...and use embed-responsive-[n]by[m]-rotating as class name of the aspect ratio.
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
add a comment |
0
I wanted to use 16by9 and 9by16 for fullscreen iFrames with possibility to switch between portrait and landscape. With Bootstrap4 and SCSS just add
// 21/9 - 9/21
@media screen and (orientation:portrait)
.embed-responsive-21by9-rotating
padding-bottom: percentage(21 / 9); // 233.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-21by9-rotating
padding-bottom: percentage(9 / 21); // 42.8571428571%
// 16/9 - 9/16
@media screen and (orientation:portrait)
.embed-responsive-16by9-rotating
padding-bottom: percentage(16 / 9); // 177.7777777778%
@media screen and (orientation:landscape)
.embed-responsive-16by9-rotating
padding-bottom: percentage(9 / 16); // 56.25%
// 4/3 - 3/4
@media screen and (orientation:portrait)
.embed-responsive-4by3-rotating
padding-bottom: percentage(4 / 3); // 133.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-4by3-rotating
padding-bottom: percentage(3 / 4); // 75%
...and use embed-responsive-[n]by[m]-rotating as class name of the aspect ratio.
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
add a comment |
0
0
0
I wanted to use 16by9 and 9by16 for fullscreen iFrames with possibility to switch between portrait and landscape. With Bootstrap4 and SCSS just add
// 21/9 - 9/21
@media screen and (orientation:portrait)
.embed-responsive-21by9-rotating
padding-bottom: percentage(21 / 9); // 233.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-21by9-rotating
padding-bottom: percentage(9 / 21); // 42.8571428571%
// 16/9 - 9/16
@media screen and (orientation:portrait)
.embed-responsive-16by9-rotating
padding-bottom: percentage(16 / 9); // 177.7777777778%
@media screen and (orientation:landscape)
.embed-responsive-16by9-rotating
padding-bottom: percentage(9 / 16); // 56.25%
// 4/3 - 3/4
@media screen and (orientation:portrait)
.embed-responsive-4by3-rotating
padding-bottom: percentage(4 / 3); // 133.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-4by3-rotating
padding-bottom: percentage(3 / 4); // 75%
...and use embed-responsive-[n]by[m]-rotating as class name of the aspect ratio.
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
I wanted to use 16by9 and 9by16 for fullscreen iFrames with possibility to switch between portrait and landscape. With Bootstrap4 and SCSS just add
// 21/9 - 9/21
@media screen and (orientation:portrait)
.embed-responsive-21by9-rotating
padding-bottom: percentage(21 / 9); // 233.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-21by9-rotating
padding-bottom: percentage(9 / 21); // 42.8571428571%
// 16/9 - 9/16
@media screen and (orientation:portrait)
.embed-responsive-16by9-rotating
padding-bottom: percentage(16 / 9); // 177.7777777778%
@media screen and (orientation:landscape)
.embed-responsive-16by9-rotating
padding-bottom: percentage(9 / 16); // 56.25%
// 4/3 - 3/4
@media screen and (orientation:portrait)
.embed-responsive-4by3-rotating
padding-bottom: percentage(4 / 3); // 133.3333333333%
@media screen and (orientation:landscape)
.embed-responsive-4by3-rotating
padding-bottom: percentage(3 / 4); // 75%
...and use embed-responsive-[n]by[m]-rotating as class name of the aspect ratio.
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
answered Nov 12 '18 at 23:08
jokumerjokumer
1,498512
1,498512
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35919107%2fbootstrap-responsive-9by16%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why not use canvas and just define dimensions that way? Why the bootstrap grid? It doesn't make sense in this application.
– staypuftman
Mar 16 '16 at 16:38
My requirements are bootstrap as I don't have time to write a library around the canvas element and we are already using bootstrap, Jquery, and Jquery UI on the other 200+ pages of the site.
– Pastor Bones
Mar 17 '16 at 15:48
Hmmm, so you would probably want a 16:9 container that gets manipulated by JS to make the portrait/landscape adjustments? Can you sketch something out that shows this layout? It would be helpful.
– staypuftman
Mar 17 '16 at 18:08