CODEWITHSUNDEEP
htmlcsssemantic-ui
julienM
julienM

Reputation: 23

Semantic UI : how to place an button at the bottom of a column?

This is a very simple question, but after some research, I can't find a way to do it properly: I have a grid with 3 columns in Semantic UI and the content of each column has a specific height. I try to add a button at the bottom of each column, but "bottom aligned" doesn't work. Someone has a clue ? Here is an example:

<div class="ui basic segment">
  <div class="ui divided grid container">
    <div class="three column row">
      <div class="column">
        Hello <br>
        fdsfsd <br>
        fsfsd <br>
        fdsfsd <br>
        fsfsd <br>
        fsfsd <br>
        fdsfsd <br>
        fsfsd <br>
        fs
      </div>
      <div class="column">
        <div class="segments">
          <div class="ui segment">Hello</div>
          <div class="ui bottom aligned segment">
            fdsfsdf
          </div>
        </div>
      </div>
      <div class="column">
        Hello
      </div>
    </div>
  </div>
</div>

Thanks for your help !

Upvotes: 2

Views: 4070

Answers (1)

Sarthak
Sarthak

Reputation: 1052

One way to go about it is to use a flexbox inside the column to position the content and the .ui.segment div

JS Fiddle: https://jsfiddle.net/batrasoe/vq84trys/4/

<div class="ui  segment">
  <div class="ui divided grid container">
    <div class="three column stretched row">
      <div class="column">
        <div class="segment-wrapper">
          <div class="content">

          </div>
          <div class="ui bottom segment">
          </div>
        </div>
      </div>
      <div class="column">
        <div class="segment-wrapper">
          <div class="content">

          </div>
          <div class="ui bottom segment">
          </div>
        </div>
      </div>

      <div class="column">
        <div class="segment-wrapper">
          <div class="content">

          </div>
          <div class="ui bottom segment">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And CSS:

    .segment-wrapper {
  background-color: #DDD;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  background-color: skyblue;
}

.ui.bottom.segment {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Upvotes: 3

Related Questions