Je veux utiliser le contrôle personnalisé de bootstrap 4 pour la case à cocher, après avoir lu la documentation, j'ai écrit ceci, mais la case à cocher n'est pas affichée, qu'est-ce que je fais de mal?
<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"><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>
4 Réponses :
<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>
<!-- begin snippet: js hide: false console: true babel: false -->
Cela résoudra le problème pour vous. Il suffit de suivre la syntaxe correcte pour les cases à cocher personnalisées.
<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="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
Ajoutez simplement l' custom-control-label
de custom-control-label
classe manquée pour l'étiquette. Vous voulez simplement suivre les formulaires personnalisés du formulaire Bootstrap-v4 pour référence.
<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="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>
J'ai eu le même problème, le problème était que mes fichiers Bootstrap 4 n'étaient pas mis à jour. Téléchargez simplement la dernière version et ça devrait être OK