title
Bootstrap 4 Forms & Buttons | BOOTSTRAP 4 TUTORIAL

description
Forms and Buttons are crucial building blocks of basically every web page. Bootstrap 4 makes the addition and styling of forms and buttons a breeze thankfully! Learn how to take advantage of the right Bootstrap 4 classes to make your form inputs and buttons look good! ---------- Source Code for the Video: https://github.com/academind/bootstrap4-introduction/tree/05-forms Watch the Series on academind.com: https://academind.com/learn/css/bootstrap-4-tutorial/forms-buttons Official Forms Docs: http://getbootstrap.com/docs/4.0/components/forms/ Official Button Docs: http://getbootstrap.com/docs/4.0/components/buttons/ ---------- • You can follow Max on Twitter (@maxedapps). • And you should of course also follow @academind_real. • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'Bootstrap 4 Forms & Buttons | BOOTSTRAP 4 TUTORIAL', 'heatmap': [{'end': 710.345, 'start': 675.062, 'weight': 0.846}, {'end': 801.751, 'start': 756.543, 'weight': 0.764}, {'end': 1476.088, 'start': 1388.546, 'weight': 0.732}, {'end': 1515.799, 'start': 1490.626, 'weight': 0.893}], 'summary': 'Tutorial on bootstrap 4 covers the implementation of forms, styling, validation, and user feedback, including improved checkbox and radio button styling, advanced form layouts using the bootstrap grid, and adding validation classes for automatic and manual validation to enhance user experience.', 'chapters': [{'end': 70.663, 'segs': [{'end': 70.663, 'src': 'embed', 'start': 17.134, 'weight': 0, 'content': [{'end': 28.685, 'text': 'but also how we validate them and make sure that we provide good user feedback to ensure our users can really work with our forms in the way we want them to work with them.', 'start': 17.134, 'duration': 11.551}, {'end': 33.907, 'text': "So let's dive right into that and let's start adding some forms to our Bootstrap project.", 'start': 29.045, 'duration': 4.862}, {'end': 40.851, 'text': "So back in the project, let's add some forms now.", 'start': 37.99, 'duration': 2.861}, {'end': 45.113, 'text': "For that, I'll go back to where we already did some work.", 'start': 41.631, 'duration': 3.482}, {'end': 50.376, 'text': 'And here we have that alert and that modal button from the last video of the series.', 'start': 45.513, 'duration': 4.863}, {'end': 53.477, 'text': "Now I'm going to get rid of all of that.", 'start': 50.896, 'duration': 2.581}, {'end': 58.1, 'text': "I'm even going to get rid of my grid here, so of that entire div.", 'start': 54.038, 'duration': 4.062}, {'end': 63.181, 'text': "And yeah, as I just said, I'll also get rid of my modal.", 'start': 59.04, 'duration': 4.141}, {'end': 68.483, 'text': "So that's the code with which I want to start, just the navigation and the script imports.", 'start': 63.661, 'duration': 4.822}, {'end': 70.663, 'text': "And now let's add a form with Bootstrap.", 'start': 68.843, 'duration': 1.82}], 'summary': 'Demonstrating form addition to bootstrap project with user feedback', 'duration': 53.529, 'max_score': 17.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs17134.jpg'}], 'start': 2.401, 'title': 'Bootstrap forms: styling, validation, and user feedback', 'summary': 'Covers the implementation of bootstrap forms, including styling and validation, to ensure good user feedback and usability.', 'chapters': [{'end': 70.663, 'start': 2.401, 'title': 'Bootstrap forms: styling, validation, and user feedback', 'summary': 'Covers the implementation of bootstrap forms, including styling and validation, to ensure good user feedback and usability.', 'duration': 68.262, 'highlights': ['Bootstrap forms are discussed, focusing on styling and validation to provide good user feedback and usability.', 'The video covers the addition of forms to a Bootstrap project, emphasizing the removal of previous elements and the addition of forms with Bootstrap.', 'The importance of good user feedback and usability is highlighted in the context of working with forms.', 'The chapter emphasizes the removal of existing elements such as alerts, modal buttons, and grid, before adding forms to the project.']}], 'duration': 68.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs2401.jpg', 'highlights': ['Covers the implementation of bootstrap forms, including styling and validation, to ensure good user feedback and usability.', 'The video covers the addition of forms to a Bootstrap project, emphasizing the removal of previous elements and the addition of forms with Bootstrap.', 'The importance of good user feedback and usability is highlighted in the context of working with forms.', 'The chapter emphasizes the removal of existing elements such as alerts, modal buttons, and grid, before adding forms to the project.']}, {'end': 399.893, 'segs': [{'end': 203.07, 'src': 'embed', 'start': 174.367, 'weight': 0, 'content': [{'end': 178.972, 'text': 'And Bootstrap actually makes styling this differently really simple.', 'start': 174.367, 'duration': 4.605}, {'end': 191.882, 'text': 'The easiest way of giving our elements a more form-like look or a nicer look is by adding a class to our inputs, the form control class.', 'start': 179.773, 'duration': 12.109}, {'end': 203.07, 'text': "So for my username input, I'll add class equal form, whoops, form control like this, and I'll add the exact same class to the password field.", 'start': 192.282, 'duration': 10.788}], 'summary': 'Using bootstrap, styling elements with form control class for a more form-like look.', 'duration': 28.703, 'max_score': 174.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs174367.jpg'}, {'end': 289.077, 'src': 'embed', 'start': 247.648, 'weight': 1, 'content': [{'end': 257.894, 'text': "For example, if we would give the surrounding form here an inline style, which of course is bad, but just for demonstration purposes of, let's say,", 'start': 247.648, 'duration': 10.246}, {'end': 262.718, 'text': "three or, let's say, 500 pixels and a margin of auto.", 'start': 257.894, 'duration': 4.824}, {'end': 268.121, 'text': 'if we assign this to the form element and we reload, then we have a nicely centered form like this.', 'start': 262.718, 'duration': 5.403}, {'end': 276.487, 'text': 'And obviously, instead of using that on inline styles, we could simply create a helper class and assign that to our surrounding form.', 'start': 268.521, 'duration': 7.966}, {'end': 283.632, 'text': 'So this is a quick and easy way of getting a nice input styling and this already looks quite nice in my opinion.', 'start': 277.307, 'duration': 6.325}, {'end': 289.077, 'text': 'Now we can also assign our form control class to select inputs.', 'start': 284.233, 'duration': 4.844}], 'summary': 'Demonstrates using inline style and helper class to center form with 500 pixels margin.', 'duration': 41.429, 'max_score': 247.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs247648.jpg'}], 'start': 71.203, 'title': 'Using bootstrap to style form elements', 'summary': 'Covers adding forms using bootstrap, styling form elements like input and labels, and achieving improved user experience and a nicely centered form, dropdown, and styled checkboxes and radio buttons.', 'chapters': [{'end': 246.707, 'start': 71.203, 'title': 'Adding forms with bootstrap', 'summary': 'Explains how to add forms using bootstrap, including adding form elements like input and labels, and using the form control class to style inputs, resulting in a drastic change in appearance and improved user experience.', 'duration': 175.504, 'highlights': ['Bootstrap makes styling forms simple by using the form control class, resulting in a drastic change in appearance with improved user experience. drastic change in appearance, improved user experience', 'Adding form elements like input and labels, and using the form control class to style inputs. form elements, form control class', 'Explanation on adding input elements like text and password, along with adding labels for user understanding. input elements, adding labels']}, {'end': 399.893, 'start': 247.648, 'title': 'Styling html form elements', 'summary': 'Demonstrates how to style form elements such as input fields, select dropdowns, checkboxes, and radio buttons using inline styles and helper classes, achieving a nicely centered form, dropdown, and styled checkboxes and radio buttons.', 'duration': 152.245, 'highlights': ['The chapter demonstrates how to style form elements such as input fields, select dropdowns, checkboxes, and radio buttons using inline styles and helper classes. The chapter provides guidance on styling various form elements including input fields, select dropdowns, checkboxes, and radio buttons using inline styles and helper classes.', 'Achieving a nicely centered form, dropdown, and styled checkboxes and radio buttons. The demonstration showcases the achievement of a nicely centered form, dropdown, and styled checkboxes and radio buttons through the application of styling techniques.']}], 'duration': 328.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs71203.jpg', 'highlights': ['Bootstrap simplifies form styling with the form control class, enhancing user experience.', 'Demonstrates styling input fields, select dropdowns, checkboxes, and radio buttons using inline styles and helper classes.', 'Guidance on adding form elements like input, labels, and achieving a nicely centered form.']}, {'end': 870.086, 'segs': [{'end': 429.175, 'src': 'embed', 'start': 400.774, 'weight': 1, 'content': [{'end': 407.557, 'text': "Let's add a class to the checkbox input and here the class is form-check-input.", 'start': 400.774, 'duration': 6.783}, {'end': 414.64, 'text': "If we add this class to the checkbox input and we reload, still doesn't look perfect.", 'start': 408.197, 'duration': 6.443}, {'end': 419.423, 'text': "It's been moved a bit to the left and it looks even worse than before.", 'start': 415.701, 'duration': 3.722}, {'end': 424.153, 'text': 'We also need to add a class to the label for checkbox elements.', 'start': 420.512, 'duration': 3.641}, {'end': 429.175, 'text': 'We add a class form check label to the label.', 'start': 424.614, 'duration': 4.561}], 'summary': "Adding 'form-check-input' class to checkbox input and 'form-check-label' class to the label resulted in imperfect positioning.", 'duration': 28.401, 'max_score': 400.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs400774.jpg'}, {'end': 500.814, 'src': 'embed', 'start': 449.885, 'weight': 0, 'content': [{'end': 459.972, 'text': 'we should group the label and the checkbox or the radio button which belong together in a wrapping div which has that form check class,', 'start': 449.885, 'duration': 10.087}, {'end': 464.295, 'text': 'and then we add the different classes for the input and for the label.', 'start': 459.972, 'duration': 4.323}, {'end': 469.099, 'text': 'Now with that in place, if we now reload the page, now this looks better.', 'start': 464.615, 'duration': 4.484}, {'end': 474.66, 'text': "Now, one thing that's important, I'm zoomed in here so that you can see everything nice and clean.", 'start': 469.639, 'duration': 5.021}, {'end': 481.102, 'text': 'If I zoom out to 100%, then I actually have the default bootstrap styles that get applied.', 'start': 475.241, 'duration': 5.861}, {'end': 486.264, 'text': 'Zoomed in, this is not really the case, which is why there it looks like it did before.', 'start': 481.662, 'duration': 4.602}, {'end': 493.406, 'text': 'If I view it in the real size that your users would see it in in the end, then we got this nice bootstrap style.', 'start': 486.764, 'duration': 6.642}, {'end': 500.814, 'text': "so with that we got a checkbox added and for radio buttons it's essentially the same, the same approach.", 'start': 493.966, 'duration': 6.848}], 'summary': 'Group labels and input elements in a wrapping div with form check class, resulting in improved appearance and adherence to bootstrap styles.', 'duration': 50.929, 'max_score': 449.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs449885.jpg'}, {'end': 604.244, 'src': 'embed', 'start': 579.333, 'weight': 2, 'content': [{'end': 589.598, 'text': 'then we got a little bit of a cleaner form with more distance between the elements, which often well leads to a better user experience,', 'start': 579.333, 'duration': 10.265}, {'end': 591.399, 'text': 'leads to a nicer style, which you want.', 'start': 589.598, 'duration': 1.801}, {'end': 599.462, 'text': 'so grouping elements with form group is not required, but something you can do if you want to separate the different,', 'start': 592.359, 'duration': 7.103}, {'end': 604.244, 'text': 'well groups of form inputs a bit more from each other.', 'start': 599.462, 'duration': 4.782}], 'summary': 'Spacing between elements improves user experience and style in forms.', 'duration': 24.911, 'max_score': 579.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs579333.jpg'}, {'end': 710.345, 'src': 'heatmap', 'start': 675.062, 'weight': 0.846, 'content': [{'end': 688.932, 'text': 'so we can just add a row here and in that row we could add a column and in that column we could add our first form group and then we add another column next to it where we add our second form group.', 'start': 675.062, 'duration': 13.87}, {'end': 696.856, 'text': 'now, with that, if we just quickly restructure this code, if we now reload,', 'start': 689.992, 'duration': 6.864}, {'end': 702.26, 'text': 'we got full screen width again because i removed that inline style that restricted the width.', 'start': 696.856, 'duration': 5.404}, {'end': 710.345, 'text': 'but you also see that the first two elements are now in a row next to each other and we still have that nice margin to the bottom.', 'start': 702.26, 'duration': 8.085}], 'summary': 'Restructured code to achieve full screen width with elements in a row and added margin at the bottom.', 'duration': 35.283, 'max_score': 675.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs675062.jpg'}, {'end': 756.543, 'src': 'embed', 'start': 725.117, 'weight': 3, 'content': [{'end': 731.222, 'text': 'The grid is perfectly fine and intended to be used in conjunction with forms.', 'start': 725.117, 'duration': 6.105}, {'end': 739.73, 'text': 'If you got any form which should be more than just element after element after element, use the grid as you see it here.', 'start': 731.843, 'duration': 7.887}, {'end': 742.172, 'text': 'Create columns and position them next to each other.', 'start': 739.99, 'duration': 2.182}, {'end': 746.316, 'text': 'and of course we can now again restrict it a bit.', 'start': 742.873, 'duration': 3.443}, {'end': 756.543, 'text': "so let's add another inline style to the form or attach a css class in general and in there, or since we have a css file, why don't we use that?", 'start': 746.316, 'duration': 10.227}], 'summary': 'Use the grid to create columns for forms, and consider adding inline styles or a css class for further customization.', 'duration': 31.426, 'max_score': 725.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs725117.jpg'}, {'end': 801.751, 'src': 'heatmap', 'start': 756.543, 'weight': 0.764, 'content': [{'end': 770.121, 'text': "so let's maybe create a main form class here and let's give this a width of, let's say, um 450 pixels and a margin of auto to center it.", 'start': 756.543, 'duration': 13.578}, {'end': 777.685, 'text': "And let's then use this main form CSS class on our form element here.", 'start': 771.402, 'duration': 6.283}, {'end': 780.027, 'text': "So that's a custom form class now.", 'start': 777.725, 'duration': 2.302}, {'end': 783.868, 'text': "And now if we reload the page, it's centered again.", 'start': 781.067, 'duration': 2.801}, {'end': 789.509, 'text': 'But now we got the first two elements still sitting next to each other due to our grid.', 'start': 784.128, 'duration': 5.381}, {'end': 792.049, 'text': 'And of course, you can use all the grid features here.', 'start': 789.889, 'duration': 2.16}, {'end': 801.751, 'text': 'You can use the responsive grid classes to only put elements next to each other on bigger screens and put them beneath each other on smaller screens.', 'start': 792.489, 'duration': 9.262}], 'summary': 'Creating a main form class with 450 pixels width and using grid features for responsive layout.', 'duration': 45.208, 'max_score': 756.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs756543.jpg'}, {'end': 876.568, 'src': 'embed', 'start': 847.687, 'weight': 4, 'content': [{'end': 853.572, 'text': 'And Bootstrap offers us a couple of ways of signaling this to the user.', 'start': 847.687, 'duration': 5.885}, {'end': 855.753, 'text': 'So how does it work?', 'start': 854.272, 'duration': 1.481}, {'end': 865.822, 'text': 'First of all, Bootstrap offers a couple of helper classes which we can manually add to our elements, to our form elements,', 'start': 856.814, 'duration': 9.008}, {'end': 869.205, 'text': 'to change the appearance of the inputs, for example.', 'start': 865.822, 'duration': 3.383}, {'end': 870.086, 'text': 'Let me show you what I mean.', 'start': 869.225, 'duration': 0.861}, {'end': 876.568, 'text': "What we can do is we can go to an input, let's say to the first name, and let's say we validated it on the server.", 'start': 870.706, 'duration': 5.862}], 'summary': 'Bootstrap offers helper classes for changing appearance of form elements.', 'duration': 28.881, 'max_score': 847.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs847687.jpg'}], 'start': 400.774, 'title': 'Styling form elements', 'summary': 'Covers improving checkbox and radio button styling by adding classes to elements, resulting in better appearance at 100% zoom. it also demonstrates styling forms using bootstrap, including advanced form layouts using the bootstrap grid and validation styles for signaling form validity.', 'chapters': [{'end': 500.814, 'start': 400.774, 'title': 'Improving checkbox and radio button styling', 'summary': 'Discusses adding classes to checkbox and label elements, including form-check-input, form-check-label, and form-check, to improve the styling and alignment, resulting in a better appearance, especially at 100% zoom.', 'duration': 100.04, 'highlights': ['Adding form-check-input class to the checkbox input and form-check-label class to the label improves the styling and alignment.', 'Including a wrapping div with a class of form-check for grouping the label and checkbox/radio button further enhances the appearance.', 'Zooming out to 100% demonstrates the default bootstrap styles being applied for a better visual representation.']}, {'end': 870.086, 'start': 500.814, 'title': 'Styling forms with bootstrap', 'summary': 'Demonstrates how to style forms using bootstrap, including grouping labels and inputs for better control, utilizing the bootstrap grid for advanced form layouts, and incorporating validation styles for signaling form validity to the user.', 'duration': 369.272, 'highlights': ["The chapter demonstrates grouping labels and inputs using a 'form group' class, which adds margin to separate them, leading to a better user experience and a nicer style. margin added at the bottom of the group", 'It explains how to utilize the Bootstrap grid for more advanced form layouts, such as positioning form groups next to each other by creating columns within a row. demonstrates positioning form groups next to each other', 'The chapter also discusses the usage of validation styles in Bootstrap for signaling form validity to the user, including helper classes to change the appearance of form elements. demonstrates the usage of helper classes for changing the appearance of form elements']}], 'duration': 469.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs400774.jpg', 'highlights': ['Including a wrapping div with a class of form-check for grouping the label and checkbox/radio button further enhances the appearance.', 'Adding form-check-input class to the checkbox input and form-check-label class to the label improves the styling and alignment.', "The chapter demonstrates grouping labels and inputs using a 'form group' class, which adds margin to separate them, leading to a better user experience and a nicer style.", 'It explains how to utilize the Bootstrap grid for more advanced form layouts, such as positioning form groups next to each other by creating columns within a row.', 'The chapter also discusses the usage of validation styles in Bootstrap for signaling form validity to the user, including helper classes to change the appearance of form elements.', 'Zooming out to 100% demonstrates the default bootstrap styles being applied for a better visual representation.']}, {'end': 1358.683, 'segs': [{'end': 910.022, 'src': 'embed', 'start': 882.89, 'weight': 0, 'content': [{'end': 898.735, 'text': 'Now what we typically do is we send back the page from the server and we add CSS classes to the inputs which were incorrect to signal well that they were incorrect and to give the user some UI help in filling the form out correctly.', 'start': 882.89, 'duration': 15.845}, {'end': 903.137, 'text': 'So what we do is we go to that input which we want to mark as invalid,', 'start': 899.355, 'duration': 3.782}, {'end': 910.022, 'text': 'where we have the form control class and we can add the is dash invalid class to it.', 'start': 903.137, 'duration': 6.885}], 'summary': 'Css classes are added to incorrect inputs for user help.', 'duration': 27.132, 'max_score': 882.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs882890.jpg'}, {'end': 976.921, 'src': 'embed', 'start': 952.224, 'weight': 1, 'content': [{'end': 958.068, 'text': "and we would render this conditionally on the server to make sure it's only there when the form is actually invalid.", 'start': 952.224, 'duration': 5.844}, {'end': 966.694, 'text': 'But to also give this a red text color, we also add a class to that, and that would be invalid-feedback.', 'start': 959.068, 'duration': 7.626}, {'end': 976.921, 'text': 'If we do this and we reload, now it has a slightly different style and looks nicer as some additional info added to the input.', 'start': 967.867, 'duration': 9.054}], 'summary': "Conditional rendering on the server for form validation with red text color and class 'invalid-feedback'.", 'duration': 24.697, 'max_score': 952.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs952224.jpg'}, {'end': 1131.52, 'src': 'embed', 'start': 1103.346, 'weight': 2, 'content': [{'end': 1118.65, 'text': 'but in the end you got these classes and features so that you can really provide the best possible user feedback by adjusting the right classes and by taking advantage of Bootstrap only showing the text which makes sense for the given input.', 'start': 1103.346, 'duration': 15.304}, {'end': 1122.391, 'text': 'So this is how you can add your own validation classes.', 'start': 1119.61, 'duration': 2.781}, {'end': 1131.52, 'text': 'bootstrap also is capable of taking advantage of automatic validation on the front end.', 'start': 1123.391, 'duration': 8.129}], 'summary': 'Bootstrap enables adding validation classes for user feedback and automatic front-end validation.', 'duration': 28.174, 'max_score': 1103.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1103346.jpg'}], 'start': 870.706, 'title': 'Form input validation and user feedback in bootstrap', 'summary': 'Covers form input validation on the server, styling inputs with css classes, and adding user guidance. it also explains adding validation classes in bootstrap for automatic and manual validation, emphasizing user feedback and utilizing bootstrap features.', 'chapters': [{'end': 1033.063, 'start': 870.706, 'title': 'Form input validation and styling', 'summary': 'Explains how to validate form inputs on the server, mark them as invalid or valid using css classes like is-invalid and valid, and add additional help text for user guidance, ensuring a seamless and visually appealing form filling experience.', 'duration': 162.357, 'highlights': ['The server validates the form input and adds CSS classes like is-invalid to mark it as invalid and provide UI help. When the server identifies an invalid input, it adds the is-invalid class to mark it as such, providing visual feedback for the user.', 'Adding the valid class signals a valid input, and additional help text can be rendered conditionally on the server. The valid class can be used to signal a valid input, and help text can be conditionally added on the server for user guidance.', 'Help text can be added below the input elements using the form-text class, and text-muted can be used to blend it into the background. Help text can be included below input elements using the form-text class, and text-muted can be used to give it a subtle appearance.']}, {'end': 1358.683, 'start': 1033.063, 'title': 'Bootstrap user feedback', 'summary': "Discusses how to add validation classes in bootstrap, enabling automatic validation on the front end and manual validation using javascript, with a focus on providing the best possible user feedback and taking advantage of bootstrap's features.", 'duration': 325.62, 'highlights': ['The chapter discusses how to add validation classes in Bootstrap, enabling automatic validation on the front end and manual validation using JavaScript. Automatic validation on the front end, manual validation using JavaScript, adding validation classes in Bootstrap.', "The chapter emphasizes providing the best possible user feedback and taking advantage of Bootstrap's features. Providing the best possible user feedback, taking advantage of Bootstrap's features.", "The chapter explains the necessity of displaying error text or invalid feedback only when the input is invalid and how valid feedback is displayed with the 'is valid' class. Displaying error text or invalid feedback only when input is invalid, displaying valid feedback with the 'is valid' class."]}], 'duration': 487.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs870706.jpg', 'highlights': ['The server validates the form input and adds CSS classes like is-invalid to mark it as invalid and provide UI help.', 'Adding the valid class signals a valid input, and additional help text can be rendered conditionally on the server.', 'The chapter discusses how to add validation classes in Bootstrap, enabling automatic validation on the front end and manual validation using JavaScript.', "The chapter emphasizes providing the best possible user feedback and taking advantage of Bootstrap's features."]}, {'end': 1758.318, 'segs': [{'end': 1476.088, 'src': 'heatmap', 'start': 1388.546, 'weight': 0.732, 'content': [{'end': 1395.491, 'text': "So this would even work with approaches where you're not sending the form data with an AJAX request, but you want to have a normal form submission,", 'start': 1388.546, 'duration': 6.945}, {'end': 1396.792, 'text': "but only if it's valid.", 'start': 1395.491, 'duration': 1.301}, {'end': 1400.675, 'text': "So here we're stopping this normal form submission if it's invalid.", 'start': 1397.273, 'duration': 3.402}, {'end': 1411.483, 'text': "and we'll also set a form by a class, by accessing the class list of the form and adding the was validated class.", 'start': 1401.776, 'duration': 9.707}, {'end': 1414.846, 'text': "now that's an additional class you need to add.", 'start': 1411.483, 'duration': 3.363}, {'end': 1424.413, 'text': 'so this would be added next to needs validation, and this will then make sure that bootstrap assigns the right styles to the elements,', 'start': 1414.846, 'duration': 9.567}, {'end': 1428.596, 'text': 'to the inputs inside of the form that are invalid.', 'start': 1424.413, 'duration': 4.183}, {'end': 1436.238, 'text': 'Now, how is Bootstrap or not Bootstrap, the browser determining whether something is invalid or not?', 'start': 1429.795, 'duration': 6.443}, {'end': 1439.319, 'text': 'You need to use some built-in attributes.', 'start': 1437.078, 'duration': 2.241}, {'end': 1442.781, 'text': 'So for our username, for example, which is a text input,', 'start': 1439.72, 'duration': 3.061}, {'end': 1451.005, 'text': "we can add the required attribute to tell the browser that this input is only valid if it's not empty because it's required.", 'start': 1442.781, 'duration': 8.224}, {'end': 1457.668, 'text': "And there are other browser defaults like max length and so on, but here I'll just go with required.", 'start': 1451.605, 'duration': 6.063}, {'end': 1462.048, 'text': 'Now if I reload, get the same look as before.', 'start': 1458.863, 'duration': 3.185}, {'end': 1467.155, 'text': 'Please note that our default or manually added classes are still doing their job.', 'start': 1462.428, 'duration': 4.727}, {'end': 1476.088, 'text': 'But if I hit submit with the username being empty, we actually get that default hint by the browser.', 'start': 1467.856, 'duration': 8.232}], 'summary': "Stopping invalid form submission and adding 'was validated' class for proper styling.", 'duration': 87.542, 'max_score': 1388.546, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1388546.jpg'}, {'end': 1439.319, 'src': 'embed', 'start': 1411.483, 'weight': 1, 'content': [{'end': 1414.846, 'text': "now that's an additional class you need to add.", 'start': 1411.483, 'duration': 3.363}, {'end': 1424.413, 'text': 'so this would be added next to needs validation, and this will then make sure that bootstrap assigns the right styles to the elements,', 'start': 1414.846, 'duration': 9.567}, {'end': 1428.596, 'text': 'to the inputs inside of the form that are invalid.', 'start': 1424.413, 'duration': 4.183}, {'end': 1436.238, 'text': 'Now, how is Bootstrap or not Bootstrap, the browser determining whether something is invalid or not?', 'start': 1429.795, 'duration': 6.443}, {'end': 1439.319, 'text': 'You need to use some built-in attributes.', 'start': 1437.078, 'duration': 2.241}], 'summary': 'Adding a new class next to needs validation to ensure bootstrap assigns correct styles to invalid form inputs.', 'duration': 27.836, 'max_score': 1411.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1411483.jpg'}, {'end': 1528.365, 'src': 'heatmap', 'start': 1481.234, 'weight': 6, 'content': [{'end': 1489.725, 'text': 'So we first of all need to disable this to make sure that our JavaScript code can kick in, because this will actually prevent the submission anyways.', 'start': 1481.234, 'duration': 8.491}, {'end': 1497.95, 'text': 'to disable the browser default here we need to go to the form element again and add the no validate attribute.', 'start': 1490.626, 'duration': 7.324}, {'end': 1507.855, 'text': 'this will disable the browser default check so that our javascript code runs and we can do our manual check and then let bootstrap assign the classes.', 'start': 1497.95, 'duration': 9.905}, {'end': 1515.799, 'text': 'so reload the page again and now, if you submit, you see, due to us adding needs validation to the form we,', 'start': 1507.855, 'duration': 7.944}, {'end': 1528.365, 'text': 'bootstrap automatically sets some styles for the username which it identifies as invalid correctly and the valid styles to all the other inputs,', 'start': 1516.579, 'duration': 11.786}], 'summary': 'Disabling browser default check allows javascript to run and enables manual check for form validation, resulting in correct identification of invalid and valid inputs by bootstrap.', 'duration': 47.131, 'max_score': 1481.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1481234.jpg'}, {'end': 1615.225, 'src': 'embed', 'start': 1566.441, 'weight': 2, 'content': [{'end': 1574.027, 'text': 'if you wanna take advantage of the browser built in validation mechanism triggered via javascript here,', 'start': 1566.441, 'duration': 7.586}, {'end': 1581.393, 'text': "then you need to add was validated once you're done and prior to that you need to add needs validation.", 'start': 1574.027, 'duration': 7.366}, {'end': 1586.117, 'text': 'in this case, bootstrap will then take the results of the browser built in validation.', 'start': 1581.393, 'duration': 4.724}, {'end': 1588.88, 'text': 'install your elements as needed.', 'start': 1586.117, 'duration': 2.763}, {'end': 1598.762, 'text': 'so this is how you can validate bootstrap forms and, as always, check out the official docs to learn more about that.', 'start': 1589.98, 'duration': 8.782}, {'end': 1602.803, 'text': "now let's finish this video by also styling our button.", 'start': 1598.762, 'duration': 4.041}, {'end': 1609.204, 'text': 'styling buttons is super easy and, as always, link to the official docs can be found below the video.', 'start': 1602.803, 'duration': 6.401}, {'end': 1615.225, 'text': 'you style a button like our submit button here by adding a class, and the class is the button class,', 'start': 1609.204, 'duration': 6.021}], 'summary': 'Validate bootstrap forms using browser mechanism, style buttons with a class.', 'duration': 48.784, 'max_score': 1566.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1566441.jpg'}, {'end': 1670.549, 'src': 'embed', 'start': 1641.114, 'weight': 4, 'content': [{'end': 1645.617, 'text': 'but we also got success, danger warning info.', 'start': 1641.114, 'duration': 4.503}, {'end': 1648.98, 'text': 'basically the classes you already know from the alert video.', 'start': 1645.617, 'duration': 3.363}, {'end': 1650.902, 'text': 'success, for example, would turn this green.', 'start': 1648.98, 'duration': 1.922}, {'end': 1655.084, 'text': 'these are the default classes we can add now.', 'start': 1652.643, 'duration': 2.441}, {'end': 1662.226, 'text': 'sometimes you also want to have kind of an inverted button where you only have a border but a transparent background.', 'start': 1655.084, 'duration': 7.142}, {'end': 1670.549, 'text': 'for this you can simply add a outline between the button and the success part or the info or whatever color you use.', 'start': 1662.226, 'duration': 8.323}], 'summary': 'Classes for success, warning, danger, info & inverted button available.', 'duration': 29.435, 'max_score': 1641.114, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1641114.jpg'}, {'end': 1758.318, 'src': 'embed', 'start': 1711.842, 'weight': 0, 'content': [{'end': 1716.764, 'text': "And only if disabled is removed, it'll look like a clickable button again.", 'start': 1711.842, 'duration': 4.922}, {'end': 1719.905, 'text': 'So this is the last thing you should know.', 'start': 1717.384, 'duration': 2.521}, {'end': 1725.947, 'text': 'This is another way of styling the buttons or taking advantage of indirectly applied styling.', 'start': 1720.205, 'duration': 5.742}, {'end': 1733.882, 'text': 'And with that, you get all the knowledge you need to build beautiful and flexible forms with the help of Bootstrap.', 'start': 1727.199, 'duration': 6.683}, {'end': 1740.145, 'text': 'You know how to add form elements and style them correctly, how to structure them with form groups,', 'start': 1734.162, 'duration': 5.983}, {'end': 1748.389, 'text': 'how to structure them even more and create more advanced layouts with the form or the normal grid inside the form,', 'start': 1740.145, 'duration': 8.244}, {'end': 1753.692, 'text': 'how to validate forms either manually or automatically, and how to style buttons.', 'start': 1748.389, 'duration': 5.303}, {'end': 1757.697, 'text': "I hope you liked the video and I'll see you again in the next videos.", 'start': 1754.232, 'duration': 3.465}, {'end': 1758.318, 'text': 'Bye.', 'start': 1758.117, 'duration': 0.201}], 'summary': 'Learned to style buttons, validate forms, and build layouts with bootstrap.', 'duration': 46.476, 'max_score': 1711.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1711842.jpg'}], 'start': 1358.683, 'title': 'Styling bootstrap forms', 'summary': 'Covers utilizing browser-built-in form validation and bootstrap styling to automatically identify and apply styles to form elements, and adding specific classes for different button styles, ultimately providing knowledge to build beautiful and flexible forms with bootstrap.', 'chapters': [{'end': 1588.88, 'start': 1358.683, 'title': 'Form validation and styling', 'summary': 'Explains how to utilize browser-built-in form validation and bootstrap styling to automatically identify and apply styles to invalid and valid form elements, and how to disable the browser default checks to enable manual form validation, which can be achieved by adding specific attributes and classes.', 'duration': 230.197, 'highlights': ['By utilizing the browser built-in form validation and Bootstrap styling, we can automatically identify and apply styles to invalid and valid form elements. The chapter explains how Bootstrap automatically sets styles for invalid and valid form elements, including identifying the username as invalid and applying valid styles to other inputs and the checkbox.', "Adding specific attributes such as 'required' for input validation and 'novalidate' to disable browser default checks enables manual form validation. The transcript details the addition of attributes like 'required' for input validation and 'novalidate' to disable browser default checks, allowing for manual form validation to be performed through JavaScript.", "The 'needs validation' and 'was validated' classes need to be added to take advantage of the browser built-in validation mechanism triggered via JavaScript. The chapter emphasizes the need to add 'needs validation' and 'was validated' classes to leverage the browser built-in validation mechanism triggered via JavaScript, which enables Bootstrap to apply the results of the validation to the form elements."]}, {'end': 1758.318, 'start': 1589.98, 'title': 'Styling bootstrap forms and buttons', 'summary': 'Covers styling bootstrap forms and buttons, including adding specific classes for different button styles and showing how to disable a button, ultimately providing the knowledge needed to build beautiful and flexible forms with bootstrap.', 'duration': 168.338, 'highlights': ['The chapter covers styling Bootstrap forms and buttons The chapter provides guidance on styling Bootstrap forms and buttons, offering practical tips and techniques.', 'Adding specific classes for different button styles The video demonstrates adding specific classes like primary, secondary, success, danger, warning, and info to create different button styles.', 'Showing how to disable a button The chapter explains how to disable a button using the disabled attribute, with a clear indication of the disabled state and how to revert it to an enabled state.', 'Providing the knowledge needed to build beautiful and flexible forms with Bootstrap The chapter equips viewers with the necessary knowledge to create aesthetically pleasing and adaptable forms using Bootstrap, covering form elements, form groups, advanced layouts, form validation, and button styling.']}], 'duration': 399.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/K-ccGZYRWzs/pics/K-ccGZYRWzs1358683.jpg', 'highlights': ['The chapter equips viewers with the necessary knowledge to create aesthetically pleasing and adaptable forms using Bootstrap, covering form elements, form groups, advanced layouts, form validation, and button styling.', 'By utilizing the browser built-in form validation and Bootstrap styling, we can automatically identify and apply styles to invalid and valid form elements.', "The chapter emphasizes the need to add 'needs validation' and 'was validated' classes to leverage the browser built-in validation mechanism triggered via JavaScript, which enables Bootstrap to apply the results of the validation to the form elements.", 'The chapter provides guidance on styling Bootstrap forms and buttons, offering practical tips and techniques.', 'The video demonstrates adding specific classes like primary, secondary, success, danger, warning, and info to create different button styles.', 'The chapter explains how to disable a button using the disabled attribute, with a clear indication of the disabled state and how to revert it to an enabled state.', "Adding specific attributes such as 'required' for input validation and 'novalidate' to disable browser default checks enables manual form validation."]}], 'highlights': ['The chapter emphasizes the removal of existing elements such as alerts, modal buttons, and grid, before adding forms to the project.', 'The importance of good user feedback and usability is highlighted in the context of working with forms.', 'Covers the implementation of bootstrap forms, including styling and validation, to ensure good user feedback and usability.', 'The video covers the addition of forms to a Bootstrap project, emphasizing the removal of previous elements and the addition of forms with Bootstrap.', 'Bootstrap simplifies form styling with the form control class, enhancing user experience.', 'Demonstrates styling input fields, select dropdowns, checkboxes, and radio buttons using inline styles and helper classes.', 'Guidance on adding form elements like input, labels, and achieving a nicely centered form.', 'Including a wrapping div with a class of form-check for grouping the label and checkbox/radio button further enhances the appearance.', 'Adding form-check-input class to the checkbox input and form-check-label class to the label improves the styling and alignment.', "The chapter demonstrates grouping labels and inputs using a 'form group' class, which adds margin to separate them, leading to a better user experience and a nicer style.", 'It explains how to utilize the Bootstrap grid for more advanced form layouts, such as positioning form groups next to each other by creating columns within a row.', 'The chapter also discusses the usage of validation styles in Bootstrap for signaling form validity to the user, including helper classes to change the appearance of form elements.', 'Zooming out to 100% demonstrates the default bootstrap styles being applied for a better visual representation.', 'The server validates the form input and adds CSS classes like is-invalid to mark it as invalid and provide UI help.', 'Adding the valid class signals a valid input, and additional help text can be rendered conditionally on the server.', 'The chapter discusses how to add validation classes in Bootstrap, enabling automatic validation on the front end and manual validation using JavaScript.', "The chapter emphasizes providing the best possible user feedback and taking advantage of Bootstrap's features.", 'The chapter equips viewers with the necessary knowledge to create aesthetically pleasing and adaptable forms using Bootstrap, covering form elements, form groups, advanced layouts, form validation, and button styling.', 'By utilizing the browser built-in form validation and Bootstrap styling, we can automatically identify and apply styles to invalid and valid form elements.', "The chapter emphasizes the need to add 'needs validation' and 'was validated' classes to leverage the browser built-in validation mechanism triggered via JavaScript, which enables Bootstrap to apply the results of the validation to the form elements.", 'The chapter provides guidance on styling Bootstrap forms and buttons, offering practical tips and techniques.', 'The video demonstrates adding specific classes like primary, secondary, success, danger, warning, and info to create different button styles.', 'The chapter explains how to disable a button using the disabled attribute, with a clear indication of the disabled state and how to revert it to an enabled state.', "Adding specific attributes such as 'required' for input validation and 'novalidate' to disable browser default checks enables manual form validation."]}