'Right align buttons inside flex

How can I align the buttons on the right hand side to the right (the right side of the orange box in the image)?

[Visual of the button element not aligned to the right][1] [1]: https://i.stack.imgur.com/kAi2y.png

HTML:

<div id="button-container">
  <span>
    <button
      class="btn btn-primary"
      type="submit"
      >{{lex.labelViewLog}}
    </button>
    <button
      class="btn"
      type="button"
      >{{lex.reset}}
    </button>
  </span>
  <span>
    <button
      class="btn btn-icon btn-primary"
      [title]="lex.download | titlecase"
      type="button">
      <cds-icon shape="download"></cds-icon>
      <span>{{lex.download}}</span>
    </button>
    <button
      class="btn btn-icon btn-primary"
      [title]="lex.print | titlecase"
      type="button">
      <cds-icon shape="printer"></cds-icon>
      <span>{{lex.print}}</span>
    </button>
  </span>
</div>

CSS:

    #button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
htmlcssangularbuttonright-align


Solution 1:[1]

Please use below CSS style:

#button-container{
    display: flex;
    justify-content: flex-end !important;
    }

Solution 2:[2]

You can use flexbox also inside this <button class="btn btn-icon btn-primary">

{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

Solution 3:[3]

The issue came down to the .btn class. Clarity adds a 0.6rem margin-right to buttons. I resolved the issue with a style (style="margin-right:0") to override the class CSS:

<button
  class="btn btn-icon btn-primary"
  style="margin-right:0"
  [title]="lex.print | titlecase"
  type="button">
  <cds-icon shape="printer"></cds-icon>
  <span>{{lex.print}}</span>
</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nensi Gondaliya
Solution 2 Evren
Solution 3 Jade Mathre

Related Questions