Centralize Checkboxes with Bootstrap

Is there a way to center the checkbox input both vertically and horizontally within its parent column?

The image below illustrates the parent column and checkbox. I have attempted using classes like text-centered, d-flex justify-content-center, and align-self-center, but none have been successful. Could it be related to nested columns?

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

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f4e8f6eba4a3b2a7f7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="container-lg">
  <div class="row">
    <div class="col-2">
      <div class="row align-items-center h-100">
        <div class="col-4 d-flex border justify-content-center align-items-center h-100">
          <div class="form-check align-items-center d-flex justify-content-center align-items-center">  
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center align-items-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 h-100 border d-flex align-items-center justify-content-center">
          <div class="form-check d-flex justify-content-center align-items-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="row align-items-center h-100">
        <div class="col-2 h-100 border d-flex align-items-center justify-content-center">
          <span>Name</span>
        </div>
        <div class="col-8 h-100 border d-flex align-items-center">
          <span>Desc</span>
        </div>
        <div class="col-1 h-100 border d-flex align-items-center">
          <span>Total</span>
        </div>
        <div class="col-1 wg-right-bottom-border h-100">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input align-self-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Extra credit for maintaining both vertical and horizontal alignment when printing.

htmlcsstwitter-bootstrapcheckboxbootstrap-4

Answer №1

Make sure all the checkboxes are centered. Is that what you want..?

I took out only the .align-item-center from all three of the .form-check .div attributes and added .d-flex and .justify-content-center to the last checkbox's .col tag.

<!DOCTYPE html>
<html lang="en>
<head>
  <title>solution</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212667c647c63">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09a8185958289b0c3dec6dec0">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa8a958a8a9f88d49089bacbd4cbccd4cb">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285c465e4659">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-lg">
  <div class="row">
    <div class="col-2">
      <div class="row h-100">
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center">  
            <input class="form-check-input d-flex justify-content-center align-items-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
         </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="row align-items-center h-100">
        <div class="col-2 h-100 border d-flex align-items-center justify-content-center">
          <span>Name</span>
        </div>
        <div class="col-8 h-100 border d-flex align-items-center">
          <span>Desc</span>
        </div>
        <div class="col-1 h-100 border d-flex align-items-center">
          <span>Total</span>
        </div>
        <div class="col-1 d-flex justify-content-center wg-right-bottom-border h-100">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input align-self-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

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

HTML5 and CSS Menu: Displaying and concealing items based on screen size

When the screen size is 320px, I want to hide the menu. Currently, the menu is always hidden and I need to call it. It should be visible by default, but when the screen size is 320px, #main-nav needs to be called. * { box-sizing: border-box; } ...

htmlcssajax

Issue with Jquery change event not functioning as expected

My webpage consists of the following HTML code: <form id="fileuploadform"> <input type="file" id="fileupload" name="fileupload" /> </form> Accompanied by this snippet of jQuery code: $(':file').change(function(){ var ...

javascriptjqueryhtml

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

jquerycssajaxjquery-mobilebrowser-history

Retrieve the parent's current state by accessing it through a callback function in React

My callback function onRestore is only logging the history until the id of the clicked snapshot. Why is it showing incorrect state? I've exhausted all options, so any help would be appreciated. import React, { useState, useEffect, useRef } from "re ...

javascripthtmlcssreactjsstate

Include a condition to check the value of each row (angular material)

I am facing an issue where I need to apply a condition based on the value of the current column, but I am unable to access the value of the current row. I am unsure which variable to use in order to check the condition. I tried using 'row' but it ...

htmlangulartypescriptangular-materialmat-table

Prevent inspection of elements in Angular 2

Is there a way to prevent users from using inspect element on my website? I have disabled text selection, but users are still able to copy content through inspect element. ...

htmlangulartypescript

Is CodeMirror's PHP mode failing to function properly?

There seems to be an issue with displaying the highlighted text, and I'm not sure why. Links: <link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css"> <link rel="stylesheet" href="http://codemirror.net/mode/php/../../l ...

phpcsscodemirror

What is the process for adjusting the text font within a fa-border element?

If you're interested, I have created a site template using only HTML5 and CSS3 which you can find here. For Font Awesome 5, instead of the SVG with JS version, I opted for the CSS webfont option. A clever trick I discovered was using <span class= ...

htmlcssfontsfont-awesome

Issue with uppercase letters within a text input field

Imagine having an <input> and a <textarea> along with some JavaScript code that sends the value of the <input> to the <textarea> with additional text. How can you achieve this task? The text-transform: capitalize property is set in ...

javascripthtmlcss

Providing input through the URL bar in PHP and HTML

I have a simple form on my website's HTML page. <form action="post.php" method="post"> Message: <input type="text" name="message" /> &nbsp; <input type="submit" name="submit" value="send"> </form> After submitti ...

phphtml

The Ajax request encountered a syntax error due to an unexpected token '<'

I have searched the forum extensively for similar questions, but unfortunately haven't found a suitable answer for my specific problem. In my jQuery code, I am attempting to make an AJAX call using the following snippet: function submitForm(formData) ...

javascriptjqueryhtmlajax

Eliminate placeholder text when the tab key is pressed

I'm currently facing an issue with a textarea that has a placeholder and the Tab key functionality in Internet Explorer. I've included placeholder.js to make it work, but when I repeatedly press the tab key and focus on the textarea, the placehol ...

javascriptjqueryhtmlcss

Adjust remaining vertical space

Trying to design a TailwindCss layout that resembles the following: +----------------------+ | | +-----+----------------+ | | | | | | | | | | | | +-----+------ ...

cssflexboxtailwind-css

Tips for attaching functions to a fresh SVG element with jQuery?

My jQuery code creates an <svg> element and appends it to a <div>. When I try to access the appended <svg> using each() after the append() function, the event handler doesn't work. However, if I create the <svg> element before ...

javascriptjqueryhtmlsvg

What causes divs and spans to be null values when attempting to adjust them using programming techniques?

Although I have experience styling logic with Ruby and Java, I am relatively new to front end development and JavaScript. I am encountering an issue where divs and spans are either undefined or null when I try to access them using methods like getElementBy ...

javascripthtmlcss

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

I have little experience with javascript, but I want to make a change to my navbar icon. Currently, my navbar has a black background with a white navbar icon. As I scroll the page, the navbar background changes to white and the font color changes to black. ...

javascripthtmlcssbootstrap-4navbar

Tapping elsewhere on the screen will not result in the select box closing

I'm currently troubleshooting an issue with the site filter feature. When the btn-select is open and I click outside the panel, the select remains open. I am looking to create an event that will detect when the dropdown is closed so that I can close t ...

javascriptjquerycsstwitter-bootstrap

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...

css

Emphasize specific letters in a word by making them bold, according to the user

In my app, there is a search feature that filters data based on user input and displays a list of matching results. I am trying to make the text that was searched by the user appear bold in the filtered data. For example, if the user searches 'Jo&apos ...

javascripthtmlcssreactjs

Updating the Title of a Page in Node.js

Is it possible to dynamically update the title of each page using NodeJS? The index.html file (located inside the public folder) looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel= ...

htmlnode.jsexpress