Bootstrap 4 dropdown button as normal button - html

Question

I have a table header with buttons, but the moment I add my dropdown button, it moves all of them around and makes them ugly to look at. This is my dropdown button:
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
These are my other buttons:
<div class="col text-right">
<button type="submit" form="selecties" formaction="<?php echo base_url("/crud/email_multiple") ?>"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<?php if ($userInfo["rights"] == 'admin') : ?>
<button type="submit" form="selecties"
formaction="<?php echo base_url("/crud/delete_multiple") ?>"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a href="<?php echo base_url("/crud/add") ?>"
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
<?php endif; ?>
</div>
I want to put my dropdown next to the other buttons, but I'm guessing because it's a div and not a button they don't align properly?
When I put my dropdown in the same div as my buttons, the dropdown goes vertically above the other buttons.
Would appreciate some help!

Answer 1

You can use flex to align your element. like Bootstrap classes d-flex and justify-content-between. Wrap your content in above classes like below code snippet.
For more alignment options check bootstrap official docs
https://getbootstrap.com/docs/4.6/utilities/flex/#justify-content
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
<div>
<button type="submit" form="selecties"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<button type="submit" form="selecties"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
</div>
</div>