Bootstrap 4 dropdown button as normal button

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>