Boot answer 9by16

Question

I am trying to provide 16 × 9 drawing space, but I want the user to be able to choose portrait or landscape orientation. I already use class="embed-responsive embed-responsive-16by9" . Is there an easy way to make changes using CSS?

Edit

Keep in mind that I will add divs to these containers. Their position in the 16x9 container should be relative to its orientation, since I want to save a custom drawspace in order to recreate it.

Answer 1

You will need to copy most of the boot css and add some class prefixes

I will use the simple names portrait and landscape instead of embed-responsive and embed-responsive-16by9

therefore .col-md-6 , for example, becomes .portrait .portrait-col-md-6 and .landscape .landscape-col-md-6

A grid is nothing more than a few percentages and media queries.

So. Return:

Copy all system grid classes.

insert grid classes. copy every single class after comma

Prefix of the originals .landscape- Prefix inserted into .portrait-

What it looks like:

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%; } 

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 should do it ALL classes related to the grid.

In the example below, I hacked the float on the left with a built-in style, but if you process all the grid classes, having previously specified it with a common mode class and a specific mode, you should also pass these settings :-)

enjoy!

 $('#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> 

Answer 2

What I've done:
I created a grid with flexbox that allows you to change orientation with a simple js-action and a button . This solution does not include bootstrap besides button its just css and html .

Decision:
you can check this: jsfiddle.net

Notes:

• As a flexbox it meets responsive design . You can play around with the size of the elves and maybe add some restrictions regarding max-width or max-height and overflow: auto .
• Background colors are for presentation only.
• The "actual" content is enclosed in 2 divs. The first is used for sizing and margins . In the inner div, you can put user content as you wish.
• If you don't want each container be the same size, you can simply set the width/height inner div to auto to let the content take up as much space as possible.

Hope this is what you had in mind. If not, add more details to your question so that I can customize my solution accordingly.

Edit:
Does it look more like this? updated version with download

 $('[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>