The alignment of text in the btn-check label of Bootstrap is not centered

My checkboxes with btn-check have labels of varying lengths. I want all the labels to be aligned in the middle, but I can't figure out how to do it. The screenshot below illustrates the issue with the first checkbox. The content is not centered in the box.

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

Here is the code snippet I am using:

<!doctype html>
<html lang="en>

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

<body>

  <div class="container text-center">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
      <div class="col">
        <div class="d-flex flex-wrap w-100 h-100">
          <input type="checkbox" id="b" class="btn-check" value="b">
          <!-- This label has the problem -->
          <label for="b" class="btn btn-outline-primary align-middle ">
                <span class="text-break">Lorem ipsum dolor<br><small class="text-muted">Lorem ipsum</small></span>
                </label>
        </div>
      </div>

      <div class="col">
        <div class="d-flex flex-wrap w-100 h-100">
          <input type="checkbox" id="a" class="btn-check" value="a">
          <label for="a" class="btn btn-outline-primary ">
                <span class="text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><small class="text-muted">Lorem ipsum </small></span>
                </label>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031f031e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

Can anyone help me figure out what I'm missing? Thanks!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

solution 1

To fix the issue, simply add d-flex align-items-center as a class after align-middle in the following line:

<label for="b" class="btn btn-outline-primary align-middle ">

So it will become 

<label for="b" class="btn btn-outline-primary align-middle d-flex align-items-center">
, also in 
<label for="a" .../>

<!doctype html>
<html lang="en">

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

<body>

  <div class="container text-center">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
      <div class="col">
        <div class="d-flex flex-wrap w-100 h-100">
          <input type="checkbox" id="b" class="btn-check" value="b">
          <!-- This label has the problem -->
          <label for="b" class="btn btn-outline-primary align-middle d-flex align-items-center">
                <span class="text-break">Lorem ipsum dolor<br><small class="text-muted">Lorem ipsum</small></span>
                </label>
        </div>
      </div>

      <div class="col">
        <div class="d-flex flex-wrap w-100 h-100">
          <input type="checkbox" id="a" class="btn-check" value="a">
          <label for="a" class="btn btn-outline-primary d-flex align-items-center">
                <span class="text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><small class="text-muted">Lorem ipsum </small></span>
                </label>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e4f8e5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

solution 2

Alternatively, you can enclose the span tag within a div, resulting in the following label structure:

<label for="b" class="btn btn-outline-primary align-middle ">
   <div class="d-flex align-items-center h-100">
      <span class="text-break">Lorem ipsum dolor<br><small class="text-muted">Lorem ipsum</small></span>
    </div>
</label>

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

In CSS, there are two dynamic fields with adjustable widths, each occupying half of the total length

I have a collection of email addresses and names displayed in rows. My goal is to maximize the amount of content shown. For short names, more of the email address should be visible, while for shorter email addresses, more of the name should be shown. If bo ...

csshtmllayout

jQuery insert custom text into HTML and eliminate malfunctioning elements

Using jQuery, I have created a form where the entered text is appended to certain elements. This functionality works correctly. Additionally, I have included a remove link with each added element. When someone clicks on the remove button, it should remove ...

jqueryhtmlcss

Attempting to preserve the CSS transform effect as I switch between menu options

Whenever I stop hovering over my element, it reverts back to its original position. However, I want it to remain in place when I am navigating through the "sousmenu" menu and only return to its original position when I am not hovering over the "sousmenu". ...

jqueryhtmlcss

Difficulty replicating 3 input fields using JavaScript

Combining the values of 3 input fields into 1 Displaying 'fname mnane lname' in the fullname input field. Then copying the fullname value into another input field called fullname2. Check out the code below for both HTML and JavaScript implemen ...

javascripthtmlbootstrap-4

Can you designate a specific Google font for each language on a webpage?

Is there a way to use two different Google fonts, one for English characters and another for Thai characters, on a single page? While it's possible to achieve this using the @font-face syntax by specifying unicode character ranges, Google fonts do no ...

cssunicodegoogle-fonts

Unable to set items as sticky within mat-tabs

Is there a way to make my image stick in place using the following CSS code? position: -webkit-sticky; position: sticky; top: 1px; I have tried implementing it but haven't been successful. HTML: <mat-tab-group class="user-tabs" (selectedTa ...

cssangularangular-materialmat-tab

Adding Multiple CSS Classes to an HTML Element using jQuery's addClass Feature

Take a look at this HTML code snippet: <html> <head> <style type="text/css"> tr.Class1 { background-color: Blue; } .Class2 { background-color: Red; } </style> </head> <body> < ...

jqueryhtmlcss

Is your href in javascript not functioning properly?

Recently, I completed the development of a mobile web application. Overall, everything seems to be working smoothly except for one issue: there is a link with JavaScript in its href that is causing problems. Strangely enough, this link works perfectly fi ...

javascripthtmlmobile

The tabbing feature in bxslider disrupts the alignment of slides, making it

After encountering accessibility issues, I upgraded the bxslider library to version 4.2.3 for better support. Check out this example of bxslider where you can easily tab through the controls: http://jsfiddle.net/qax7w8vt/2/embedded/result/ The problem a ...

javascriptjqueryhtmlbxslider

The absence of images in WordPress categories is a noticeable issue

So I've been working on my WordPress site. For instance, let's say it's wordpress.com I have a page called sports, and some of those pages are now nested under the page 'summer' Now the url looks like www.wordpress.com/summer/sp ...

phphtmlwordpress

What are some ways to prevent popups from being hidden by CSS?

I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in ...

htmlcss

Altering the display attribute cancels out any opacity transitions

When using JavaScript to change the opacity of an element with transition: opacity 1s, the expected duration of one second is met, as demonstrated here: onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; }; p { ...

javascripthtmlcss

The base_url is duplicating the base address, causing an issue with loading the bootstrap CSS file

Recently started working with CodeIgniter and I'm trying to load Bootstrap CSS files using the base_url() function. I've searched for solutions on Stack Overflow, but haven't been able to resolve the issue. The name of my view file is artic ...

phptwitter-bootstrapcodeigniter

How can I stick the footer to the bottom of the page?

I've tried numerous codes in an attempt to make the footer stay at the bottom of the page, however, none of them seemed to work. Here's my footer tag: <footer class="container py-5 navbar-fixed-bottom"> The following div is: <di ...

htmldjango-templatesfooter

What is the method for creating a curved CSS Pseudo element background?

Currently, I have implemented a red pseudo element as part of the background for certain sections on my website. Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead. Does anyone know ho ...

csspseudo-element

Developing an editor

Currently, I am delving into the concept of object inheritance in JavaScript through a practical exercise where I am creating an online editor similar to the one I am currently using. However, I find myself slightly confused as I aim to utilize data-* att ...

javascriptjqueryhtmlcss

What steps can be taken to eliminate the black border from the toggle button after it has been clicked?

image placeholder text After clicking the toggle button, I noticed a black border that I can't seem to remove using Bootstrap 5. Any suggestions on how to resolve this issue? ...

togglenavbarbootstrap-5

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Hey there, I'm encountering an issue with the countdown component on my Next.js website using daisyUI. When the number of days exceeds 99, it's not rendering correctly as shown below: https://i.sstatic.net/cWR2tSEg.png https://i.sstatic.net/V0Iv ...

javascriptcssnext.jsdaisyui

What is the best way to navigate through a complex array in React that includes objects and nested arrays?

I have been working on a JavaScript array that includes subobjects with arrays nested in them. My goal is to iterate through the entire parent object using React. Although I attempted the following approach, unfortunately it did not yield the desired outco ...

javascripthtmlarraysreactjsjson

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss