Bootstrap responsive 9by16

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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 flexbox it comes along with a responsive design. You can play around with the size of the elments and maybe also add some restrictions with regards to max-width or max-height and overflow: 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 the user content as you wish.
• If you don't want each container to take the same size you can simply set the width/height of the inner div to auto as 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>