Center the span element within Bootstrap 5 button groups

I am experiencing an issue where the span elements in my button groups are not aligning properly. I am looking for a way to align these span elements within the button groups without using fixed widths.

Creating a basic web modal with Bootstrap 5

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <span class="input-group-text" id="mode"><i class="bi bi-palette"></i> &nbsp;
        Mode</span>

    <input type="radio" class="btn-check" name="modeOptions" id="artist" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="artist" onclick="displayType = 1;"
        data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
        title="Play and Store Notes">Artist</label>

    <input type="radio" class="btn-check" name="modeOptions" id="perfectionModeautocomplete=" off">
    <label class="btn btn-outline-primary" for="perfectionMode" onclick="displayType = 2;"
        data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
        title="Play along mode">Perfection</label>
</div>
<br> <br>

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <span class="input-group-text" id="basic-addon1"><i class="bi bi-music-note-list"></i> &nbsp;
        Notation Type</span>

    <input type="radio" class="btn-check" name="options" id="staffNotation" autocomplete="off"
        checked>
    <label class="btn btn-outline-primary" for="staffNotation" onclick="displayType = 1;">Staff
        Notation</label>

    <input type="radio" class="btn-check" name="options" id="abcNotation" autocomplete="off">
    <label class="btn btn-outline-primary" for="abcNotation" onclick="displayType = 2;">ABC
        Notation</label>

    <input type="radio" class="btn-check" name="options" id="srgNotation" autocomplete="off">
    <label class="btn btn-outline-primary" for="srgNotation" onclick="displayType = 3;">Custom
        Notation</label>
</div>
cssbootstrap-5

Answer №1

For organizing groups of buttons neatly, I suggest utilizing the table, tr, and td elements.

label {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>

<table>
  <tr>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
        <td>
          <span class="input-group-text" id="mode"><i class="bi bi-palette"></i> &nbsp;
            Mode</span>
        </td>
        <td>
          <input type="radio" class="btn-check" name="modeOptions" id="artist" autocomplete="off" checked>
          <label class="btn btn-outline-primary" for="artist" onclick="displayType = 1;"
            data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
            title="Play and Store Notes">Artist</label>
        </td>
        <td>
          <input type="radio" class="btn-check" name="modeOptions" id="perfectionMode" autocomplete="off">
          <label class="btn btn-outline-primary" for="perfectionMode" onclick="displayType = 2;"
              data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
              title="Play along mode">Perfection</label>
        </td>
    </div>
  </tr>
  <tr>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
        <td>
          <span class="input-group-text" id="basic-addon1"><i class="bi bi-music-note-list"></i> &nbsp;
            Notation Type</span>
        </td>
        <td>
          <input type="radio" class="btn-check" name="options" id="staffNotation" autocomplete="off"
              checked>
          <label class="btn btn-outline-primary" for="staffNotation" onclick="displayType = 1;">Staff
              Notation</label>
        </td>
        <td>
          <input type="radio" class="btn-check" name="options" id="abcNotation" autocomplete="off">
          <label class="btn btn-outline-primary" for="abcNotation" onclick="displayType = 2;">ABC
              Notation</label>
        </td>
        <td>
          <input type="radio" class="btn-check" name="options" id="srgNotation" autocomplete="off">
          <label class="btn btn-outline-primary" for="srgNotation" onclick="displayType = 3;">Custom
              Notation</label>
        </td>
    </div>
  </tr>
</table>

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

The intersection observer fails to detect any new elements or entries that are appended to the page after it has

When I press the "add section" button to create a new section, the intersection observer does not seem to observe it. Even when I try to run the observer again after pressing the button, it still doesn't work. I suspect that I need to reassign the `se ...

javascripthtmlcssarraysintersection-observer

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox. You can view my code on this codepen: <div class="wrapper"> <div class="calheader"> ...

javascripthtmlcss

Does Internet Explorer have a tool similar to Firebug for debugging websites?

Is there a tool similar to Firebug that is compatible with Internet Explorer? Edit I am currently using IE8, so I need a solution that works specifically with IE8. ...

htmlcssinternet-explorer

Activate jquery code during interaction

I am in need of a scalable image that can be centered within a scalable <div>. Currently, I have a wrapper <div> along with the scalable <div> that contains the image. Additionally, there is some jQuery code in place to calculate the widt ...

jqueryhtmlcss

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

csstwitter-bootstrap-3

Content that is partially concealed when scrolling through div elements

I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs ...

csshtmlscrollbar

The alignment of the textarea is off due to an issue with the md

I'm experiencing an issue with the alignment of options in my form. The md-maxlength attribute is causing one line to be higher than the rest, as shown in the image below. https://i.sstatic.net/3J3Ts.png My goal is to move that specific textarea one ...

htmlcssangularjs

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

htmlcss

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Setting the height of a div to 100% is not effective

I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of ...

htmlcss

CSS: Adjusting the position of tooltips to align with the triggering element (rest of code is fully functional)

Looking to create a custom tooltip without relying on plugins. The goal is to align the tooltip vertically to the right of the triggering element, in this case, an input field. The current setup (see Fiddle demo) achieves the desired layout and content fo ...

csspositioncss-position

Experiencing strange behavior with floating labels in Bootstrap 5.3 on my Google Chrome browser (Version 123.0.6312.86 (Official Build) (64-bit))

Lately, I've observed an unusual behavior with BS 5.3 floating labels. Strangely, the placeholder is being displayed below the label text, which is not the expected behavior. On Google Chrome, the floating labels are appearing like this: https://i.ss ...

cssgoogle-chromebootstrap-5

jQuery "slide" animation without using <br>

I've been working on a website that incorporates the jQuery "Slide" effect. I have implemented this effect multiple times, using it on 3 different div tags. Each line consists of one "Dynamic" div tag (the moving one) and one "Static" div tag (the tri ...

javascriptjqueryhtmlcssjquery-ui

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

javascripthtmlcss

Words not within the span, away from the span border

I’m currently in the process of creating a dedicated section on my website called "Voices of the Nation,” which draws inspiration from the foundations laid out in the U.S. Constitution. The objective is to highlight individuals who have shown their sup ...

htmlcsslayoutfonts

Is CSS Transition smoothly easing in, but not out?

On the image gallery of this website , I have applied transitions to the images, where they ease in (fade in), but revert back to their original state instantly when the mouse moves off the image. Is there a way to make the transition reverse when the mo ...

htmlcss

Optimal approach for customizing the appearance of child components based on the parent component

I'm curious about the optimal method for styling child components based on their parent component. For instance, I want to design a list component that can be utilized in both a dropdown popup and a toolbar, each with its own unique style. There are ...

cssangular

Managing modules within the node_modules folder that have dependencies on .css files

Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies. These components come with their own corresponding .css files. The structure of the source code looks like this: |- src |-| |- components ...

cssreactjswebpackreact-starter-kit

Craft a backdrop with subtle hints of italics

I am looking to create a unique background for my webpage using HTML and CSS. I want to have repeated italic shades in various shades of blue, red, and white, similar to rectangular shapes. For inspiration, take a look at the design on this website: If n ...

htmlcssphotoshoprectangles

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

javascriptcss