Coding

Bootstrap 4 Forms & Buttons | BOOTSTRAP 4 TUTORIAL

  • 00:00:01 welcome back to this series we already
  • 00:00:04 learned a lot about bootstrap over the
  • 00:00:06 last videos off the series in this video
  • 00:00:09 we'll have a look at bootstrap forms
  • 00:00:11 we'll have a look at not just how we
  • 00:00:13 style forms in a beautiful way like this
  • 00:00:16 but also how we validate them and make
  • 00:00:19 sure that we provide good user feedback
  • 00:00:22 to ensure our users can really work with
  • 00:00:25 our forms in the way we want them to
  • 00:00:28 work with them so let's dive right into
  • 00:00:30 that and let's start adding some forms
  • 00:00:32 to our bootstrap project
  • 00:00:37 so back in the project let's add some
  • 00:00:40 forbs now for that I'll go back to where
  • 00:00:43 we already did some work and here we
  • 00:00:45 have that alert and that modal button
  • 00:00:48 from the last video of the series now
  • 00:00:50 I'm going to get rid of all of that I'm
  • 00:00:54 even going to get rid of my grid here so
  • 00:00:57 of that entire death and yeah as I just
  • 00:01:00 said I'll also get rid of my modal so
  • 00:01:03 that's the code with which I want to
  • 00:01:05 start just in navigation and D Script
  • 00:01:07 imports and now let's add a form with
  • 00:01:10 bootstrap
  • 00:01:10 now how do we add forms it's actually
  • 00:01:13 pretty straightforward first of all we
  • 00:01:15 add the form element not strictly
  • 00:01:18 required for bootstrap but semantically
  • 00:01:21 it makes sense to create a HTML form I
  • 00:01:24 guess and in there a typical form
  • 00:01:26 obviously has some inputs let's say we
  • 00:01:29 add an input element type text and we
  • 00:01:32 could give that some name like maybe
  • 00:01:34 user name whatever you want to fetch
  • 00:01:37 eventually with that input and we could
  • 00:01:40 have another input maybe off type
  • 00:01:42 password and we could well fetch the
  • 00:01:46 user password so this would be like a
  • 00:01:48 typical
  • 00:01:49 standard form now we probably also want
  • 00:01:53 to have some labels to give the user an
  • 00:01:55 idea of what we actually want to get so
  • 00:01:58 we could add a label here for an element
  • 00:02:02 with the ID user name so let's add that
  • 00:02:04 ID here too and this is not required by
  • 00:02:07 bootstrap this just semantically makes
  • 00:02:10 sense whoops here and let's add another
  • 00:02:13 label in front of the password for an
  • 00:02:17 element with the ID password so let's
  • 00:02:19 add this ID here to this four attribute
  • 00:02:23 here simply ensures that screen readers
  • 00:02:26 can understand
  • 00:02:28 – which input this label relates now we
  • 00:02:31 should put some content between the
  • 00:02:32 label opening and closing tags so here
  • 00:02:35 we want to fetch the user name and here
  • 00:02:38 we want to get the password let's say if
  • 00:02:41 we save all of that and we go back to
  • 00:02:43 our page and reload it this is what we
  • 00:02:46 end up with not super pretty in my
  • 00:02:49 opinion we most of
  • 00:02:50 time one a stylist a bit differently and
  • 00:02:54 bootstrap actually makes styling this
  • 00:02:57 differently really simple the easiest
  • 00:03:00 way of giving our elements a more
  • 00:03:03 foreign like look or a nicer look is by
  • 00:03:07 adding a class to our inputs the form
  • 00:03:10 control class so for my username input
  • 00:03:14 I'll add class equal form
  • 00:03:16 whoops form control like this and I'll
  • 00:03:20 add the exact same class to the password
  • 00:03:22 field only to these I didn't add
  • 00:03:25 anything to the labels at this point of
  • 00:03:27 time now if we reload we already see a
  • 00:03:30 drastic change
  • 00:03:31 now our inputs look nicer they got this
  • 00:03:34 nice animated or yeah this nice outline
  • 00:03:37 here we click into him we got some
  • 00:03:39 padding inside of there they got rounded
  • 00:03:42 corners and a slight gray border and the
  • 00:03:46 most obvious change of course is that
  • 00:03:48 they now take the full width of the
  • 00:03:50 screen that is super important this
  • 00:03:53 clearly is not entirely the style we
  • 00:03:55 want to have here but it allows us to
  • 00:03:58 create a nice style in conjunction with
  • 00:04:00 the grid for example or with some other
  • 00:04:03 code that restricts the size of the
  • 00:04:05 surrounding container for example if we
  • 00:04:08 would give the surrounding form here an
  • 00:04:11 inline cell which of course is bad but
  • 00:04:13 just for demonstration purposes off
  • 00:04:15 let's say free or let's say 500 pixels
  • 00:04:20 and a margin of auto if we assign this
  • 00:04:23 to the form element and we reload then
  • 00:04:25 we have a nicely centered form like this
  • 00:04:28 and obviously instead of using that on
  • 00:04:30 inline Styles we could simply create a
  • 00:04:32 helper class and assign that to our
  • 00:04:35 surrounding form so this is a quick and
  • 00:04:38 easy way of getting a nice input styling
  • 00:04:40 and this already looks quite nice in my
  • 00:04:43 opinion now we can also assign our form
  • 00:04:46 control class to select inputs so if we
  • 00:04:49 add another label here where we want to
  • 00:04:52 find out which gender our user has and
  • 00:04:55 we then add a select drop down here
  • 00:04:57 gender ID gender let's say then we
  • 00:05:01 typically populate this with a couple of
  • 00:05:03 options so
  • 00:05:04 this is all just a regular HTML code
  • 00:05:06 there we could have mail and we also
  • 00:05:10 have female so let's stick to the two
  • 00:05:13 traditional ones here and with that we
  • 00:05:16 got a nice drop down if we reload this
  • 00:05:20 is our drop down now this clearly
  • 00:05:22 doesn't fit the style of the other
  • 00:05:24 inputs though we can as I just said also
  • 00:05:27 add our class here this form control
  • 00:05:29 class to death select element and that's
  • 00:05:32 important to the Select element not to
  • 00:05:34 the options if we added like this and we
  • 00:05:37 now reload now we also have that select
  • 00:05:40 element in that style
  • 00:05:41 now what about checkboxes and radio
  • 00:05:44 buttons well we can style these too so
  • 00:05:47 let's quickly go back to the HTML code
  • 00:05:49 and in there let's add an hour input
  • 00:05:53 which is of type checkbox where we also
  • 00:05:58 of course want to add a label which
  • 00:06:01 shows the text after the checkbox here
  • 00:06:03 and there we could maybe say except –
  • 00:06:08 terms and give that here an ID off
  • 00:06:12 except terms like this and then we could
  • 00:06:17 simply say accept terms and conditions
  • 00:06:21 with an ampersand ampersand here reload
  • 00:06:25 and then we got our checkbox here with
  • 00:06:28 the default in my case Mac style now
  • 00:06:32 again this might not entirely be the
  • 00:06:34 style you want to have and you can't add
  • 00:06:37 a class to ensure that its child is
  • 00:06:38 styled properly let's add a class to the
  • 00:06:41 checkbox input and here the class is 4
  • 00:06:45 and – check – input if we add this class
  • 00:06:49 to teach checkbox input and we reload
  • 00:06:52 still doesn't look perfect it's it's
  • 00:06:55 been moved a bit to the left and it
  • 00:06:57 looks even worse than before
  • 00:06:59 we also need to add a class to the label
  • 00:07:02 for checkbox elements we add a class
  • 00:07:05 form check label to the label if we do
  • 00:07:10 that and we reload doesn't look that
  • 00:07:12 much better because we need one
  • 00:07:14 additional class which actually has to
  • 00:07:17 be added to a wrap
  • 00:07:18 element most of the time simply add if
  • 00:07:20 so let's add a div and let's give that
  • 00:07:22 div a class of form – check so for a
  • 00:07:26 checkbox and the same for radio buttons
  • 00:07:29 we should group the label and the
  • 00:07:32 checkbox or the radio button which
  • 00:07:34 belong together in a wrapping div which
  • 00:07:37 has that form check clasp and then we
  • 00:07:40 add the different classes for the input
  • 00:07:43 and for the label now with that in place
  • 00:07:45 if we now reload the page now this looks
  • 00:07:48 better now one thing that's important
  • 00:07:50 I'm zoomed in here so that you can see
  • 00:07:53 everything nice and clean if i zoom out
  • 00:07:56 to 100% then I actually have the default
  • 00:07:59 bootstrap stats that get applied assume
  • 00:08:01 then this is not really the case which
  • 00:08:04 is why there it looks like that before
  • 00:08:06 if I view it in the real size that your
  • 00:08:09 users would see it and in the end then
  • 00:08:11 we got this nice bootstrap style so with
  • 00:08:14 that we got a checkbox at it and four
  • 00:08:16 radio buttons it's essentially the same
  • 00:08:18 the same approach the same way you add
  • 00:08:21 styles and classes all with the form
  • 00:08:24 check CSS classes you at hatch this is
  • 00:08:27 the simple way of creating a form or
  • 00:08:30 styling of form in 24min puts now
  • 00:08:33 sometimes you need a bit more control or
  • 00:08:36 you wanna well control the layout a bit
  • 00:08:39 more and for dad you can group labels
  • 00:08:42 and inputs let me show you how this
  • 00:08:44 works you can add a div and that div can
  • 00:08:47 receive a class of form group now you
  • 00:08:50 would take your label and input that you
  • 00:08:53 which belong together
  • 00:08:54 and put them inside of such a form group
  • 00:08:56 if you do that and you then save that so
  • 00:09:00 here I only wrapped the first pair into
  • 00:09:03 a div if you save that and reload now
  • 00:09:06 you see the thing that happened
  • 00:09:08 basically is a little bit more margin
  • 00:09:11 was added at the bottom of that group to
  • 00:09:14 separate it a bit more from the
  • 00:09:15 following element which often is what
  • 00:09:18 you want so if I repeat this again div
  • 00:09:21 with a class of form group and then I
  • 00:09:24 take my second pair of label and input
  • 00:09:27 and I put it in there and I do it one
  • 00:09:30 last time for
  • 00:09:32 that if your or for that select
  • 00:09:35 drop-down I should say and put dad and
  • 00:09:38 your tube then we got a little bit of a
  • 00:09:42 cleaner form with more distance between
  • 00:09:44 the elements which often well leads to a
  • 00:09:48 battery user experience leads turn
  • 00:09:50 eyesore stall which you want so grouping
  • 00:09:53 elements with form group is not required
  • 00:09:55 but something you can do if you want to
  • 00:09:57 separate the different well groups of
  • 00:10:00 form inputs a bit more from each other
  • 00:10:03 so this is a nice basic way of styling
  • 00:10:07 forms now before we move on to
  • 00:10:09 validation styles so to show errors and
  • 00:10:12 so on or buttons let me also show you a
  • 00:10:15 different way of styling this right now
  • 00:10:17 we get everything structured beneath
  • 00:10:20 each other and often that is the look
  • 00:10:22 you want but let's say we now also add
  • 00:10:25 two new groups here at the top of the
  • 00:10:28 form maybe a group for our first name
  • 00:10:33 and a group for our last name so I
  • 00:10:40 simply changed everything to first and
  • 00:10:42 last name if we go back we got two new
  • 00:10:44 fields nothing wrong with these but
  • 00:10:47 maybe you want to position them next to
  • 00:10:49 each other and how would you do that
  • 00:10:51 well you can achieve this with the help
  • 00:10:53 of the bootstrap grid you already learn
  • 00:10:56 about what you can of course do you can
  • 00:10:58 go into your phone and now I will remove
  • 00:11:01 that inline style you can go into your
  • 00:11:03 form and in there let's add a normal row
  • 00:11:07 you can also add in a container but as I
  • 00:11:10 said in the grid video the container
  • 00:11:12 class is actually not required so we can
  • 00:11:15 just add a row here and in that row we
  • 00:11:18 could add a column and in that column we
  • 00:11:21 could add our first form group and then
  • 00:11:24 we add another column next to it where
  • 00:11:26 we add our second form group now with
  • 00:11:30 that if we just quickly restructure this
  • 00:11:34 code if we now reload we got full screen
  • 00:11:37 with again because I removed that inline
  • 00:11:40 style that restricted the width but you
  • 00:11:42 also see that the first two elements are
  • 00:11:44 now in a
  • 00:11:46 next to each other and we still have
  • 00:11:48 that nice margin to the bottom so to the
  • 00:11:50 other element because that still is in
  • 00:11:52 its form group as our elements in the
  • 00:11:55 row here art and with that we're now
  • 00:11:57 taking advantage of the grid for more
  • 00:12:00 advanced form layouts and that is
  • 00:12:02 something you absolutely have to keep in
  • 00:12:04 mind the grid is perfectly fine and
  • 00:12:07 intended to be used in conjunction with
  • 00:12:10 forms if you got any form which should
  • 00:12:13 be more than just element after element
  • 00:12:16 after element use the grid as you see it
  • 00:12:19 here create columns and position them
  • 00:12:21 next to each other and of course we can
  • 00:12:24 now again restrict it a bit so let's add
  • 00:12:26 another inline style to the form or
  • 00:12:29 attach a CSS class in general and in
  • 00:12:32 there or since we have a CSS file we
  • 00:12:35 right why don't we use that so let's
  • 00:12:36 maybe create a main foreign class here
  • 00:12:39 and let's give this a width of let's say
  • 00:12:45 450 pixels and a margin of auto to
  • 00:12:49 Center it and let's then use this main
  • 00:12:53 form CSS class on our form element here
  • 00:12:57 so that's a custom form class now and
  • 00:13:00 now if we reload that page its centered
  • 00:13:03 again but now we got the first two
  • 00:13:06 elements still sitting next to each
  • 00:13:08 other due to our grid and of course you
  • 00:13:10 can use all the great features here you
  • 00:13:12 can use the responsive grid classes to
  • 00:13:15 only put elements next to each other on
  • 00:13:17 bigger screens and put them beneath each
  • 00:13:20 other on smaller screens all the fun
  • 00:13:22 stuff you learned in the grid video and
  • 00:13:24 in the official grid Docs you can use it
  • 00:13:27 here so using the grid in conjunction
  • 00:13:30 with forms definitely something you have
  • 00:13:32 to be aware of and as you see you can
  • 00:13:34 even mix it here I'm using a grid row
  • 00:13:36 for the first two elements and
  • 00:13:38 thereafter for the our elements I'm not
  • 00:13:40 using a grid we could do that we could
  • 00:13:43 use rows and columns stairs hue but we
  • 00:13:45 can also not do it because we don't
  • 00:13:47 really need a grid down there so you're
  • 00:13:49 really flexible when it comes to this
  • 00:13:50 and that is something you should keep in
  • 00:13:52 mind so that's the grid used in a form
  • 00:13:55 let's fast forward to validation now
  • 00:13:59 so let's assume we can submit our form
  • 00:14:02 and of course our form then can be valid
  • 00:14:05 or invalid and bootstrap offers us a
  • 00:14:09 couple of ways of signaling this to the
  • 00:14:13 user so how does it work
  • 00:14:16 first of all boot strip offers a couple
  • 00:14:18 of helper classes which we can manually
  • 00:14:21 add to our elements to our form elements
  • 00:14:25 to change the appearance off the inputs
  • 00:14:28 for example let me show you what I mean
  • 00:14:30 what we can do is we can go to an input
  • 00:14:32 let's say – the first name let's say we
  • 00:14:34 validated it on the server so the form
  • 00:14:37 was submitted and on the server we found
  • 00:14:39 out that it's invalid that the first
  • 00:14:41 name is invalid now what we typically do
  • 00:14:44 is we send back the page from the server
  • 00:14:46 and we add CSS classes to the inputs
  • 00:14:50 which were incorrect to signal well that
  • 00:14:52 they were incorrect and to give the user
  • 00:14:54 some UI help in filling the form out
  • 00:14:57 correctly so what we do is we go to that
  • 00:15:00 input which we want to mark is invalid
  • 00:15:03 where we have the form control class and
  • 00:15:04 we can add D is – in valid class to it
  • 00:15:10 by the way
  • 00:15:10 there also is a valid class in case you
  • 00:15:13 want to mark it as such to give a clear
  • 00:15:14 feedback that this input was valid and
  • 00:15:17 doesn't need to be changed so we added
  • 00:15:19 is invalid here if we now reload you see
  • 00:15:23 it has a red border this is added by
  • 00:15:26 bootstrap automatically and it has a red
  • 00:15:28 outline – if we click on it
  • 00:15:30 so this is added by bootstrap and this
  • 00:15:32 well makes it clearer that this is
  • 00:15:34 invalid well maybe we also want to add
  • 00:15:37 some help text and we can add a div here
  • 00:15:39 below the element where we say looks
  • 00:15:42 good now if we save this and we go back
  • 00:15:48 we reload we got this black text here
  • 00:15:51 nice and we would render this
  • 00:15:53 conditionally on the server to make sure
  • 00:15:55 it's only there when the form is
  • 00:15:57 actually invalid but to also give this a
  • 00:16:00 red text color we all set a class to
  • 00:16:02 that and that would be invalid –
  • 00:16:05 feedback if we do this and we reload now
  • 00:16:09 it has a slightly different style and
  • 00:16:12 looks nicer as some additional info
  • 00:16:15 added to the input by the way you can
  • 00:16:18 always add a little help text let's say
  • 00:16:21 below the last name by adding a div or a
  • 00:16:27 small element actually below an input
  • 00:16:30 with your help text like this should be
  • 00:16:33 your last name in case it wasn't clear
  • 00:16:35 by the label already and on that element
  • 00:16:39 you add a class which is foreign – text
  • 00:16:42 and if you saved ed now you've got this
  • 00:16:45 tiny text below the element – now unlike
  • 00:16:48 the error text this has to be a small
  • 00:16:50 element here the error text can be a div
  • 00:16:53 that's important you can also add text –
  • 00:16:56 muted to our help text here and if I now
  • 00:17:00 reload watch this text here closely it
  • 00:17:03 got grey
  • 00:17:05 it's a lit it's not black right now it's
  • 00:17:07 a little bit more grayish to kind of put
  • 00:17:10 it a little bit more in the background
  • 00:17:12 you could say so that the user can still
  • 00:17:14 see it but it doesn't immediately draw
  • 00:17:16 attention still error text or the
  • 00:17:20 invalid feedback is something different
  • 00:17:22 this should only be displayed if your
  • 00:17:24 input is invalid and you also get valid
  • 00:17:27 feedback in case you want to show
  • 00:17:29 something like this now here it won't
  • 00:17:31 show up across T and what is not valid
  • 00:17:33 but if we add is valid here then we
  • 00:17:36 actually got the green style and the
  • 00:17:38 green background and that all shows you
  • 00:17:41 something else which is important
  • 00:17:43 the invalid text and the same is true
  • 00:17:46 for the valid text only shows up if the
  • 00:17:49 input element prior to it has D is valid
  • 00:17:54 for develop text or D is invalid for the
  • 00:17:57 invalid feedback class so only if we
  • 00:18:01 have is valid here the valid feedback
  • 00:18:04 shows up and only if we got is invalid
  • 00:18:07 here
  • 00:18:08 the invalid feedback will show up
  • 00:18:10 otherwise this won't be displayed so you
  • 00:18:13 still should render it on the server
  • 00:18:15 side only when needed but bootstrap also
  • 00:18:18 only will display it if it's really
  • 00:18:20 there so that was a lot to digest but in
  • 00:18:23 the end you got these classes and
  • 00:18:25 features so
  • 00:18:26 you can really provide the best possible
  • 00:18:28 user feedback
  • 00:18:29 by adjusting the right classes and by
  • 00:18:32 taking advantage of boots trip only
  • 00:18:34 showing the text which makes sense for
  • 00:18:37 the given input so this is how you can
  • 00:18:40 add your own validation classes
  • 00:18:42 bootstrap also is capable of taking
  • 00:18:46 advantage of automatic validation on the
  • 00:18:50 front-end now what do I mean with that
  • 00:18:52 here we're assigning classes manually
  • 00:18:55 and we would do this either through
  • 00:18:57 JavaScript or on the server-side by ID
  • 00:19:01 or wire the help of a templating engine
  • 00:19:03 probably now you can also take advantage
  • 00:19:06 of JavaScript to use the validation API
  • 00:19:11 modern browsers offered where the
  • 00:19:15 validity of the form is handled in the
  • 00:19:17 background by the browser and bootstrap
  • 00:19:20 can check that validity and
  • 00:19:22 automatically add the right classes so
  • 00:19:25 to say or the right styles not even the
  • 00:19:27 classes the right styles based on the
  • 00:19:30 valid or invalid pseudo selectors which
  • 00:19:34 are offered by CSS now this is a feature
  • 00:19:36 which might not be supported in all
  • 00:19:38 browsers and you can read more about it
  • 00:19:40 in the official validation Docs but here
  • 00:19:43 is how it would work to take advantage
  • 00:19:46 of this we go to our overall forum and
  • 00:19:48 there we need to add the needs
  • 00:19:51 validation class this signals to
  • 00:19:55 bootstrap that this is a form which
  • 00:19:57 should be validated and styled
  • 00:20:00 appropriately automatically so to say we
  • 00:20:04 can still set up our invalid feedback
  • 00:20:06 and our valid feedback and here I will
  • 00:20:08 actually leave my custom lis added
  • 00:20:11 classes but let's go to username and
  • 00:20:14 there below that input let's quickly add
  • 00:20:18 our or a death here where I say invalid
  • 00:20:23 feedback please enter a valid user name
  • 00:20:27 and maybe you want to be more precise
  • 00:20:29 and that in reality but here let's go
  • 00:20:31 with that please enter a valid user name
  • 00:20:34 if I save this and reload we don't see
  • 00:20:37 the text below the user name because
  • 00:20:38 it's not treated as
  • 00:20:40 invalid now we could show it by adding
  • 00:20:42 that is invalid class you learn about if
  • 00:20:46 we now reload you see both the style
  • 00:20:48 changed and the text appeared but we
  • 00:20:50 want to do that with automatic
  • 00:20:52 validation now for that we first of all
  • 00:20:55 need some event that triggers the
  • 00:20:58 browser built-in validation and for that
  • 00:21:01 we need a button so let's add a button
  • 00:21:04 to our forum below the last if I'll add
  • 00:21:07 a button where I say submit and we shall
  • 00:21:09 set to type equals submit we'll work on
  • 00:21:12 the styling of the button soon for now
  • 00:21:14 let's make sure we have one if I click
  • 00:21:16 Submit it just sends the page to the
  • 00:21:19 server and nothing else happens and what
  • 00:21:21 I wanted you here is I want to validate
  • 00:21:23 the user input on the client as you do
  • 00:21:26 it with many JavaScript solutions like
  • 00:21:28 angular react and so on and then send
  • 00:21:31 the request behind the scenes if it is
  • 00:21:33 valid now we won't send a request here
  • 00:21:35 but I want to do the validation and you
  • 00:21:38 could take advantage of any built-in
  • 00:21:40 validation methods the framework of your
  • 00:21:42 choice offers you but you can also do it
  • 00:21:45 manually now for dad we need to add some
  • 00:21:48 JavaScript code so at the very bottom
  • 00:21:50 here I'll add some script code and you
  • 00:21:52 could outsource this into a separate
  • 00:21:54 file of course I'll write it in line and
  • 00:21:56 there I will get access to my form here
  • 00:22:00 by using the document query selector
  • 00:22:03 method and access my form element by its
  • 00:22:06 tag or maybe a better way is to select
  • 00:22:09 by the needs validation class and you
  • 00:22:12 could use query selector all in case
  • 00:22:14 you've got multiple elements with that
  • 00:22:16 class you need to loop through them
  • 00:22:18 thereafter though here we don't need to
  • 00:22:20 loop through them because we're only
  • 00:22:21 selecting one the first element that has
  • 00:22:23 this class and now in there we can add
  • 00:22:27 an event listener so add event listener
  • 00:22:29 for the submit event and then provide a
  • 00:22:33 function that should be executed when
  • 00:22:35 this event occurs will receive the event
  • 00:22:38 object that's passed in automatically by
  • 00:22:40 the browser and in there we can now
  • 00:22:43 check if our form is valid we do this by
  • 00:22:48 calling check validity a built-in method
  • 00:22:52 to offer by the browser and
  • 00:22:54 that is false then we know that the form
  • 00:22:57 is invalid and here we can then prevent
  • 00:23:03 a default so that no request is sent and
  • 00:23:05 we can stop the propagation so this
  • 00:23:08 would even work with approaches where
  • 00:23:10 you're not sending the form data with an
  • 00:23:12 ajax request but you want to have a
  • 00:23:14 normal form submission but only if it's
  • 00:23:16 valid so here we're stopping this normal
  • 00:23:18 form submission if it's invalid and
  • 00:23:21 we'll also set a form by a class by
  • 00:23:26 accessing the class list of the form and
  • 00:23:27 adding the voss validated class but
  • 00:23:31 that's an additional class you need to
  • 00:23:33 add so this would be added next to needs
  • 00:23:37 validation and this will then make sure
  • 00:23:40 that bootstrap assigns the right styles
  • 00:23:42 to the elements to the inputs inside of
  • 00:23:46 the form that are invalid
  • 00:23:48 now how is bootstrap we're not boots up
  • 00:23:52 the browser determining whether
  • 00:23:54 something is invalid or not you need to
  • 00:23:57 use some built-in attributes so for our
  • 00:24:00 user name for example which is a text
  • 00:24:02 input we can add the required attribute
  • 00:24:04 to tell the browser that this input is
  • 00:24:07 only valid if it's not empty
  • 00:24:09 because it's required and there are
  • 00:24:12 other browser defaults like max length
  • 00:24:14 and so on but here I'll just go with
  • 00:24:17 required now if I reload got the same
  • 00:24:21 look as before please note that our
  • 00:24:23 default or manually added classes are
  • 00:24:25 still doing their job but if I hit
  • 00:24:28 submit with the username being empty we
  • 00:24:31 actually get that default hint by the
  • 00:24:35 browser now that's not bootstrap doing
  • 00:24:38 its job that's the browser and I don't
  • 00:24:40 want that so we first of all need to
  • 00:24:42 disable this to make sure that our
  • 00:24:44 JavaScript code can kick in because this
  • 00:24:47 will actually prevent the submission
  • 00:24:49 anyways to disable the browser default
  • 00:24:52 here we need to go to the form element
  • 00:24:54 again and add the no validate attribute
  • 00:24:57 this will disable the browser default
  • 00:24:59 check so that our JavaScript code runs
  • 00:25:02 and we can do our manual check and then
  • 00:25:05 let bootstrap assign the classes
  • 00:25:07 to reload the page again and now if you
  • 00:25:10 submit you see you to us adding needs
  • 00:25:14 validation to the form bootstrap
  • 00:25:17 automatically sets some styles for the
  • 00:25:19 username which it identifies as invalid
  • 00:25:24 correctly and D valid starts to all the
  • 00:25:27 other inputs including the checkbox and
  • 00:25:29 if we inspect the invalid element or
  • 00:25:33 also develop ones actually if we inspect
  • 00:25:36 them we can see on the right that the
  • 00:25:41 style getting applied is using the
  • 00:25:43 invalid pseudo selector which is
  • 00:25:45 available because of the browser
  • 00:25:47 built-in validation we're taking
  • 00:25:49 advantage of so that is an alternative
  • 00:25:52 to manually adding or not adding D is
  • 00:25:55 invalid or is valid classes as I showed
  • 00:25:58 you as a first possible erm approach
  • 00:26:01 when doing this manually you don't need
  • 00:26:03 to add needs validation if you wanna
  • 00:26:07 take advantage of the browser built-in
  • 00:26:09 validation mechanism triggered via
  • 00:26:11 JavaScript here then you need to add was
  • 00:26:15 validated once you're done and prior to
  • 00:26:18 that you need to add needs validation in
  • 00:26:21 this case bootstrap will then take the
  • 00:26:23 results of the browser built-in
  • 00:26:25 validation and style your elements as
  • 00:26:27 needed so this is how you can validate
  • 00:26:32 bootstrap forms and as always check out
  • 00:26:35 the official Docs to learn more about
  • 00:26:37 that now let's finish this video but
  • 00:26:40 also styling our button styling buttons
  • 00:26:43 is super easy and as always link to the
  • 00:26:46 official Docs can be found below the
  • 00:26:48 video you style a button like our submit
  • 00:26:51 button here by adding a class and the
  • 00:26:53 class is the button class but then also
  • 00:26:56 an additional class which doesn't just
  • 00:26:58 define some defaults like border-radius
  • 00:27:02 but also a specific background color and
  • 00:27:04 there you got a couple of available
  • 00:27:07 things like primary which takes your
  • 00:27:09 primary theme if I save this and reload
  • 00:27:13 then we see the button s this look
  • 00:27:15 because the primary theme color is blue
  • 00:27:17 here secondary would be a grey and would
  • 00:27:20 also be available we
  • 00:27:21 got success danger warning info
  • 00:27:25 basically the classes you already know
  • 00:27:27 from the alert video success for example
  • 00:27:30 would turn this green these are the
  • 00:27:33 default classes we can add now sometimes
  • 00:27:35 you also want to have kind of an
  • 00:27:37 inverted button where you only have a
  • 00:27:39 border but a transparent background for
  • 00:27:42 this you can simply add an outline
  • 00:27:44 between the button and a success part or
  • 00:27:47 the info or whatever color you use so
  • 00:27:50 button outline success added to just
  • 00:27:53 puttan will lead to distil still a
  • 00:27:57 button which has this nice hover effect
  • 00:27:59 but which by default only has a green
  • 00:28:02 text and border and of course that's
  • 00:28:04 available for danger and so on to last
  • 00:28:08 but not least it can be interesting to
  • 00:28:10 also disable a button for this all
  • 00:28:12 switched us back to just priming primary
  • 00:28:15 button now if we add two disabled
  • 00:28:18 attribute to the button which of course
  • 00:28:20 could also add programmatically through
  • 00:28:22 JavaScript then you would also get a
  • 00:28:26 nice disabled style by default which
  • 00:28:28 clearly indicates that this button can't
  • 00:28:30 be clicked and only if disabled is
  • 00:28:33 removed it'll look like a clickable
  • 00:28:35 button again so this is the last thing
  • 00:28:39 you should know this is another way of
  • 00:28:41 styling the buttons or taking advantage
  • 00:28:43 of in directly applied styling and with
  • 00:28:47 that you got all the knowledge you need
  • 00:28:49 to build beautiful and flexible forms
  • 00:28:52 with the help of bootstrap you know how
  • 00:28:54 to add form elements and stall them
  • 00:28:56 correctly how to structure them with
  • 00:28:58 form groups how to structure them even
  • 00:29:01 more and create more advanced layouts
  • 00:29:03 with the form or the normal grid inside
  • 00:29:07 the forum how to validate forms either
  • 00:29:09 manually or automatically and how to
  • 00:29:12 style buttons I hope you liked the video
  • 00:29:15 and I'll see you again in the next
  • 00:29:17 videos bye