Hidden bootstrap 4 custom checkbox issue

I tried to implement Bootstrap 4 custom control for a checkbox by following the documentation, but the checkbox isn't appearing. Can anyone spot what I might be doing incorrectly? 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Product Variant for </label>
  <div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
  <div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
  <div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
  <div class="form-group">
    <div class="custom-control custom-checkbox"><label for="formGroupExampleInput2">Default</label><input type="checkbox" class="custom-control-input" id="customControlValidation1"></div>
  </div>
  
<hr>
<div class="form-group">
  <div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>

cssbootstrap-4

Answer №1

If you're missing the custom-control-label class for the label, make sure to add it in. Follow the custom forms provided by Bootstrap-v4 for guidance: Bootstrap-v4 form.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
    <label>Add Product Variant for </label>
    <div class="form-group">
        <label for="formGroupExampleInput">Code</label>
        <input type="text" class="form-control" placeholder="Enter Name">
    </div>
    <div class="form-group">
        <label for="formGroupExampleInput">Name</label>
        <input type="text" class="form-control" placeholder="Enter Name">
    </div>
    <div class="form-group">
        <label for="formGroupExampleInput2">Description</label>
        <textarea class="form-control" placeholder="Description"></textarea>
    </div>  
    <div class="form-group">
      <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck1">
          <label class="custom-control-label" for="customCheck1">Default</label>
      </div>
    </div>
    <hr>
    <div class="form-group">
        <div class="col-12">
            <button type="button" class="btn btn-default float-right">Add</button>
            <button type="button" class="btn btn-danger float-right">Cancel</button>
        </div>
    </div>
</div>

Answer №2

<!-- begin snippet: js hide: false console: true babel: false -->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="card-body"><label>Add Productc Varian for </label>
      <div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
      <div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
      <div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
      <div class="form-group">
         <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
        <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
      </div>
      </div>
    <hr>
    <div class="form-group">
      <div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
    </div>
    </div>

Answer №3

If you're encountering issues, this solution should help you out. Simply adhere to the correct syntax for custom checkboxes.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Product Variant for </label>
  <div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
  <div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
  <div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
  <div class="form-group">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1">
    <label class="custom-control-label" for="customControlValidation1">Default</label>
  </div>
<hr>
<div class="form-group">
  <div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>

Source: JS Bin

Answer №4

Experiencing a similar issue, I discovered that the root cause was outdated Bootstrap 4 files. Updating to the latest version resolved the problem.

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

What is the best way to adjust the height of the border on the left

Is it possible to add a border-left with height to only one attribute, such as h4? I want to add a border on the left side with a specific height, but the title prohibits adding the height property directly. Can anyone offer guidance on how to achieve th ...

htmlcss

What is the best way to leverage environment variables in my CSS within the context of Next.js for defining the primary color scheme?

Is there a way to use an environment variable to specify the base color in my CSS? I am working with NEXTJS. All of my colors are defined as variables in my globals.css: @layer base { :root { ... --primary: #0096d0; --primary-bright: ...

cssnext.jscolorsenvironment-variablescss-variables

Maximizing efficiency in website reloading and development with Sinatra using Ruby along with Rack and Haml

In my efforts to build a Sinatra website, I have gone from using Shotgun to now utilizing Rerun for reloading my Thin server whenever I make file edits. However, the development cycle is proving to be quite time-consuming. Even small changes to CSS, JavaS ...

cssrubysinatrahaml

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

I need to center align items within the material-UI grid, with the alignment depending on the number of items. For instance, if there are 5 items, 3 items should be aligned side by side in the center and the remaining 2 items should also be centered. Pleas ...

javascriptcssreactjsmaterial-ui

What is the best way to center a menu for a cohesive and balanced appearance?

I am encountering an issue with my design. I am attempting to center-align a menu, but I want it to appear uniform and consistent. I want it to resemble the layout shown in the image link below. https://i.sstatic.net/D3Rep.png I cannot understand why my ...

htmlcssbootstrap-5

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

javascriptcssreactjshtml-table

"Setting an index to a button's ID using Jquery: A step-by-step guide

My goal is to assign incrementing index values to button IDs in a loop. For example, if the first button has an ID of 'unique', the second button should have an ID of 'unique0', and the third button should have an ID of 'unique1&ap ...

javascripthtmljquerycssbootstrap-4

The Bootstrap container is extending beyond the boundaries of the page view

Since I'm not a CSS enthusiast, I opted to incorporate Bootstrap into my small project. However, I've encountered an issue where one of the containers is extending beyond the page view, and I can't seem to figure out why. <!-- STYLE ...

htmlcsstwitter-bootstrapbootstrap-5

Trouble with HR functionality in Outlook email

<table> <tr> <td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8 ...

htmlcsshtml-table

Strange Division Split in the Code. Link to JSFiddle Provided

I encountered a strange line break between two divs while working on a website design. The issue is with the gap between the divs offersContainer and recentWinnersHeadlineContainer. Here's the JSFiddle link: http://jsfiddle.net/d593fdea/ Although the ...

htmlcssspacespacing

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

I recently started using Material-UI and encountered an issue where I couldn't override the root class for Avatar, specifically MuiAvatar-root. Material-Ui Version: 4.11.3 Despite following examples provided by material-ui's documentation here, ...

cssreactjssassmaterial-ui

Leveraging the Power of jsPDF in Your Google Apps Scripts

Is it feasible to integrate jsPDF into a Google Apps Script project? I am attempting to create documents using templated HTML, but certain CSS styles like background-color do not translate to PDF when using the getAs() function. Given the limitations of ...

javascriptcssgoogle-apps-scriptpdf-generationjspdf

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

javascriptjqueryhtmlcssasp.net-mvc

Issue with Bootstrap 4.2 modal: Unable to edit input fields, button cannot be clicked, modal does not close

https://i.sstatic.net/vHnVG.png https://i.sstatic.net/MhU3f.png Utilizing Bootstrap 4.2.1, I have a modal that opens via a specific link: <a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Images are overlapping within nested columns

After inspecting the image provided, I am puzzled by why the images are overlapping each other. Despite my attempts to resize the images and apply the class="img-responsive", they still overlap. The column specified in the code snippet below is p ...

htmlcsstwitter-bootstrapbootstrap-5

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

javascriptjqueryhtmlcss

Eliminate the table background effect on hover using HTML and CSS

If you need assistance with a contact form, please visit this link. There seems to be an issue with the hover effect on the fields causing them to turn dark grey. This may not align with your desired plain white background. You can view a screenshot https ...

htmlcss

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Guide on activating javascript code for form validation using php

How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...

javascriptphphtmlcss

Position the image in the center of the div both horizontally and vertically

At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, bu ...

htmlimagecss