Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Align button to the right
Hello,
I've a table with a new button / refresh button in a header
<div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
<div class=" d-flex my-4">
<a class="btn btn-sm btn-light-primary" (click)="openNewItem();">
<span [inlineSVG]=""../../../../assets/media/icons/duotune/arrows/arr075.svg"" class="svg-icon svg-icon-3"></span>
<span class="indicator-label"> New Parameters </span>
</a>
<a class="btn btn-sm btn-light-success" (click)="getData();">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6 7V10H9M18 17V14H15M17 10C16.4904 8.99609 15.6247 8.16548 14.5334 7.63331C13.442 7.10113 12.1842 6.89624 10.9494 7.04949C9.71458 7.20274 8.56967 7.70583 7.68719 8.48297L6 9.81861M7 14C7.50963 15.0039 8.37532 15.8345 9.46665 16.3667C10.558 16.8989 11.8158 17.1038 13.0506 16.9505C14.2854 16.7973 15.4303 16.2942 16.3128 15.517L18 14.1814"
stroke="#001A72" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="indicator-label">Refresh</span>
</a>
</div>
</div>
But the buttons appear on the left... how can I push them to the right?
Thanks
Replies (3)
Hi,
Can you please try to debug it and see the alignment of the parent element?
Using align-items-start class should align the elements to the top if the parent allows.
Regards,
Sean
For debugging you mean F12 developer toolbar on the browser or I'm missing something really simple? using the justify-content-end seems to work
Yes, Chrome dev inspector can be useful to try those classes. Glad to hear that it worked.
