I have a dilemma with the positioning of 10 buttons on my webpage. Specifically, I would like to place them in the top right corner, but they are currently at the bottom. Can you assist me with moving the buttons?
My desired outcome can be seen here.
I suspect that I need to utilize display:flex. Any thoughts?
If you have any suggestions, please share them with me. Below is the code I am working with.
Thank you in advance for your support and time.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-center pt-5 pb-3">Signalétique</h1>
<div class="row pt-3 container">
<div class="card" style="width: 100%;">
<div class="card-body">
<table class="table table-hover table-striped" style="width: 60%">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ">Best Execution</button>
<button type="button" class="btn btn-primary mb-2">Etat du marché</button>
<button type="button" class="btn btn-primary mb-2">Graphiques Historiques</button>
<button type="button" class="btn btn-primary mb-2">Historique des cours</button>
<button type="button" class="btn btn-primary mb-2">Ordre</button>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ms-2">Best Execution</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Etat du marché</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Graphiques Historiques</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Historique des cours</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Ordre</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>