1 00:00:02,130 --> 00:00:02,963 Now for the moment, 2 00:00:02,963 --> 00:00:04,860 let's stay in the Bootstrap world. 3 00:00:04,860 --> 00:00:07,600 And let's say we want to add a forum. And again, 4 00:00:07,600 --> 00:00:10,570 we don't feel like writing our own forum styles, 5 00:00:10,570 --> 00:00:13,423 but instead we'll utilize Bootstraps styles. 6 00:00:14,340 --> 00:00:15,173 Now for that here, 7 00:00:15,173 --> 00:00:17,310 I'm in the forums area of the documentation, 8 00:00:17,310 --> 00:00:19,590 clicked on overview and scrolled down a bit. 9 00:00:19,590 --> 00:00:22,530 And here we see an example for a forum. 10 00:00:22,530 --> 00:00:25,170 Now it should be needless to say that you can dive 11 00:00:25,170 --> 00:00:29,120 into all these sub pages and learn way more about forums, 12 00:00:29,120 --> 00:00:31,360 how to style them, how to configure them 13 00:00:31,360 --> 00:00:34,780 and which different forum elements you have here. 14 00:00:34,780 --> 00:00:38,200 And especially for form elements using third-party packages 15 00:00:38,200 --> 00:00:40,540 like Bootstrap can be very helpful 16 00:00:40,540 --> 00:00:43,230 because whilst styling input fields 17 00:00:43,230 --> 00:00:45,770 is relatively straight forward, 18 00:00:45,770 --> 00:00:49,630 styling radio buttons and check boxes can be a real pain 19 00:00:49,630 --> 00:00:51,280 in web development and therefore 20 00:00:51,280 --> 00:00:54,460 having a third party package that does that for you 21 00:00:54,460 --> 00:00:56,663 can definitely be worth a closer look. 22 00:00:57,770 --> 00:00:59,650 Here however, I'll keep it simple. 23 00:00:59,650 --> 00:01:01,360 I'll click on overview 24 00:01:01,360 --> 00:01:04,480 and just use this first basic example, 25 00:01:04,480 --> 00:01:08,322 copy this forum and go back to my HTML file 26 00:01:08,322 --> 00:01:12,530 to then add a new section below carousel section 27 00:01:12,530 --> 00:01:13,933 and add this forum. 28 00:01:15,310 --> 00:01:19,040 And here I want to have a dummy forum that allows a user 29 00:01:19,040 --> 00:01:22,280 to sign up for a newsletter even though for the moment 30 00:01:22,280 --> 00:01:25,840 we just add the form, not the backend logic 31 00:01:25,840 --> 00:01:27,783 for actually handling the sign up. 32 00:01:29,330 --> 00:01:31,600 Now for that, I don't need a password field, 33 00:01:31,600 --> 00:01:33,840 just an email field. And hence, 34 00:01:33,840 --> 00:01:35,670 I actually want to remove this div, 35 00:01:35,670 --> 00:01:39,755 which holds the label input combination for the password 36 00:01:39,755 --> 00:01:43,683 so that I'm only left with the email field. 37 00:01:44,700 --> 00:01:46,595 Now here again, we see there are some, 38 00:01:46,595 --> 00:01:50,131 dummy IDs assigned and we can keep them, 39 00:01:50,131 --> 00:01:53,380 but we can also bring our own ones. And for example, 40 00:01:53,380 --> 00:01:58,350 change that here to email in both places where it matters. 41 00:01:58,350 --> 00:02:01,400 We got a little helper text, we could change the ID here. 42 00:02:01,400 --> 00:02:03,293 And of course all changed the text. 43 00:02:04,993 --> 00:02:07,220 And we got the div's checkbox here 44 00:02:07,220 --> 00:02:10,919 where I'll just say, keep me informed. 45 00:02:10,919 --> 00:02:14,950 So I changed the default text and where again, you can, 46 00:02:14,950 --> 00:02:18,160 of course also change ID and so on. 47 00:02:18,160 --> 00:02:20,690 You can also add the name attribute here 48 00:02:22,290 --> 00:02:26,080 and named this stay informed for example, 49 00:02:26,080 --> 00:02:28,383 and add the name here as well. 50 00:02:29,490 --> 00:02:31,433 And named this one email. 51 00:02:32,310 --> 00:02:37,180 By the way, here you'll also see this aria attribute here. 52 00:02:37,180 --> 00:02:40,910 That's an extra attribute for assistive technologies, 53 00:02:40,910 --> 00:02:44,364 which provides more context to those technologies 54 00:02:44,364 --> 00:02:47,570 in this case here saying that 55 00:02:47,570 --> 00:02:50,940 this input gets some more clarification by this div, 56 00:02:50,940 --> 00:02:52,940 which has this ID. 57 00:02:52,940 --> 00:02:56,110 That's just a side note, not too important to us right now. 58 00:02:56,110 --> 00:02:57,720 Just something I want to mention 59 00:02:57,720 --> 00:03:00,383 so that this attribute not confusing. 60 00:03:01,760 --> 00:03:06,530 And with that, if we saved this, of course, unsurprisingly, 61 00:03:06,530 --> 00:03:10,970 we have to as formula on our page again, this is too big. 62 00:03:10,970 --> 00:03:13,450 It's not having the look I want to have. 63 00:03:13,450 --> 00:03:16,790 And therefore for again, this is something we can change. 64 00:03:16,790 --> 00:03:19,100 Here on this sectional, give it an idea, 65 00:03:19,100 --> 00:03:22,913 name it newsletter, dash, sign up. 66 00:03:23,930 --> 00:03:26,900 And then in my own custom CSS code, 67 00:03:26,900 --> 00:03:28,890 as we learned it in this course, 68 00:03:28,890 --> 00:03:31,140 we can of course add some styling, 69 00:03:31,140 --> 00:03:36,140 give this a width or a max-width of 30 REM here, actually. 70 00:03:37,750 --> 00:03:42,750 And then also add a margin of for 4 REM top and bottom 71 00:03:43,750 --> 00:03:45,433 and auto left and right. 72 00:03:47,430 --> 00:03:50,190 And with that, now we got this form here 73 00:03:51,170 --> 00:03:52,720 and these are just some examples 74 00:03:52,720 --> 00:03:54,950 of what you can do with Bootstrap. 75 00:03:54,950 --> 00:03:56,390 There is more you can do, 76 00:03:56,390 --> 00:03:59,760 and there is one more thing I will do with Bootstrap, 77 00:03:59,760 --> 00:04:03,660 but it is now hopefully clear how you can generally use it. 78 00:04:03,660 --> 00:04:05,970 That it's mostly about those classes 79 00:04:05,970 --> 00:04:07,730 that you can add on certain elements 80 00:04:07,730 --> 00:04:11,421 to achieve certain looks and that the official documentation 81 00:04:11,421 --> 00:04:14,600 is the place to go to learn more about it, 82 00:04:14,600 --> 00:04:18,559 but that you can then also mix that with your own CSS code 83 00:04:18,559 --> 00:04:21,550 to still ensure you get exactly the behavior 84 00:04:21,550 --> 00:04:23,463 you need in your project. 85 00:04:24,910 --> 00:04:28,600 Now, I got one last task for you. 86 00:04:28,600 --> 00:04:33,600 I want you to make this Navbar fixed so that if we scroll, 87 00:04:33,980 --> 00:04:36,800 it actually stays on top of the page. 88 00:04:36,800 --> 00:04:38,270 It's not scrolling away, 89 00:04:38,270 --> 00:04:42,380 but instead it overlaps the content we're scrolling to. 90 00:04:42,380 --> 00:04:45,990 Definitely try changing the Navbar to behave like this 91 00:04:45,990 --> 00:04:49,493 on your own. In the next lecture, we'll do this together.