Menu
I want to have a Cardheader with Some text on the left and two buttons on the right. This is my html:
<div class="card-header">
<div class="col-md-10">
<h3 class="w-75 p-3">{{categorie.name}}</h3>
</div>
<div class="col-md-2 float-right">
<button class="btn btn-primary" (click)="onAddCategoieModal(addCategorieModal)">Add</button>
<button class="btn btn-primary" style="margin-left: 1em" (click)="onAddCategoieModal(content)">Edit</button>
</div>
But the two buttons get displayed below the h3 like this:
Any Idea?
974
Answer: Use the text-right Class You can simply use the class . text-right on the containing element to right align your Bootstrap buttons within a block box or grid column. It will work in both Bootstrap 3 and 4 versions.
You can use an out div with a class btn-group . This helps to align the buttons horizontally. Using col-md-6 for each button div can make the buttons missaligned with unwanted space in between.
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. Example: Use float-left, float-right and float-right to align the buttons on the card.
Another example with less HTML.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<h5 class="card-header d-flex justify-content-between align-items-center">
Title
<button type="button" class="btn btn-sm btn-primary">Button</button>
</h5>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
