Bootstrap column that is responsive to 100% of the page height <p>So I successfully coded and implemented a website with a column on the side, that has a hidden div on the side of the column that appears when a button is clicked, I need the height of the column to remain 100% of the browser, but when it came to responsiveness my code lacked since it was custom made.</p> <p>I decided to switch to bootstrap but I find the grid system a bit confusing, so if I have the following set up:</p> <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt; &lt;div id="column1"&gt; &lt;div id="row1"&gt; ... ... &lt;/div&gt; &lt;div id="row2"&gt; ... ... &lt;/div&gt; &lt;/div&gt; &lt;div id="column2"&gt; &lt;div id="row3"&gt; ... ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>But I wanted to implement bootstrap to get the following look:<br> <a href="https://i.stack.imgur.com/9STmz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9STmz.jpg" alt="enter image description here"></a></p> <p>And if the user resizes it would adjust in this manner, where it would resize based on heights and not widths:<br> <a href="https://i.stack.imgur.com/LCNyg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LCNyg.jpg" alt="enter image description here"></a></p>