AlignmentPositioning Customize Check Boxes with Progress Bars in Bootstrap 4

I have the code snippet below:

<div class="row">

        <div class="col-md-2">
            <div class="custom-control custom-checkbox my-auto" style="display: inline; align-items: center;">
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-md-10">
            <div class="progress-wrapper mt-1 pt-0">
  <div class="progess-info">
    <div>
      <span>5 Stars</span>
    </div>
    <div class="progress-percentage">
      <span style="font-size: 12px">65%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>
        </div>

    </div>

The issue I'm facing is that the checkbox is not vertically centered, as shown in this screenshot:

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

Additionally, there doesn't seem to be any margin or padding around it.

htmlcssbootstrap-4

Answer №1

To easily make the .col element flexible, just include the d-flex class:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
<div class="row">
        <div class="col-2 d-flex">
            <div class="custom-control custom-checkbox my-auto" >
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Stars</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>
  </div>
    </div>

Answer №2

To achieve vertical alignment, you can convert the parent element of .custom-checkbox into a flexbox and utilize the align-content property. In Bootstrap 4, you have access to specific classes for this purpose: 

class="col-md-2 d-flex align-items-end"

Answer №3

Utilize flexbox for flexible layouts

.custom-flex {
  display: flex; /* enable flex properties on the div */
  align-items: center; /* vertically align items to center */
  justify-content: center; /* horizontally align items to center */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
        <div class="col-2 custom-flex">
            <div class="custom-control custom-checkbox my-auto" >
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Stars</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>
  </div>
    </div>

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

Leveraging a global variable value within an AJAX JSON POST request

I want to send a JSON post request to my Elasticsearch instance using AJAX. Is it possible to include a global variable's value in the 'data' section of the request? Could it look something like this? $(document).ready(function() { $(&ap ...

jqueryhtmlajax

How can I preload images for smoother navigation on my WordPress AJAX?

I am working with a WordPress site that has ajax navigation. Whenever a user clicks on a link on the left side, the HTML content within <div class="page-details"></div> is loaded. My goal is to preload any images that will be displayed in this ...

javascriptjqueryhtmlajax

Creating button text wrapping with Bootstrap 5

My goal is to design a button using Bootstrap 5 that has a unique appearance. I came across a similar post on Stack Overflow but couldn't find a solution that fits my needs. This is the HTML code I attempted: <button type="button" class="btn ...

htmlcssbuttonbootstrap-5word-wrap

Links are functional when browsing on a PC web browser, but fail to work on mobile (Android)

My knowledge of web programming is a bit outdated as I learned some html and java in high school about 15 years ago. However, I've decided to put my skills to use and help a friend create an offline web-based html database for his collection of data t ...

androidhtmlmobilehyperlinktabular

Display text below image in a reduced size for "mobile" screen

I am encountering an issue with my website where the font overlaps the image when viewed on a smaller device. How can I adjust the HTML or CSS to ensure that the text appears below the image on mobile devices? Below is the snippet of my HTML and CSS code: ...

pythonhtmlcssdjango

The background image in the hovering textbox shifts and changes size

I've been trying to set a background image on a Kendo UI Textbox. It looks good until you hover over it. But when you do hover over it, this issue arises: How can I resolve this? The background image should remain in place even when I hover and cli ...

htmlcsskendo-uitextboxkendo-asp.net-mvc

Adjusting the Size of Slideshow Pictures in a JavaScript Array to Match the Viewport

Welcome to my first post! Please excuse any formatting issues. I am currently working on a project where I am trying to create a slideshow using Javascript. I have successfully added images into an array and have the slideshow up and running. However, I ...

javascripthtmlcss

jQuery effects failing to run properly in Internet Explorer

<script type="text/javascript" src="css/jquery-1.7.1.js"></script> <script type="text/javascript"> function slidedown(id){ $('#rerooftext').hide(0); $('#inspectiontext').hide(0); $('#remodelingtext').hid ...

javascriptjqueryhtml

Mobile and tablet screen resolutions determine the position of the navigation toggle button

I've been stuck on this issue for days now and would really appreciate some help sorting it out. I'm trying to position the hamburger icon on the right side, a contact picture with a phone number in the middle, and a brand logo on the left. For s ...

htmlcssbootstrap-4navbarhamburger-menu

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

jqueryhtmlcss

What is the most effective way to incorporate animated hyperlinks?

I've been grappling with a webpage I'm designing, featuring sentences acting as links arranged in inline-block format. My goal is to create an animated effect that resembles twinkling stars, pausing the animation on hover. It feels like I'm ...

jquerycssanimation

A guide to configuring the default date format as ('dd/mm/yyyy') using ng-bootstrap

html <label for="date">{{ "date" | translate }}</label> <input type="date" class="form-control checking-field" id="date"> Is there a way to display the date in the format ('dd/mm/yyyy') in this HTML code? ...

htmlangularbootstrap-4

redux form has encountered an error: the element type provided is not valid, a string is expected for built-in components

While working on my stepper code, I attempted to add a radio button. However, this addition resulted in the following error. I referenced this example before implementing it. Despite that, I am still encountering errors. Could you please advise me on how ...

javascripthtmlreactjsreduxmaterial-ui

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

javascripthtmliframe

Is it possible to display cz-shortcut-listen="true" in the HTML Body using Chrome's Developer Tools?

While testing the HTML code I've been working on, I noticed something unusual when using Developer Tools in Google Chrome version 22.0.1229.94 m. I observed that the <body> tag contained the attribute cz-shortcut-listen="true", which is not part ...

htmlgoogle-chromegoogle-chrome-devtools

Customize the default getstream component styles in a NextJS Component

Is there a way to customize the CSS of getStream.io components using custom CSS? I have created a component as shown below and now I want to override the styles for various classes of its components. Following the instructions in this README file, I impor ...

cssreactjsnext.jsgetstream-io

Ways to retrieve form data following a post request using JavaScript

Does anyone know how to read form data from testPage.html in testPageResult.html? I have created a html page called testPage.html with a form that has a post action like the following: <h2>HTML Forms</h2> <form action="http://test.com/tes ...

javascripthtmlformsxmlhttprequest

Angular: The application has encountered an error due to an undefined property reading issue, resulting in a type error

Here is the code for the company.ts file: company.ts file - List item export class Company{ gstNo:number; contactNumber:number; contactName:string; phoneNo:number; address:string; companyName:string; } import { Injectable } ...

javascripthtmlangulartypescriptfirebase-realtime-database

HTML and CSS are distinct entities with their own individual purposes and

Can you create custom entities? For example: &longline; --> ----------------------------- and then incorporate it in HTML code: <div> &longline; bla bl bla </div> ...

htmlcss

applying custom font to select boxes in bootstrap

Trying to style the select option text using a Poppins font with the following class: .poppinsregular14diese00000061 { font-family: Poppins; font-weight: 400; font-size: 14px; color: #00000061; } You can view the implementation in this fi ...

cssbootstrap-4