Below is the HTML code snippet I am working with:
<div class="row mt-2">
<div class="col-lg-5">
<div id="alertmessages"></div>
</div>
<div class="col-lg-7">
<div class="btn-group-sm">
<button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
<button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
<button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
</div>
</div>
</div>
This javascript function displays alert messages when buttons are clicked, here's an example for the save draft button:
$('#alertmessages').html('<div class="alert alert-success alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>Your draft has been saved</div>');
The alerts appear larger than the "small" buttons as shown in the image below:
https://i.sstatic.net/0XmaU.png
I attempted to modify the CSS properties by setting a fixed height for the alerts, but it caused the close button 'x' to be misaligned.
.alert {
margin-bottom: 1px;
height: 30px;
line-height: 30px;
padding: 0px 15px;
}