Checkbox in Bootstrap with an elongated label

This specific CSS code is used to style checkboxes. It scales the size, adds margin, and a border to create a distinctive appearance.

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

When applied in this HTML snippet:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="mChkCustomer">
    <label class="form-check-label" for="mChkCustomer">
        This is just a test for a very llllllooooonnnnngggggg label ..................
    </label>
</div>

It appears properly on wide screens as shown in this image: https://i.sstatic.net/H3a6NTNO.png.

However, when viewed on narrow screens like this: https://i.sstatic.net/O6Defq18.png, the alignment becomes off. A solution for proper alignment of the checkbox and label needs to be implemented.

The question arises: What steps can be taken to ensure the correct positioning of the checkbox and label?

htmlcssbootstrap-5

Answer №1

To achieve centered items, you can leverage the use of flex utility classes and apply display: flex to the parent container. Here's an example:

<div class="form-check d-flex align-items-center">

Check out this demo: 

<!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="82e0ededf6f1f6f0e3f2c2b7acb1acb1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.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="62000d0d16111610031222574c514c51">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
      border: 1.5px solid black;
    }
  </style>
</head>

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


  <form>


    <div class="form-check d-flex align-items-center">
      <input class="form-check-input" type="checkbox" value="" id="mChkCustomer">
      <label class="form-check-label" for="mChkCustomer">
        This is just a test for a very llllllooooonnnnngggggg label ..................
    </label>
    </div>


  </form>



</body>

</html>

Answer №2

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

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customizing Checkbox Alignment</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455a4558">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .form-check {
      display: flex;
      align-items: flex-start;
      /* Aligns checkbox to the top of the first line of text */
    }
    
    .form-check-input {
      transform: scale(2);
      margin-right: 1.5em;
      /* Space between the checkbox and the label */
      flex-shrink: 0;
      /* Prevents the checkbox from shrinking */
    }
    
    .form-check-label {
      flex-grow: 1;
      /* Allows the label to fill available horizontal space */
      flex-basis: 0;
      /* Resets the starting width, allowing it to grow as needed */
      white-space: normal;
      /* Allows the text to wrap */
    }
  </style>
</head>

<body>
  <div class="container-fluid mt-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="mChkCustomer">
      <label class="form-check-label" for="mChkCustomer">
            Testing the alignment with a long label .................................
        </label>
    </div>
  </div>

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

</html>

Answer №3

Consider relocating the label in place of the checkbox

Your CSS styles for this adjustment:

input[type='checkbox'] {
    transform: scale(2);
    /*margin-right: 1.5em;*/
    border: 1.5px solid black;
}

.form-check-label {
  margin-left: 1.5em;
}

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

JavaScript enables the deletion of a class

In HTML 2, I am able to show different statements based on the scenario. These statements are styled using the Bootstrap alert class. The goal is to ensure that when new data is sent, any old communication disappears without causing overload on the page. ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Tips for expanding the dimensions of a text box within the filter menu

In my application, I am using a kendo grid with filterable set to true. The filtering functionality is working properly. However, when I click on the filter symbol, the filter menu opens and I noticed that the size of the text-box within the menu is too sm ...

csskendo-grid

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

javascriptjqueryhtmlaudioplaylist

React, Axios, and the PokeAPI are like a team of explorers navigating an

Trying to enhance my React abilities, I decided to follow this tutorial on creating a list of names using PokeAPI. However, I hit a roadblock at 11.35 into the tutorial while implementing the provided code snippets in both App.js and PokemonList.js: fu ...

javascripthtmlreactjspokeapi

tips for aligning text to the right of an image

For my college project, I am working on a website. However, I have encountered an issue with using a jsp script to display products in a specific way on the webpage. The problem is that I cannot control where the information about price, name, and descript ...

htmlcss

Add a combination of strings and a specific date to be stored in a MySQL database

Currently, I am in the process of troubleshooting a script designed to create SEO-friendly URLs. The script is almost functional, but my brain feels nearly fried trying to pinpoint why I keep receiving the incorrect value in MySQL. Here are the values use ...

phphtmlmysql

Is there a way to customize the look of the time selected in the <input matInput type="time" step="1" /> time picker?

Currently, I am utilizing the following code as a time picker in my Angular 9 application. My goal is to modify the selected time's color to a bright blue shade. How can I accomplish this task? <input matInput type="time" step="1&quo ...

javascriptcssangulartypescriptangular-material

Mixing together an array of colors, experimenting with adding a touch of transparency

Here is my first question, diving right in. I recently created a canvas in HTML and followed a tutorial to generate random floating circles that interact with the mouse position......if you want to check it out, click here. The issue I'm facing now ...

javascripthtmlcssarrays

Ways to enhance a website by adding a custom calculated column

I'm feeling a bit lost and in need of some technology advice. What is it that I truly desire? Picture this scenario: You land on a website and come across a table/div setup that looks something like this: <div class="a"> <div class="pri ...

htmldynamic

Creating a Vertical Stack of Divs Using HTML and CSS

I've attempted various methods to align the links vertically in the left-most column, but without success. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/adRuz/112/ .box { background: #E8E8E8; border-radius: 8px ...

htmlcssstack

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

css

Enhance the appearance of div reflection with additional flair

Attempting to enhance a div with a reflection using the following CSS: CSS :: div.reflection { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); ...

jqueryhtmlcss

Struggling to locate desired href links using BeautifulSoup

I'm currently working on compiling a list of hrefs from the Netflix job portal: . Each job posting on this platform comes with an anchor and a specific class: <a class=css-2y5mtm essqqm81>. To ensure accuracy, here is the complete anchor: <a ...

pythonhtmlbeautifulsoupurllib

The validation process using jQuery may encounter errors when attempting to validate inputs before an 'require_from_group_exact' input

Utilizing the jQuery Validation Plugin, I am able to validate various inputs on an HTML page. It is necessary for the first name to always be provided, and either an email OR a mobile number but not both. This validation is achieved by using the require_fr ...

javascriptjqueryhtmlvalidation

Are the navigation arrows for moving to the previous and next month not displaying in the vue-bootstrap-datetimepicker component?

I have been utilizing this date picker, and it is functioning correctly. However, it seems to lack some CSS styling. Despite numerous attempts to implement the missing CSS code, I have not been successful. Below is the relevant section of my current code: ...

javascriptcsstwitter-bootstrapvue.jsbootstrap-datepicker

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

javascriptjqueryhtmlcssbootstrap-4

Is SimpleHTTPServer included in the package?

Lately, I've been experimenting with the Python SimpleHTTPServer in Mac OS X Bash instead of MAMP to assist with front-end templating. I appreciate its user-friendly nature, but I'm curious if there is a method to incorporate includes for repeate ...

pythonhtmlbashstatic

The arrangement of columns and floating images along with the surrounding white spaces

There are 3 columns, each sized at 33% with images of varying heights inside. When viewed on a device the size of an iPad, I want to change the column sizes to be 50%. However, when I do this, the third column appears in the middle bottom of the top two co ...

htmlimageresponsive-designcss-floatgallery

Use the powerful $.post() method to transfer an image to another page seamlessly

I have two pages, the first page contains a form where users can enter information such as name and mobile number. Additionally, they can upload an image. I would like to use jQuery to access the uploaded image and send it to another page using the $.post( ...

phpjqueryhtmlmysqlajax

How can I attach a cookie to a div that becomes visible after a few seconds of video playback?

After 20 seconds of video play, a div element appears. I am trying to set up a cookie so that once the div is shown, it continues to appear unless the user clears their cache (cookie logic). This is my current attempt - http://jsfiddle.net/9L29o365/ Any ...

javascriptjqueryhtmlcsscookies