So did you succeed?
Let's try doing this together.
And of course, to find out how that works,
we should go into the Documentation
and there into the Navbar documentation.
And if we do go there;
if we do go to the Navbar navigation,
there we should be able to learn
how we can make it fixed, maybe under Placement.
And indeed, here we learn how we can place it
such that it's fixed to the top.
We see that this is how this example code looks like.
And if we compare this to our Navbar,
we have, of course, more content inside of it
but on the nav element:
We have navbar, navbar-expand-lg,
navbar-light, and bg-light.
And in the end, that's the same as here.
But here we also have fixed-top,
and we don't have navbar-expand-lg.
But let's start with fixed-top
because that sounds like it would be helpful.
Copy that and simply add that class to our navbar.
And if we do this and they go back,
it's still looking good,
but now indeed it is fixed;
it's not scrolling away,
but instead it's overlapping our content as you can tell.
And that's, of course, very easy, very easy to do,
and it shows us how we generally work with Bootstrap.
Now to conclude the Bootstrap part,
I wanna show you the Scrollspy feature which is also
actually a built-in feature Bootstrap ships with.
Here we see that we've got this Scrollspy behavior,
and we see how it generally behaves;
that it's all about changing what's highlighted
in some navigation as we scroll through some content.
Now, on this example page,
I actually don't wanna add it
because we don't really need it here,
but of course, feel free to add it if you want to.
In your official documentation,
you'll see examples on how it works
and how you could add it to your content.
And in general, there are many features you can add,
and Bootstrap is a very useful package;
it's very popular for a reason after all.
The big question that remains, though, is
if you should now always use Bootstrap?
I did mention that you, of course, can combine
it with your own code,
and I also did compare third-party packages
and custom code before, and of course,
the advantages and disadvantages I mentioned here do apply.
Now, when it comes to CSS packages
like Bootstrap specifically,
it is important to be aware of one specific restriction
or disadvantage you might have
which does not apply that much
when we talk about JavaScript packages
as you will see later.
With Bootstrap or with any CSS package you include,
you, of course, commit to a certain look of your page.
You can choose between different variants
of alerts or of buttons.
So you can choose between different buttons,
and you can also customize Bootstrap.
If you dive deeper here into the Documentation,
you can learn and you do learn
how you can customize Bootstrap
and even overwrite or change the general look.
But still, you always will have a certain look,
a certain HTML structure that is expected,
which you kind of commit to when using
such a third-party package.
And therefore, packages like Bootstrap,
CSS packages that give you certain looks
or certain stylings are very useful
for building a site quickly
since you have to write way less CSS code;
but for real sites, sites that you might be building
for clients or for your own business,
you might not always get the behavior
or the look you want.
Sometimes you do, and then they are great,
but sometimes you really wanna bring
your own CSS code there
so that you do have full control over every detail.
So that's just something to be aware of that
you might not wanna commit to a certain look,
and behavior, and a certain HTML structure,
and a limited set of components which you have.
And therefore, you might wanna go
for a custom CSS approach right from the start.
It is something that comes down to preference
and the exact project you're working on.
For a lot of projects,
especially for a lot of demos or examples,
Bootstrap can be a great choice
since it does save you a lot of time.