While coding in bootstrap, I needed to move the button up towards the horizontal bar.
<div class="separator-breadcrumb border-top"></div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<div class="card-title d-flex align-items-center justify-content-end">
<button (click)="showPreviousYear()" *ngIf="showPreviousYearButton()" class="btn btn-primary ">
< {{previousYear}}
</button>
<button (click)="showNextYear()" *ngIf="showNextYearButton()" class="btn btn-primary mx-1">
{{nextYear}} >
</button>
</div>
<div class="table-responsive" *ngIf="lines.length > 0">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" style="width: 25%;">{{'4391' | t}}</th>
<th scope="col" style="width: 25%; text-align: right;">{{'4392' | t}}</th>
<th scope="col" style="width: 25%; text-align: right;">{{'4393' | t}}</th>
<th scope="col" style="width: 25%; text-align: right;">{{'4394' | t}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let line of lines; let i = index">
<th style="width: 25%;">
{{line.LIBELLE}}
</th>
<td style="width: 25%; text-align: right;">
{{line.TAUX | number:'1.2-2' | mynamformatnum}} %
</td>
<td style="width: 25%; text-align: right;">
{{line.BASE | number:'1.2-2' | mynamformatnum}} EUR
</td>
<td style="width: 25%; text-align: right;">
{{line.MONTANT | number:'1.2-2' | mynamformatnum}} EUR
</td>
</tr>
</tbody>
</table>
</div>
<h5 *ngIf="lines.length == 0">
{{'4395' | t }}
</h5>
</div>
</div>
</div>
</div>
I included a new class called btn-top in the CSS file
<button (click)="showPreviousYear()" *ngIf="showPreviousYearButton()" class="btn btn-primary btn-top">
This is how it appears now:
.btn-top {
position: relative;
top: -100px;
}
Currently, I am trying to remove the white space from the table but couldn't find the appropriate bootstrap class for that. Any suggestions?