I am looking to align icons and text within a modal body:
<div class="modal-body">
<div class="d-grid gap-2" id="someButtons">
</div>
</div>
This code snippet demonstrates how I insert buttons dynamically:
testItems.forEach(function ( item ) {
let btn = document.createElement("a");
btn.setAttribute("role", "button");
btn.innerHTML = `<i class="fas fa-plus-circle"></i> ${item}`;
["btn", "btn-primary"].forEach(item => btn.classList.add(item));
btnsDiv.appendChild(btn)
});
I also experimented with this approach:
let delBtn = document.createElement("a");
delBtn.setAttribute("role", "button");
["btn", "btn-danger"].forEach(item => delBtn.classList.add(item));
delBtn.innerHTML = `<p class="text-start"><i class="fas fa-minus-circle"></i></p>`
btnsDiv.appendChild(delBtn)
https://i.sstatic.net/E7NT5.png
Is it possible to achieve this layout using only Bootstrap 5?