Pressing a button on the bottom in the semantic sidebar ui

Question

I use semantic-ui to build the sidebar.

The following example shows a sidebar with a button pushed down with positioning:absolute. Is there an ideotic way to organize this in semantics-ui without having to create custom styles? The class bottomdoes not apply to buttons.

<div class="ui very thin styled sidebar active">
  <div class="ui fluid vertical icon buttons">
    <div class="ui facebook button">
      <i class="facebook icon"></i>
    </div>
    <div class="ui twitter button">
      <i class="twitter icon"></i>
    </div>
    <div class="ui google plus button">
      <i class="google plus icon"></i>
    </div>
    <div class="ui repeat button" style="position:absolute;bottom:10px;">
      <i class="reorder icon"></i>
    </div>
  </div>
</div>

Answer 1

There seems to be no built-in tool for this semantic-ui(v2.2.2 <).

You can place the snooze button at the bottom of the sidebar by adding a container flexbox:

.flex-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

( ) :

.bottom-aligned {
  margin: 0px;
  margin-top: auto;
}

JSFiddle