what is the best way to horizontally align div elements within a table cell?

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

It seems that things are a bit disorganized in the image, possibly due to being inside a td element. Is there a way to fix this?

 <td>
    <div class="col"> 
       <div class="input-group text-center">                           
                <div class="input-group-btn">
                     <button class="btn btn-primary" type="submit" id="button-minus"> - </button>
                </div>

                <input type="text" class="form-control" value="1" size="1"gt;

                <div class="input-group-btn">
                    <button class="btn btn-primary" type="submit" id="button-plus"> + </button>
                <</div>
                                                
                                      
         </div> <!-- input-group.// --> 
      </div> <!-- Col.// -->
  </td>
htmlcssbootstrap-4html-tablehorizontal-alignment

Answer №1

To eliminate the standard Bootstrap padding and margin from elements such as td, p, and button, you can use the following CSS code:

td {
    padding: 0;
    margin: 0;
}

Answer №2

To align the buttons and form on the same line, simply include display: inline-flex in the CSS for .input-group

.input-group {display: inline-flex}
 <td>
    <div class="col"> 
       <div class="input-group text-center">                           
                <div class="input-group-btn">
                     <button class="btn btn-primary" type="submit" id="button-minus"> - </button>
                </div>

                <input type="text" class="form-control" value="1" size="1">

                <div class="input-group-btn">
                    <button class="btn btn-primary" type="submit" id="button-plus"> + </button>
                </div>
                                                
                                      
         </div> <!-- input-group.// --> 
      </div> <!-- Col.// -->
  </td>

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

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

Three.js combined with Ember.js

I've been brainstorming ways to merge Ember.js with Three.js. My goal is to render multiple elements, manage the data with Ember.js bindings and general pub/sub handling, while also being able to manipulate the views/elements with three.js using THREE ...

cssember.jsthree.js

JavaScript (Create a button that toggles the visibility of an element)

I have implemented a hamburger menu that transforms into an x when clicked. I am looking to modify it so that clicking on the hamburger opens the menu, and clicking on the x closes the menu. Below is the code I have been working with: <!DOCTYPE html&g ...

javascriptjqueryhtmlcss

Is it possible to locate the storage location of your CSS class in WordPress using the Chrome DevTools?

I need to switch the positions of two tabs on my product page: https://i.sstatic.net/L7xcC.png The Learn More tab should be in place of the Specification tab, but I am having trouble locating the class. I have searched for the class in the style.css fil ...

csswordpress

Dynamic Resizing of Facebook Page Plugin for Responsive Design

I'm currently using the Page Plugin widget from Facebook. The Facebook page mentions: If you wish to adjust the widget's width when the window is resized, you must manually refresh the plugin. Is there a way to dynamically modify the width of ...

javascriptphpcssfacebookresponsive-design

Mastering the Art of Displaying Every Side of a Spinning Cube Using HTML and CSS Animations

As I navigate the online world, my goal is to create a dynamic animation of a rotating cube with an image on each face. Despite my efforts, I am struggling to display all faces simultaneously, especially the front and back faces. I have explored various so ...

htmlcsscss-animations

Updating the border color on angular-archwizard's steps

I am utilizing angular-archwizard to create circular steps for navigation. When I click on different steps, I can see the circle step border change color (in my case, orange) until I click on the last step. Once I click on the last step, all the other step ...

javascriptcssangulartypescript

JQuery modal for creating vibrant and personalized color schemes

I have a basic jQuery modal code that uses grey as the default color. How can I customize this to create a colorful toolbox, for example changing the color from grey to blue? Also, how can I use this script for multiple dialogs, like setting #dialog1 to be ...

jqueryhtml

Is it possible to have a full-width thumbnail navigator in a full-width slider container with Jssor Slider?

I apologize if this topic has already been discussed, In a responsive full-width slider container, I am utilizing thumbnail navigator 03 with the scaling option disabled. Is it feasible to have a fixed-height, but fully (100%) width thumbnail navigator t ...

jqueryhtmlcssjssor

ways to invoke javascript function on body loading

I'm struggling to invoke a JavaScript function when the body loads. Currently, I have the function call on a button but cannot get it to work when added to the body load event. HTML: <body onload="bodyload();"> JavaScript: function bodyload( ...

javascriptjqueryhtml

Tips for moving a specific menu item to the right in bootstrap 4

Currently, I am integrating Bootstrap 4 into a Laravel 8 blog platform that I am working on. While the menu items are correctly positioned, I am facing an issue where I need to move the last menu item to the right. Despite trying various options like ml- ...

htmlcsstwitter-bootstrapbootstrap-4html-lists

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

JavaScript and JQuery failing to sort list items on specific devices

My objective for this code: To alphabetize the list (from A to Z) Unexpected outcome: The list is alphabetizing on my laptop but not on my iPhone. I had to modify the conditional in the JavaScript due to the code defaulting to the else case. I'm h ...

javascriptjqueryhtml

Tips for incorporating transitions into CSS styling

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

csscss-transitionstransition

Checking for the presence of HTML controls in the code behind: How to verify their existence

I am working with an asp.net form that contains a textbox and two dropdown lists in a row. Users have the option to add or delete rows using "plus" and "minus" buttons. Upon submitting the form, I gather values from these controls using Request.Form["Con ...

asp.nethtml

Exploring the use of Shadow DOM in ContentEditable for securing text segments

I have recently been working on creating a basic text editor using ContentEditable. The main requirement for the application is to allow users to insert blocks of text that are protected from typical editing actions. These protected text blocks should not ...

javascripthtmlcontenteditableweb-componentshadow-dom

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...

javascriptcssmaterial-designmaterial-uistyling

The system could not identify 'react-scripts' as a valid command, either internal or external, and the JSON file has been deleted

The error message reads 'react-scripts' is not recognized as an internal or external command, operable program or batch file. I have attempted the following: npm install npm install react-scripts --save npm i -g react-scripts https://github.com/ ...

htmlreactjsjsonoutput

Any suggestions for solving the issue of breaking the line at the end of a <td> within a <table> element using jQuery or JavaScript?

Here is a table format that I have: $(document).ready(function() { var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; var characterCount = enteredText.length + numberOfLineB ...

javascriptjqueryhtml