Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2.8k
Demo: Add sample code for Bootstrap 4 usage#2173
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
col-sm-offset-2 =>offset-sm-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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
help-block =>invalid-feedback
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Change this to:
<inputtype="checkbox"id="agree"name="agree"value="agree"class="form-check-input"/><labelclass="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. Fromhttps://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.