I want to make a kind of "To Do List" with delete and edit buttons but every time I add a new element, these buttons are poorly organized, they are as follows
How can I get the buttons to be well centered within each element of the list?
Embed Code
$(".agregarCate").click(function () {
if ($("#custom_textbox").val() != "") {
var deleteButton = "<button class='delete btn btn-warning'>Borrar</button>";
var editButton = "<button class='edit btn btn-success'>Editar</button>";
var twoButtons = "<div class='btn-group pull-right'>" + deleteButton + editButton + "</div>";
$(".list_of_items").append("<li class='list-group-item'>" + "<div class='text_holder'>" + $("#custom_textbox").val() + twoButtons + "</div></li>");
$("#custom_textbox").val('');
}
});
Thanks.
EDITED
If you need a row two columns inside
list-group-item
you can useflex-box
, to the parent is added the class d-flex and to which you want to align to the rightml-auto
(Bootstrap4)To
Bootstrap3
only need to add the row class to the container in this case alist-group-item
, that is<li class='list-group-item row'>