All right, everybody, let's keep going.
What else can we do to this page to make it look more like this one?
Well, I want the text uppercase here, you can see over here that this is all in capitals.
This is not I mean, I could change this if I want to capital letters.
I can also add a style.
To make everything uppercase, but there's also another useful one that comes with bootstrap, I can
actually add a class.
And use a class and bootstrap called text dash uppercase, if I save this and refresh, look at that.
Everything is uppercase.
That's awesome.
Now, what about the bun?
Let's add some bootstrap styling to the buns.
Again, let's say you don't know how to add bootstrap styles or you don't know the classes.
We can always go to the documentation and search buttons.
There we go, we see that we have some Bunin classes that we can use.
In our case, let's use this one, one primary.
So I'm going to copy.
Come back and with this button, let's give it a class of button primary if I save and refresh.
Hey, look at that, we have a boot strap on already, that's really, really cool.
But you know what?
I want to have a different color, right?
I want the bun to look more like this, something nicer so we can add our own custom success.
Let's call this class button excel for extra large button.
And this isn't a bootstrap class.
If I save this and refresh, nothing will happen.
Instead, we can create this button, excel right here in our own stylesheet.
So let's say button or dot button.
Excel.
Is going to be let's make this a little bit bigger, is going to have padding of, let's say one RTM
on the sides and two RTM top bottom.
If I refresh this, that's better.
That's a lot bigger.
So we have an extra large, but now we can add sizes or we can add different properties here.
But since we named this class Button Excel, we should just leave it the way it's describing things,
that is to make the button larger.
So instead, let's just modify the existing classes that we have.
Which is the bun and bun primary, so if I go back here.
We can say that the button class.
We'll have a font wait.
Of, let's say, 700 and a border radius, that is to make the edges more circular and we'll give it
three hundred pixels if I say this and refresh.
That's a lot better.
I like that.
And I want this capitalized as well.
And I could use the.
Text Apricus class, as we've seen before, or I can just in here say text transform.
And just say upper case, so just use access class five refresh, hmm, that looks really, really nice.
Now, let's keep going here.
Let's add another.
Class here, which is Budden primary, so we're just adding on to the bootstrap styles that we have
and we'll just give it a background color of what should we do?
Well, if we go back to this page again, we inspect right here by hovering and we click.
We see over here as we scroll down what color we're using over here, let's see.
Where is the color?
Let's see, let's see.
Oh, there it is right here.
So I'm going to copy.
The caller added here, if I hit save and refresh and look at that, that's really, really nice.
But one thing you'll notice is that the border over here, if we scroll or zoom in, you see that the
border has a bit of blue and that's default for.
The bootstrap theme.
So instead, let's add a border as well, so call it border color and give it the same color.
If I refresh, that's much better.
Although now we're hovering and it's turning blue, that's OK, but I don't like it, let's make it
hover.
So it's still orange, but maybe a little bit darker.
Orange.
So what can we do here?
Again, we've seen this before, we can just say button primary.
Colin Hover.
And in here, we can just add background.
Color to be something a little bit different than this, in this case, we're going to use a color that
is easy.
4B zero eight, don't worry, I didn't memorize this.
This is just something that well, I knew that I used when I made this website first.
So don't worry, you never need to memorize hex colors.
Next, we'll do the same for the border color.
So once again, we'll make the border color the same as we have here.
I also want to increase the border with actually to just make it a little bit bigger when we hover over
it, so let's just give it an extra four pixels and let's say if I refresh and hover and look at that,
that's awesome.
So that's looking really, really nice, so we have the button, it's looking pretty good, we have
our header that's looking pretty great as well.
The other thing I want to add is this little line here just to give it a little extra flair to the page
and we can use something called an H r here or a horizontal line.
So the H r tag, which we can just put in between.
So let's say HRR.
Is a horizontal line.
So if I refresh here.
I don't know if you can see it well, because it's dark, but let's add some styling to it.
So let's say in here that we want the cars on our page to have a border.
Of the orange that we've had before, which is this one over here, it's all the same border color is
this.
If I save and refreshed.
All right, look at that, there's our little line, it's a little thin, though, so let's add a bit
of sizing.
So say border.
With and give it, let's say, three pixels, and if I refresh, all right, that's getting bigger.
That's good.
But I don't want this to be the entire page.
I only want it a little bit, just like we see it here.
So we have a property here that we can use called Max with which, as the name suggests, tells us exactly
what's the maximum width of this thing.
In our case, let's say sixty five pixels.
So if I say this and refresh, that's much better.
All right, we're making progress here, but there's an issue right right now, we have the content
that we want, but it's all all over the place.
It's kind of ugly, isn't it?
We want everything centered maybe around this laptop over here.
And this is where bootstrap really shines.
So let's figure that out in the next video.