Using Bootstrap 4 to create a dropdown button with the functionality of a regular

I'm struggling with the layout of my table header buttons. Whenever I add a dropdown button, it messes up the alignment and makes the whole thing look unattractive. Here's the code for 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">
                            Download
                        </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>

Here are the other buttons in my table header:

<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">Email
                    </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">Delete
                        </button>
                        <a href="<?php echo base_url("/crud/add") ?>"
                           class="btn btn-outline-success btn-sm">Add Data
                            </a>
                    <?php endif; ?>
                </div>

I'm trying to position my dropdown button next to the other buttons, but it seems that the alignment is off because the dropdown is a div and not a button. When I place the dropdown inside the same div as the buttons, it appears vertically above the other buttons instead of beside them. Any suggestions on how to fix this issue would be greatly appreciated!

Answer №1

To align your element, you can utilize flex properties such as those found in Bootstrap classes like d-flex and justify-content-between. Simply wrap your content in the classes as shown in the code snippet below.

For additional alignment options, refer to the Bootstrap official documentation 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c5c47404741524373071d051d03">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc88928a928c">[email protected]</a>/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">
                            Download
                        </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">Email
                        </button>
    
                            <button type="submit" form="selecties"
                                    class="btn btn-outline-danger btn-sm">Delete
                            </button>
                            <a 
                               class="btn btn-outline-success btn-sm">Add
                                Data</a>

                    </div>
                </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with showing div when hovering

I'm having trouble displaying a div on hover. When I hover over the div element A, the div element B appears as expected. However, when the mouse pointer leaves the div element A, the div element B does not disappear. $('.display_cal'). ...

Tips on how to align a label in the middle of a line using HTML and Bootstrap

I'm having trouble creating an inline form with a text and select input. Despite using Bootstrap 5, I can't seem to achieve the desired appearance. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/e ...

Preventing the page from auto-refreshing upon button click

Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...

The CSS isn't loading properly once the file is uploaded to the server using FileZilla or cPanel

After uploading the file.css file to the server using both FileZilla and cPanel, I noticed that when I visit the website, the CSS is not being applied properly. Specifically, I changed padding-left: 10px; However, upon viewing the Page source, it appears ...

I'm struggling to understand why the background-color is affecting the margins as well

Check out this code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * {border: 0px; padding: 0px;} ...

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

I’ve been tackling a responsive design issue on my website but I can't quite get the footer to stick at the bottom of the page. The 'fixed' property hides half of my text on mobile devices, so I turned to this solution (https://getbootstra ...

Incorporate a button into each row of a b-table by utilizing a template

I am attempting to include a button in each column of my table using a Vuejs template. I have successfully added the Actions column, but unfortunately the button is not displaying. It seems like I might be overlooking something. <template> <div ...

React-select is failing to align properly with flexbox styling

I'm currently working on customizing my navbar to display both react-selects in a single row. I initially had everything running smoothly with the traditional vanilla select, but integrating the react-select caused my styling to break. Navbar.js impo ...

Does the AppBar stay consistent throughout the entire Page Control in Metro Apps?

Having trouble making the AppBar stay constant on my Metro app webpage. Whenever I click on other items, the AppBar disappears. Any tips on how to keep the AppBar visible for the entire page in my Metro App? I am currently using appbar.winControl.show(); ...

Adjusting the transparency level of the JavaScript thumbnail

I have implemented a plugin to showcase an image carousel on my website. The navigation thumbnails in the carousel are currently set to appear "greyed out" when not selected. Is there a way to adjust the level of grey for these thumbnails? Check out the l ...

Automatically log out user upon closing the browser window or tab

Currently in the process of creating a chat web application, I encountered an issue. It seems that if a user closes the tab or browser without clicking the 'logout' button, the state in the database will still show them as "online". I am using CO ...

Allow for a unique background class for each table row to take precedence over the background class of individual cells in a striped table

When attempting to create a striped Bootstrap table using Bootstrap v5.3.3, I encountered an issue with displaying cells with a red background using the Bootstrap "table-danger" class. Additionally, I wanted to highlight entire rows using the "table-warnin ...

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

Weird Javascript behavior when classes are manipulated during mouse scrolling

Searching for a Javascript expert to assist in solving a particular issue. I have a simple function that I need help with. The goal is to add a bounceDown class when scrolling down by 1px, have it run for 5 seconds, and then remove the class for future use ...

Experience the latest HTML5 features directly within a Java desktop GUI, with seamless communication through

This Java desktop GUI utilizes a Java-based web services communication layer along with an HTML library to provide powerful charting and interactivity. I am looking to integrate an HTML5 view within the Java GUI. Can someone assist me in managing JavaScri ...

Tips for retaining and showing previously inputted information in form fields

I have 2 forms on each page. Here is an example of one of them. $('form').submit(function(e) { e.preventDefault(); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" me ...

Div Randomly Transforms Its Vertical Position

After successfully creating a VS Code Extension for code completion, I decided to develop a website as a landing page where users can sign up and customize their extension settings. The editor I built pops up first on the page seemed to be working fine in ...

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet: import React from 'react' const MyComponent = () =&g ...

Disable the button on smaller devices

I'm trying to make my button take up the full width on smaller screens like mobile devices. Here's what I have so far... Large Device https://i.sstatic.net/TJex1.png Medium Device https://i.sstatic.net/Hvkan.png Small Device https://i.sstatic ...