The alignment of Bootstrap v4.5 checkbox is limited as it cannot be positioned horizontally or vertically when placed next to an input field

As stated in the title: Bootstrap's checkbox is having trouble aligning Horizontally or Vertically when placed next to an input.

Error Displayed:

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

I have experimented with various solutions, but none have provided satisfactory outcomes as illustrated in this code snippet below.

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

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="29594659594c5b07435a691807181f0718">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067268736875">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    
<div class="container mt-5">
<form>
        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" id="inputEmail3">
            </div>
            <div class="col-sm-2">Checkbox</div>
            <div class="col-sm-4">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                    <label class="form-check-label" for="gridCheck1">
                        Ex
                    </label>
                </div>
            </div>
        </div>
</form>
</div>

javascripthtmlcsscheckboxbootstrap-4

Answer №1

To vertically align the checkbox in your form-group, simply add the class "align-items-center".

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

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21514e515144530f4b5261100f10170f10">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9e849f8499">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    
<div class="container mt-5">
<form>
        <div class="form-group row align-items-center">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" id="inputEmail3">
            </div>
            <div class="col-sm-2">Checkbox</div>
            <div class="col-sm-4">
                <div class="form-check orm-check-inline">
                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                    <label class="form-check-label" for="gridCheck1">
                        Example checkbox
                    </label>
                </div>
            </div>
        </div>
</form>
</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

Prevent users from editing Dropdown List in Bootstrap Vue

I'm currently working on a project using "Bootstrap Vue" where I have implemented a feature that changes the input fields to readonly mode when the user clicks on the "confirm" button. This functionality is achieved through a boolean variable assigned ...

vue.jsbootstrap-4dropdownreadonly

Is there a way to collect multiple optional phone numbers dynamically using DOM manipulation?

I have a piece of code here where I am looking to dynamically add additional phone numbers as an optional field. Can anyone help me figure out how to achieve this? <div class="col-12 row border my-2 py-2"> <di ...

javascripthtmldombootstrap-5

Render a select field multiple instances in React

I have 5 different labels that need to be displayed, each with a select field containing the options: string, fixed, guid, disabled Below is the code I've written: class CampaignCodeRenderer extends Component { state = { defaultCampaigns: ...

javascriptreactjs

Determine the presence of a JSON object within a file using JavaScript

Currently, I am developing a mobile app using react-native and have been facing challenges implementing error checking. To store data retrieved from an API in JSON format, I am employing redux along with thunk. At times, the search results yield a JSON res ...

javascriptjsonreact-native

What is the process for updating the URL for specific functions within $resource in Angular?

Check out this code snippet: angular.module('app.posts.services', []).factory('Post', ['$resource', 'API_ENDPOINT', ($resource, API_ENDPOINT) => $resource(API_ENDPOINT, { id: '@id' }, { updat ...

javascriptangularjs

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

htmlcssreactjstypescript

Accessing WCF REST endpoint using Ajax and transmitting data in JSON format

I have developed a Rest service in WCF (demo), which provides me with the following output: {"GetEmployeeJSONResult":{"Id":101,"Name":"Sumanth","Salary":5000}} Now, I have created an ASP.NET website where I am utilizing AJAX JSON to call this rest service ...

c#javascriptajaxjsonwcf

Is there a way to remove a dynamically rendered component from a list?

Whenever I click a button, the same component is dynamically rendered on top of the list. But now, I need to implement a feature where users can delete any component from the list by clicking a cancel button associated with each component. Here's my ...

javascriptreactjstypescript

The tooltip menu options in material ui are displaying in a different location in the window rather than below the button icon. How can this issue be resolved?

I'm having trouble implementing a tooltip on an option menu icon and it's not working as expected. Here is my code: export default function FadeMenu() { const [ anchorEl, setAnchorEl ] = React.useState(null) const bus = Bus() const o ...

javascriptreactjsmaterial-uitooltipoptionmenu

The second attempt at an AJAX call is unsuccessful

I am currently developing a form that displays database results based on two entries: Automarke (brand) and Modell (model). You can view the entries here. The Modell dropdown dynamically changes based on the selected Automarke. Here is the code snippet I ...

javascriptphpjqueryajax

How can I display a Material-UI Drawer that is nested within a Grid component?

I'm currently working on a web application using Material-UI. The main page is structured into 3 grids, all with a fixed height of 500px. I have a requirement to include a drawer within the middle grid that contains some action options. However, my cu ...

javascriptreactjsmaterial-ui

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

javascripthtmlevernote

Determine the amount of clicks and retrieve the URL of the clicked link in Selenium using Python

As a novice in the world of Selenium and Python, I am embarking on the journey of automating banner testing using Python along with Selenium Webdriver. My goal is to keep track of the number of clicks made, ensure that the URLs are redirecting to the corr ...

javascriptpythonselenium

Error: React Select input control is throwing a TypeError related to event.target

Having trouble changing the state on change using a React Select node module package. It works with regular text input, but I can't quite get it to work with this specific component. The error message "TypeError: event.target is undefined" keeps poppi ...

javascriptreactjs

Challenges associated with utilizing img src in JavaScript

I am facing a simple issue. I have carInfo data retrieved from a JSON file, but I am struggling to correctly parse the img source stored in the variable $imgsrc instead of treating it as a string called "$imgsrc". This data needs to be appended to my HTML ...

javascriptjqueryhtmlajax

A guide to displaying a DIV element upon clicking a button in ReactJs

While developing a form, I encountered the need to render the same div in the "Active Membership" section whenever the "Add More" button is pressed. Since users can have multiple active memberships, each time the button is clicked, the input section shou ...

javascriptreactjsreact-hooksformik

Tips for resolving HTML issues in AJAX Client Side-templates from WCF-webservice

I am facing an issue with my templates where the returned HTML is encoded by default, and despite my efforts, I can't seem to find a solution. My goal is to substitute NewLines (\u000a) with a simple <br />, but every attempt results in &a ...

asp.nethtmlajaxdecodeclient-side

Angular2/TypeScript Coding Guidelines

I am curious about the common practices and consensus among the Angular2 community when it comes to writing reusable code in TypeScript. I have gathered some information and questions related to Angular2 that I would like to discuss. Organizing Module/A ...

javascripttypescriptangular

What is the best way to isolate the CSS of individual components in Angular 2?

For the first component: CSS-- ngx-dnd-container { color:black; background-color: white; } HTML- <ngx-dnd-container [model]="targetItemsA" dropZone="multiple-target-a" </ngx-dnd-container> For the sec ...

htmlcssangularangularjs-directiveangular-cli