The width of Bootstrap 5.3.0 form checkboxes varies between options

CSS

input[type='checkbox']
{
    transform: scale( 2 );
    margin-right: 1.5em;
}

Html

<div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk1">
    <label class="form-check-label" for="mChk1">
        t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo
    </label>
</div>

<div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk2">
    <label class="form-check-label" for="mChk2">
        t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo owugwkvn wptewuglbwgutw nbwp riweupriu eoriwei wruwe oruweknwprfeoi uwepowpeoi urwepoiw epoif wpeihwephpo nwpwhfwepoio wieru eiurewpir f powg
    </label>
</div>

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

Why??

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d908d90">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838e8e959295938091a1d4cfd2cfd2">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">



  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk1">
    <label class="form-check-label" for="mChk1">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo
      </label>
  </div>

  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk2">
    <label class="form-check-label" for="mChk2">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo owugwkvn wptewuglbwgutw nbwp riweupriu eoriwei wruwe oruweknwprfeoi uwepowpeoi urwepoiw epoif wpeihwephpo nwpwhfwepoio wieru eiurewpir f powg
      </label>
  </div>


</body>

</html>

cssbootstrap-5

Answer №1

It appears that in Bootstrap version 5.3.0, the checkbox shrinks when placed in a flexbox container (as seen in the second checkbox due to more text filling the container):

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

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a2b9a4b9a7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7cad7c9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">



  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk1">
    <label class="form-check-label" for="mChk1">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo
      </label>
  </div>

  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk2">
    <label class="form-check-label" for="mChk2">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo owugwkvn wptewuglbwgutw nbwp riweupriu eoriwei wruwe oruweknwprfeoi uwepowpeoi urwepoiw epoif wpeihwephpo nwpwhfwepoio wieru eiurewpir f powg
      </label>
  </div>


</body>

</html>

Adding flex-shrink: 0; to the checkbox tag seems to resolve this issue:

    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
      flex-shrink: 0;
    }


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

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d33">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c273a2739">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
      flex-shrink: 0;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">



  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk1">
    <label class="form-check-label" for="mChk1">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo
      </label>
  </div>

  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk2">
    <label class="form-check-label" for="mChk2">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo owugwkvn wptewuglbwgutw nbwp riweupriu eoriwei wruwe oruweknwprfeoi uwepowpeoi urwepoiw epoif wpeihwephpo nwpwhfwepoio wieru eiurewpir f powg
      </label>
  </div>


</body>

</html>

The issue seems to be resolved in Bootstrap ^5.3.2

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

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

What is the standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

Struggling to align a div at the center of a screen

Snippet of HTML Code: <body> <!-- Social Media Icons --> <div id="sm1"><a href="/"><img src="images/facebook.png" height=40 width=40></img></a> </div> <div id="sm2"><a href="/"><img src="image ...

htmlcsscenter

The alignment of image and text next to each other is not functioning as intended

I've been attempting to display an image and text next to each other, but I'm encountering some issues. The current output looks like the figure below: https://i.stack.imgur.com/WxxrS.jpg The desired layout is as shown in the following link: ht ...

htmlcssimagetext

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...

javascripthtmlcsstextstyling

The reverse is concealed following a CSS flip transition

After applying a CSS flip animation to a card, the backside isn't visible once flipped. Here is the HTML code for the card component named "ptree-card": <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Rest of th ...

htmlcss

What does "cascading" refer to in the context of Cascading Style Sheets?

Similar Query: Explaining the concept of "cascading" in CSS Can you clarify the term "cascading" within Cascading Style Sheets? ...

cssterminology

Adjust the transparency of a distant div element by using CSS checkboxes without any JavaScript

I'm faced with the challenge of manipulating the opacity or animating an array of items that are all contained within a single div. In addition to altering the opacity of each individual item, I also want to change the opacity of the entire div and it ...

csscss-selectorspseudo-elementpseudo-classcombinators

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...

javascripthtmljquerycssvideo

Discrepancies in display grid rendering in Firefox versus Chrome

I'm experimenting with creating a master-detail view by showcasing two CSS tables (display:table) side by side. To organize the layout, I've implemented CSS Grid. The master panel typically contains 1 to 10 rows while the detail content can exce ...

htmlcssgoogle-chromefirefox

Create a division element with an image that can be dragged around

I'm having trouble making a div element draggable. Inside the div, there is an img and some text that acts as a label for the image. The issue is that when I begin dragging by clicking on the img, it's the img that gets dragged instead of the par ...

csshtmldrag-and-dropdraggable

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

jqueryhtmlcssresize

Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

What I want to achieve: When hovering over the image, it fades out. Text should fade in after the image fades out. Text should fade out when the mouse leaves. The original image should fade back in. End with the original image and no text displayed. Iss ...

javascriptjquerycsshtmlimage

The dynamically inserted nested division within a bootstrap grid does not occupy the entire width of the parent division

I am working with a parent div where I am dynamically adding smaller divs with content to achieve a specific layout. Here's how the structure looks: https://i.sstatic.net/tN1s1.png The code for the parent div is shown below: <div class="row" sty ...

jqueryhtmlcssbootstrap-4

The grid is intended to be positioned horizontally, but is currently being shown vertically

I need help fixing the layout of my items. They are currently displaying vertically instead of in a horizontal row. Any suggestions on how to correct this? https://i.stack.imgur.com/CQ4yG.jpg <div class="col-lg-12 col-sm-12 portfolio-item"> <d ...

htmlcssbootstrap-4

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

javascriptphphtmlcss

Hyperlink -> Boundary

Our homepage features various elements as part of the menu. Each element consists of a picture, title, and small description. The issue is that these menu items always display a border when the mouse hovers over them, despite attempts to hide it. You can ...

htmlcsshoverborder

Is it possible to modify CSS properties by clicking on buttons?

Hello, I really need help with this task. I want to change the style of a button (which is actually a link) by clicking on it. These buttons are housed within a dynamic child div that changes each time, but the name of the dynamic child div remains con ...

javascriptjqueryhtmlcss

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

Creating an overlapping div with a frosted glass effect typically requires using an image background (like ). I am interested in having a floating div (position:fixed) that can apply a frosted glass effect over any content below it, whether it be an image ...

javascriptjqueryhtmlcss