Demo: Add sample code for Bootstrap 4 usage #2173
Conversation
There was a problem hiding this comment.
Hi @gwhenne,
Thanks a lot for your contribution.
This looks good so far, however I left some comments in order to address some minor issues.
Also, do you think you can add an example with feedback icons like the one in Bootstrap v3 example?
demo/bootstrap/index-bs4.html
Outdated
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-sm-8 col-sm-offset-2"> |
demo/bootstrap/index-bs4.html
Outdated
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-sm-8 col-sm-offset-2"> | ||
| <div class="page-header"> |
There was a problem hiding this comment.
page-header => border-bottom mb-4 mt-4 pb-2
demo/bootstrap/index-bs4.html
Outdated
| }, | ||
| errorElement: "em", | ||
| errorPlacement: function ( error, element ) { | ||
| // Add the `help-block` class to the error element |
demo/bootstrap/index-bs4.html
Outdated
| error.addClass( "invalid-feedback" ); | ||
|
|
||
| if ( element.prop( "type" ) === "checkbox" ) { | ||
| error.insertAfter( element.parent( "label" ) ); |
There was a problem hiding this comment.
element.parent( "label" ) => element.next( "label" )
demo/bootstrap/index-bs4.html
Outdated
| } | ||
| }, | ||
| highlight: function ( element, errorClass, validClass ) { | ||
| $( element ).parents( ".col-sm-5" ).addClass( "is-invalid" ).removeClass( "is-valid" ); |
There was a problem hiding this comment.
Remove .parents( ".col-sm-5" ), it's not needed here.
demo/bootstrap/index-bs4.html
Outdated
| $( element ).parents( ".col-sm-5" ).addClass( "is-invalid" ).removeClass( "is-valid" ); | ||
| }, | ||
| unhighlight: function (element, errorClass, validClass) { | ||
| $( element ).parents( ".col-sm-5" ).addClass( "is-valid" ).removeClass( "is-invalid" ); |
There was a problem hiding this comment.
Remove .parents( ".col-sm-5" ), it's not needed here.
demo/bootstrap/index-bs4.html
Outdated
| <div class="form-check"> | ||
| <label> | ||
| <input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input"/>Please agree to our policy | ||
| </label> |
There was a problem hiding this comment.
Change this to:
<input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input"/>
<label class="form-check-label">Please agree to our policy</label>|
@Arkni - I just uploaded code with your suggestions - thank you! I didn't add Bootstrap 3 style feedback icons to the sample. Bs3 used Glyph icons to do this, which are not in Bs4. From https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm
|
|
I applied the changes you pushed (found in branch Thanks a lot for your contribution :) |
Ref #2131.
Simple page showing how to use jquery-validation with Bootstrap 4.