title: Semantic UI Bottom Sidebar Increase Size
body: <p>Is there any way to increase the size (height) of the bottom version of the Semantic UI <a href="https://semantic-ui.com/modules/sidebar.html" rel="nofollow noreferrer">Sidebar</a>?</p>
  <p>If you add a wide class to the div element, it cuts off the bar. &quot;wide&quot; is only used for vertical sidebars, not for horizontal ones. &quot;wide&quot; only affects the width of the sidebar, not its height.</p>
  <p>Here is my <a href="https://jsfiddle.net/dr480mnu/" rel="nofollow noreferrer">fiddle</a> of an attempt at a solution.</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;ui bottom sidebar deep vertical inverted menu&quot; id=&quot;bottom-side&quot;&gt;
      &lt;div class=&quot;header item&quot;&gt;Bottom Sidebar menu&lt;/div&gt;
      &lt;a class=item&gt;Foo&lt;/a&gt;
      &lt;a class=item&gt;Foo&lt;/a&gt;
      &lt;a class=item&gt;Foo&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>$(document).ready(function () {
     $('#bottom-side').sidebar('toggle');
  });
  </code></pre>
  <p>CSS</p>
  <pre><code>.ui.deep.bottom.sidebar {
      height: 400px;
  }
  
  .ui.deep.active.bottom.sidebar {
      height: 400px;
  }
  </code></pre>