Consistent Gaps Among Any Number of Buttons

I have a scenario where I have multiple buttons arranged in different lines. Currently, when a button doesn't fit on a line, it moves to the next line leaving blank space behind. What I want is to evenly space out the buttons that manage to be on the same line so that the line looks complete. I want the buttons to be spaced out in such a way that there are multiple buttons on each line and each line appears full. Most solutions I've come across involve creating columns explicitly, but they all assume a predetermined number of buttons/columns rather than considering buttons of varying sizes and adjusting spacing accordingly. I am looking for a solution that can automatically adjust the spacing between buttons to fill up the entire line. For example, if we have 3 buttons labeled as 1, 2, 3, I would like them to be spaced out such that button 1 starts at the far left end and button 3 ends at the far right. How can I achieve this?

htmlcssbootstrap-5

Answer №1

It appears that Bootstrap is being utilized in your project, so make sure to explore the Flex feature.

You can implement something similar to: 

d-flex flex-wrap justify-content-between
on the main element.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d534d534e0106170251">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="w-90 mx-auto d-flex flex-wrap justify-content-between">
    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>
</div>

Answer №2

By replacing the 

<div class="mx-auto">
with the classes 
<div class="d-flex justify-content-between">
, the links will be evenly distributed within the parent div.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67667d7a7a7c6576413e305b325b32526f68697c2f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">



<div class="d-flex justify-content-between" style="width: 90%">
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>


<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>

</div>

Furthermore, if you opt to use mx-auto, it should be applied to each <input> element where you want the auto margin. Remember that the item must have either display: block or display: inline-block.

Answer №3

A different approach would be to utilize a card group for displaying multiple buttons in a responsive manner, with equal spacing and size, all on one line above the sm breakpoint.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a7aaaab1b6b1b7a4b585f0ebf4ebf6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="card-group mb-4">
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 2'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 3'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test Much Longer String That Makes This Multiple Lines 4'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 5'>
  </div>
</div>

<hr>

<div class="card-group mb-4">
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test 2'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test little Longer String'>
  </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

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss

Font Awesome symbols using the class "fa-brands" are not functioning as expected

I have included a font awesome library in the header using the following code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> However, when I try to display an ic ...

htmlcssfont-awesome

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

javascriptjqueryhtmlcssajax

Setting the flex-direction for <td> elements: A helpful guide

This is a snippet from the render function of one of my components, showcasing a table: return ( ... <td> <div style={{ width: '100%' }}>50</div> {' '} <span clas ...

htmlreactjscssflexbox

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml

Clicking on an element will remove a class and unselect an input using JQuery

Trying to achieve a functionality where clicking on a list item with a radio button input selects it, but clicking again deselects it. The issue is despite various attempts, nothing seems to work properly. function setupToptions() { if ($('ul.top ...

javascriptjqueryhtml

Prevent the float:left property from causing my div to overlap with another div

Is there a way to style "a" so that it can take up space and float to the left simultaneously? <div style="background:#111"> <div id="a" style="float:left; height:30px"></div> </div> ...

htmlcss

Populate the table with JSON object information

I've structured a table as follows: <div class="row"> <div class="row"> <table class="table table-bordered table-striped tree-grid"> <thead class="text-primary"> <tr> <th> ...

htmlangularjsjson

Store information during each iteration

Below is a snippet of my JavaScript code: for (var i in data){ var trans_no = data[i]; var transno = trans_no.transno; var transdate = trans_no.transdate; var dropno = trans_no.drop; var cusname ...

javascriptphphtmlsqlajax

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

cssnext.js

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

In a React application, the input field unexpectedly loses focus after typing just one character

Has anyone encountered an issue with a dropdown menu causing input field focus to be lost after typing one character? I've attempted setting unique keys for each field, but it hasn't resolved the problem. For reference, here is the link to the p ...

javascripthtmlreactjsreact-hooks

Instructions for creating scrollable MaterializeCSS tabs when there are too many tabs to fit within the width of the container without scrolling

Here is an example code (SSCCE) that showcases the issue I am facing. The MaterializeCSS frontend framework documentation states: Scrollable Tabs Tabs automatically become scrollable Source However, when I attempt to use more tabs than can fit on the ...

jqueryhtmlcssmaterial-designmaterialize

the deactivation of my rollover class is being caused by my float class

With the assistance of a generous contributor on stackoverflow, I was able to overlay different colored CSS boxes onto various images. These boxes could be removed upon mouseover, revealing the images beneath. You can view the code I used on fiddle here. ...

javascriptjqueryhtmlcss

Hide the overlay fullscreen menu upon clicking an anchor link

I'm having trouble with Javascript, but some of you might find this easy. I found a fullscreen overlay menu on Codepen and I'm trying to figure out how to close it when clicking an anchor link. Looking for assistance with adding javascript to c ...

javascripthtmlcssanchoroverlay

Generating modal pages on the fly

One thing that's been on my mind is creating modals for my page. Typically, I would include the HTML code for my modal directly in the page like this: <div class="my-modal"> <form action="/home/index"> <input type="text" class="txt- ...

javascriptjqueryhtmlmodal-dialog

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

Interact with multiple links within a table using Python

In an attempt to automate the process of clicking on multiple links within a table, I have crafted the following HTML code: <div id="gadget-34365" class="gadget-inline" style="height: 905px;"> <div class="results-wrap search-results-dashboard-ite ...

pythonhtmlseleniumselenium-webdriver

Automatically resize and vertically align a centrally positioned div in a designated container

I have a div container that is centered in the middle of another container. I managed to adjust it for one slide, but the issue arises when I create multiple .html files using the same css file - the height of the container does not meet my expectations. I ...

htmlcss