How to show only two button in single row - html

Question

I am using *ngFor for displaying multiple buttons, it can have many buttons. Currently I am getting all the buttons in one column, means one below one.
But I want to display only 2 buttons in a row, means, in above case these green buttons should be in one line, and 2 red buttons should be in next line just below of it. How can I do this?
This is I tried:
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>
css
.actionButton {
width: 200px;
display: inline-block;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis
}

Answer 1

<div class='row'>
<div class='col'>
<div class='row'>
<button >
button1
</button>
<button >
button2
</button>
</div>
<div class='row'>
<button >
button1
</button>
<button >
button2
</button>
</div>
</div>
</div>
try this row col method

Answer 2

you could group buttons in bootstrap. for your purpose, add btn-group class to ngIf div. it's bootstrap feature and you don't need any custom css.
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1" class="btn-group">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2" class="btn-group">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>

Answer 3

You could make it by using normal bootstrap, add class row to parent div and add class col-sm-6 to every child will make only 2 children in that row
<div *ngFor="let actionButton of actionButtonData" class="row"> <!--here-->
<div *ngIf="actionButton.Direction === 1" class="col-sm-6"> <!--here-->
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2" class="col-sm-6"> <!--here-->
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>