Now for the moment,
let's stay in the Bootstrap world.
And let's say we want to add a forum. And again,
we don't feel like writing our own forum styles,
but instead we'll utilize Bootstraps styles.
Now for that here,
I'm in the forums area of the documentation,
clicked on overview and scrolled down a bit.
And here we see an example for a forum.
Now it should be needless to say that you can dive
into all these sub pages and learn way more about forums,
how to style them, how to configure them
and which different forum elements you have here.
And especially for form elements using third-party packages
like Bootstrap can be very helpful
because whilst styling input fields
is relatively straight forward,
styling radio buttons and check boxes can be a real pain
in web development and therefore
having a third party package that does that for you
can definitely be worth a closer look.
Here however, I'll keep it simple.
I'll click on overview
and just use this first basic example,
copy this forum and go back to my HTML file
to then add a new section below carousel section
and add this forum.
And here I want to have a dummy forum that allows a user
to sign up for a newsletter even though for the moment
we just add the form, not the backend logic
for actually handling the sign up.
Now for that, I don't need a password field,
just an email field. And hence,
I actually want to remove this div,
which holds the label input combination for the password
so that I'm only left with the email field.
Now here again, we see there are some,
dummy IDs assigned and we can keep them,
but we can also bring our own ones. And for example,
change that here to email in both places where it matters.
We got a little helper text, we could change the ID here.
And of course all changed the text.
And we got the div's checkbox here
where I'll just say, keep me informed.
So I changed the default text and where again, you can,
of course also change ID and so on.
You can also add the name attribute here
and named this stay informed for example,
and add the name here as well.
And named this one email.
By the way, here you'll also see this aria attribute here.
That's an extra attribute for assistive technologies,
which provides more context to those technologies
in this case here saying that
this input gets some more clarification by this div,
which has this ID.
That's just a side note, not too important to us right now.
Just something I want to mention
so that this attribute not confusing.
And with that, if we saved this, of course, unsurprisingly,
we have to as formula on our page again, this is too big.
It's not having the look I want to have.
And therefore for again, this is something we can change.
Here on this sectional, give it an idea,
name it newsletter, dash, sign up.
And then in my own custom CSS code,
as we learned it in this course,
we can of course add some styling,
give this a width or a max-width of 30 REM here, actually.
And then also add a margin of for 4 REM top and bottom
and auto left and right.
And with that, now we got this form here
and these are just some examples
of what you can do with Bootstrap.
There is more you can do,
and there is one more thing I will do with Bootstrap,
but it is now hopefully clear how you can generally use it.
That it's mostly about those classes
that you can add on certain elements
to achieve certain looks and that the official documentation
is the place to go to learn more about it,
but that you can then also mix that with your own CSS code
to still ensure you get exactly the behavior
you need in your project.
Now, I got one last task for you.
I want you to make this Navbar fixed so that if we scroll,
it actually stays on top of the page.
It's not scrolling away,
but instead it overlaps the content we're scrolling to.
Definitely try changing the Navbar to behave like this
on your own. In the next lecture, we'll do this together.