Hello, in this video, I am going to cover the nav, both boys and that ball we first code on the floor.
So another is one of these that you would get the top of your website.
It may span the entire with the website.
It may not.
It depends on its position.
You will make use of it similar to this which spans the entirety.
So not Boston for navigation bar and keyboard.
Guess so.
If we go to our code, if it was to put it within the container itself, it will be limited by the containers
width and with a regular container class on a big screen like this, you will have empty space on side.
And that even then may be what you want to eBay.
They actually have sort of two nabarlek, but this one here with this full horizontal line.
And then we have, well, just this part here.
So this is also kind of like a novel, as is this.
So now both are useful to put it outside.
Here we are, four with one print here is limited by the container contained as fluid as all the way.
But remember, there is some padding on the side and if you want to put it in a column, then you would
actually just demand a column, column spaces that it is spanning and you can do that's totally up to
you.
You may not want to put it at the top of the website, may just be at one little section of the website.
The way you want to do is call a nav tag and this requires a class of Nabal NAV bar to expand that out.
So this means once it hits the large screen large breakpoint, then it expands.
Otherwise it goes more compact and you feel free to experiment with this now.
Bardash dark and bija dash dark as well.
OK, so you can do light as well.
So this now Bardash Dark refers to the actual items in there, like a text, the buttons.
They're going to be there if it's dark, if we use the dark left they're going to be light colored because
they need to show up on the dark background.
And if this is light and they'll be dark colored, they need to show up on the light background, the
feel free to experiment with that.
Plus all will provide a link to the now for link in the description.
I mean, there you can see it, ad images you can see in there.
How do you know we're going to cover quite a lot of it, but you can see how to do also stuff like colour
schemes as well.
Obviously, we're covering this one, right?
Yeah.
OK, so what we ought to know.
Is positive, positive and.
When I put a.
Uh.
Of container dust from the wind, you see one of the rare instances it's alright to have more than one
container because you may not want your content to be in a fluid container.
You may want more like this.
Now, in here, we're going to have all of the contents of the book, will have an eight tag.
And again, you can format this however you want of no dust.
Now, I'm going to have a hatred just for hash so it doesn't actually go anywhere.
But, you know, you can go wherever you want.
And I'm going to put the text now.
People can think of this as the logo or let the text name of your website.
And now we're going to put a button.
I'm going to have a class now that's going to be called bottom.
They told us Torgau equals collapse.
They told us it.
Calls epic novel, this is the novel that it's part of which will be creating just after this bottom
and an area that controls the you just the same of the ideas that we've just put the area and quotes
folks like so
area that's Nable.
You called total navigation.
We all see this.
This is just all the attributes.
And now and here we're going to put a spine and we're going to put a glass of Knuble toggle dash.
So this is.
OK, I am back, so I just had to restart the computer a bunch of things.
This one not doing it, those other ways that are so good in the hood now.
OK, so I was doing the.
But that's all done for the button.
Now you're going to have the sort of main area that can collapse depending on the size of the screen.
This is going to be a day of class
Hilux Nabob Dash and already already.
And the idea will be what we put here.
So this is basically referring to this button is OK, so that's it for this.
Inside of here is where we're going to have a bunch of content.
So we're going to throw on that list and look for a class.
No, that's not them.
And all that sort of auto margin on the right at the bottom will put to a margin bottom.
Does knowledge put it's just, you know, just makes it look a lot more pleasing, aesthetically speaking.
OK, so let's add some items to do that for a list item class and Naved item, and we're going to need
to have a total of four of these and they're going to have different stuff inside.
But with this duplicate, this can have as many as you want.
Just totally up to you.
If you have too many can look a bit too cluttered.
And if some small screen size, it may not look very good.
Better than mine, but other other than how it looks, not a limitation on how many items you can bring
that there isn't a restriction, for example.
OK, so first I'm going to have a class now and I put this on active.
So it's almost like we're on this Web page, this page on the website ARIAD Dash Current and we say
the printing is the page page ralfe the hash and home here.
So that's very common to have some sort of link inside and then have a class link.
It probably only one one that's active.
The only one really is a page, if this is what they're referring to would ever be you would ever be
on the photograph.
And for the text of something like keep it simple now to this one, we're going to make a lot more a
lot more complex, a little bit.
It's going to make this into a dropdown just to show you how you can add other items in.
There was also a class equal now link.
And we need a class of dropdown, Tuggle dropped down dush tongo.
I think we have and we need an I.D. now locked down and we have a role and the role will be Brookton.
And the data does toggle the are you toggling this toggle or dropped down to feel free to check out
my separate video drop downs and all, there's nothing that you can do with that.
So I'm glancing over it for the most part.
It dropped down below quick posts
in here when they actually have the text drop that now when you talk actually have the dropdown itself.
So this is going to be an on all the list and it's going to have a class locked down menu area that's
enabled by now, by dropdown.
Basically what we've put here, we're going to put up there and they're in here.
We need if you just dropped an item through the link, I mean, the next item linking next item was
to.
I class again.
Feel free to check out the dropdown video on the dropdown page for the AP Guide on Bootstrap for more
information.
Obviously, you can organize and put whatever elements you want in there.
This is just a example that I think looks pretty good and demonstrates the feature that I'm trying to
showcase in this video, which is a
case.
So we're going to have in the vault.
And coldness and no action
there.
But a separate story turn each time.
Having clothes, clothing, one is not necessary.
I know a lot of people have asked me, why do I put it in there?
You know, honestly, it's just a habit.
One, if you use something like X amount, which is like X amount of the amount, then in X amount of
the very strict with the tax, all tags have to be close, even if they do not have a corresponding
no separate clothes tag the way list items or less or Dave will spend the most dmg tags do so again
it doesn't break, it is just I think one on the look of it and two I this is a good habit to be in
good clothing.
The type is better.
If you don't need closer than knuckler, the time when you do need to close it, so it's almost like
insurance almost.
OK, so can I have one of these items again?
Is it going to keep the same?
And this puts something
else, something like that.
OK, so now we're going to do it, implement the final item in here and I'll make this one like a disabled
one so you can see you can use know disabled items in there as well.
So depending maybe if there are certain of user or a certain pay, they can't use this particular item,
though.
Now, that name Saboor, that is what makes it so good.
And it has a part time index as negative ones that you can't tap onto it.
An area disabled
and will put disabled.
So this is what it's showing in terms of text.
Now we're going to do is a form for search, but in a lot of research, that's very common to have enough
balls.
Wow.
I certainly would like especially if you own an e-commerce platform or social media platform, they'll
have something like this deduction for the class and input class.
To us, who does control and dash to operate type of search placeholder.
Skoch.
Area you to because
and will put a button here as well, which is what you would essentially click on to search using this
input.
You can always click enter.
Well, you can disable that if you don't want that.
So beating beating this alone does feel free to modify this however you want and put whatever type of
button you want to submit, search, save, and which we are ready to have a look.
OK, so this little button is not showing up properly.
I see what's wrong with.
Because he shouldn't actually be showing up then.
Folsom's.
It along with its bottom.