What is the best way to position two buttons side by side on a single row

Below is the code snippet:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix modal-footer">
<div class="ui-dialog-buttonset">
<button type="button" class="btn btn-mini btn-info">Yes</button>
<button type="button" class="btn btn-mini btn-info">No</button>
</div>
</div>

My goal is to have the buttons displayed in a single row with a small space in between them.

However, the current output looks like the following screenshot:

https://i.sstatic.net/VR2wB.png

Could someone please advise on how to fix this issue? Any help would be greatly appreciated. Thank you in advance.

htmlcssbootstrap-4

Answer №1

In my opinion, the simplest modern solution would be:

.flex {
  display: flex;
  gap: 16px;
}
<div class="flex">
   <button>Button 1</button>
   <button>Button 2</button>
</div>

Answer №2

To make changes to the appearance of your .ui-dialog-buttonset class in CSS, add the following code:

.ui-dialog-buttonset button {
    display: inline-block;
}
.ui-dialog-buttonset > button:last-child {
    margin-left: 16px;
}

Answer №3

Choose between displaying items using the flexbox layout or inline-block.

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

What is the best way to retrieve the value from a React Img element?

I am having an issue with receiving 'undefined' from the console.log in 'handleClickVideo'. How can I properly extract the value when clicking on a video? I attempted using a div as well, but since div does not have a value property, it ...

javascripthtmlreactjs

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

javascriptjqueryhtmlcss

Guide to Designing a Three-Column Layout Using Only CSS

I'm currently facing an issue with the alignment of the content section on my webpage which consists of three columns. The DIVs are not floating as expected. Below is the code I am using: <div id="content"> <asp:ContentPlaceHolder ID="Ma ...

htmlcssxhtmlcss-float

Preventing Line Breaks in CSS Grid Autofil Experiment: A Guide

My journey in grasping the concepts of CSS Grid starts with this exploration. As you adjust the display width, observe how the text "Client code" switches between being displayed on one line and then breaking onto a new line repeatedly. .grid-container ...

htmlcsscss-grid

Conceal the prominent image when viewing a single post

I've been attempting to hide the featured image on single post view but so far, neither a plugin nor the theme panel option has worked for me. I even tried adding custom CSS code without success. Is there another method that can be used to hide the fe ...

css

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Automated system is responsible for flagging and disabling comments

We are facing a puzzling issue at the moment. Our comments form allows users to submit their thoughts on news articles, and each submission is immediately accepted and displayed on the same page. Within each comment, there is a link that enables users to ...

javascripthtml

Is there a way to assign the value of a textfield to a session attribute in JSP prior to rendering?

Imagine I have the following code snippet: <html> <head> <script> function setSession() { var roll=document.getElementById("rollno").value; session.setAttribute("rollno", roll); } & ...

javascripthtmlcssajaxjsp

Tips for storing HTML form data in a local JSON file without the need for PHP or Node.js dependencies

I'm interested in saving any information panel in an HTML file to a local JSON file. For example, if there are blocks like this: <div class="panel"> <div> <input type="text" name="producttype" id=&q ...

javascripthtmljqueryjsonajax

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

javascriptcss

Looking to scan through a directory of .html files in Node.js to find specific element attributes?

Imagine trying to tackle this task - it's like reaching for a needle in a haystack. Picture a folder containing a static website, complete with images, stylesheets, and HTML files. My Node application needs to dive into this folder and extract only th ...

javascripthtmlfilenode.jsfile-type

Hiding a div with Javascript when the Excel dialog box is loaded

I have a piece of JavaScript code that is activated when the user clicks on an excel image. $("#excel").on("click", function () { $('#revealSpinningWheel').reveal(); $(window).load(function () { $('#revealSpinningWheel').hide ...

javascriptjqueryhtmlexcel

Organizing textual maps within a 2D array for rendering on an HTML5 Canvas

In my spare time, I am working on creating an HTML5 RPG game. The map is implemented using a <canvas> element with specific dimensions (512px width, 352px height | 16 tiles across, 11 tiles from top to bottom), and I'm wondering if there's ...

javascriptjqueryhtmlcanvas

The tab element is not receiving a click event in Protractor

This is the complete HTML code for the Tab section. <tab heading="Meta Data" id="heading_meta-data"> <div id="meta-data" class="row"> <div class="col-md-3 col-xs-3"> ...

javascripthtmlangularjsseleniumprotractor

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

I am looking to display a large amount of data using the Accordion component from material-ui nested inside a Box element. However, I am unsure how to customize the default styles in order to set a specific maxHeight. Is there a way for me to take control ...

cssreactjsmaterial-ui

Updating the background color using typescript

Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...

javascriptcssangulartypescript

Storing Documents on Your Device

I've been working on a project to create a web page that provides links to online PDF files. When you click on these links, the file should be saved locally and its name/path added to local storage. I then aim to display all the saved files by iterati ...

javascripthtmlgoogle-chrome

Limiting jQuery searches to a specific region: Tips and tricks

If I have the code snippet below: <div class="foo"> <div> some text <div class="bar"> </div> </div> </div> <div class="foo"> <div> some text <div class="bar"> some text </div> </div> </ ...

javascriptjqueryhtmlparsingtags

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js