How do I right align my buttons while using bootstrap 4

Question

I am unable to right align my buttons which I am printing.

Here's how it looks like now: I am rendering my HTML using JavaScript's append method. Here is the HTML which only renders the container. Buttons are populated by JS using the append method.

I am expecting the two buttons to be right aligned.

 function handleLinkClick(testcase) { event.preventDefault(); // document.getElementById("debug").innerHTML = testcase.id // DEBUG. let tc_string = testcase.id; let tc_arr = tc_string.split('@'); let button1 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 teButton" id="te_button" type="submit" value='+tc_arr[4]+'><i class="fa fa-download"></i> TE Log </button>'; let button2 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 ueButton" id= "ue_button" type="submit" value='+tc_arr[5]+'><i class="fa fa-download"></i> UE Log </button>'; $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Test case &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : '+tc_arr[0]+button1+' '+button2+'</span></a>'); $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Verdict &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : '+tc_arr[1]+'</a>'); $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Observation : '+tc_arr[2]+'</a>'); $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Start Time &nbsp;&nbsp;&nbsp; : '+tc_arr[3]+'</a>'); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-6"> <div class="card mt-4" id="bottom_container"> <div class="card-header py-2"> <h6>Details</h6> </div> <div id="bottomContainer" class="list-group " style="height:100px;"> <!--Populated by JS function--> </div> </div> </div> <button id="debug" onclick="handleLinkClick(this)"> Click</button> 

Answer 1

I have no bearing on your projects scope and I wouldn't recommend putting multiple elements inside of an a tag because as your requirements get more complex for this specific element, your needs will get harder and harder to satisfy, as you can already see right now with minimal functionality you have. However, if you really need to do it this way, a simple solution to it is to float the buttons right as show below, then you will just have to worry about aligning text and other styling, but I can't predict all the needs so I think bootstraps class float-right answers the question at hand.

 function handleLinkClick(testcase) { event.preventDefault(); // document.getElementById("debug").innerHTML = testcase.id // DEBUG. let tc_string = testcase.id; let tc_arr = tc_string.split('@'); let button1 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 teButton float-right " id="te_button" type="submit" value=' + tc_arr[4] + '><i class="fa fa-download"></i> TE Log </button>'; let button2 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 ueButton float-right" id= "ue_button" type="submit" value=' + tc_arr[5] + '><i class="fa fa-download"></i> UE Log </button>'; $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0">' + 'Test case : ' + tc_arr[0] + button1 + button2 + '</a>'); $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">' + 'Verdict &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : ' + tc_arr[1] + '</a>'); $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">' + 'Observation : ' + tc_arr[2] + '</a>'); $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">' + 'Start Time &nbsp;&nbsp;&nbsp; : ' + tc_arr[3] + '</a>'); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-12"> <div class="card mt-4" id="bottom_container"> <div class="card-header py-2"> <h6>Details</h6> </div> <div id="bottomContainer" class="list-group " style="height:100px;"> <!--Populated by JS function--> </div> </div> </div> <button id="debug" onclick="handleLinkClick(this)"> Click</button>