Hello everyone and welcome back to our bootstrap course.
In the previous lecture we set up the skeleton template for our carousel.
And in this lecture I'm going to be populating the carousel.
So let's go ahead and begin doing that now.
We have so far our indicators set up and those are all done.
What we need to do next is fill in each item.
So what we're going to do is begin with this first item here which is active and inside we're going
to put in just a place holder to be to start.
So it's going to be another div and this time is going to be carousel place holder.
And we're also going to give it the class carousel place holder 1.
And let's go ahead and close that div off immediately going to begin by putting in some place holder
items here.
And these are not bootstrap classes.
These are classes that we are using ourselves in order to style how the council wants to or will look
because if you use the default classes you will get white margins on the left and right and on the top
and bottom.
And so we want to remove those margins because we want to have each one be full screen.
So we're going to show you how we're going to do that.
Let's go ahead and pop open the output.
And as you can see in the output we now have these three little indicators here and those represent
those indicators that we mentioned for the carousel.
So when the user clicks on each one and there will also be arrows that we're gonna add later the user
will go through the carousel let's high the output for now and go to see us as an ECMO.
Now we built these two class names and let's actually go ahead and use them to add some styling.
So down here we're going to set our own custom styling.
This is not bootstrap styling.
It's our own.
So we call dot carousel placeholder.
And in here I'm going to set the width to be 100 percent and the height to be 100 percent as well.
Now when you use percent you are talking about something that is relative to and in order to use percentages.
You must have a parent that has a width and height.
So in our case that's why we set each smell and body to have width and height because this might seem
obvious within hyper you have to actually set it yourself in order to use percentages later on for elements
inside of the body.
So this will be 100 and 100 percent of its current element.
OK.
And you'll see that in action when we look at the output let's also set the background color to black
by default.
And we're going to change that to a different color with each of the carousel items.
But it's useful to set the background color by default so you know if something's gone wrong it's also
useful to set the color to right because although the text color which is what color means you may think
that color means background color but no color means text color you may think that color is obviously
white or color is obviously always black but you want to set your own color.
Typically whenever you're standing elements even if it's obvious in this case the default will be black.
So it's not even obvious we actually must change it to white because you're going to have a background
color and white will look best on that background color.
The last thing we should do is set the background size and we're gonna set this to cover.
That means that the image will cover the whole container but it won't try to fit the entire image inside
of it.
Because that could lead to resizing issues where your image looks really compressed.
And if you were going to use that you would do something like Phil but we're going to use cover instead
it will look the best.
Once you put images inside.
OK.
We also have this careful place holder one.
Let's go ahead and style that next.
Just below that and we're going to have a different place holder for each item because this is going
to use this to add a background color.
So let's add a red color for example such as F seven a sixty five E..
And don't forget that semicolon which you must add at the end of each of the different stylings.
Now this is a hex code which is a way to represent a color.
You can go ahead and click on output and hide everything else.
And we should see soon we'll see are different colors here.
But right now we have to go back to the HMO and add more into this actual div itself.
So right now we have the stylings and so that it's a placeholder.
Next we have to add a container containing our text because right now we just set the background color
but we don't have anything inside.
So the height is still zero because there's nothing inside.
So let's put something inside.
We're gonna put inside some text about product.
This right here is our div.
So actually this must be closed off just there.
This is the place holder image box.
We're gonna use.
This is also where you would put your image.
For example if you wanted to add an image you would just do it down here.
The same image source.
Putting a source just down here and images are self closing which means you don't have to add any kind
of closing tag.
You just write this OK but we're not adding images for now.
So we have a placeholder and all we're gonna do next is ad text.
So open up a new div and call this container container is again a reserved bootstrap class and it will
put everything into a container with some padding.
Let's also add in other div inside and we're gonna call this carousel caption.
This is a bootstrap class that will automatically style this text as a caption.
We're also going to do text left text left means that the text will be aligned to the left.
You can also do text center which we have seen before and text right to align text to the right of the
screen so it will be all aligned to the right or all line to the left.
Using text left in this case and inside of this div with ADD in each one called product one actually
make it each two because typically you don't want to have multiple each ones.
Okay.
And this is a header a header of importance too so it'll be bigger than normal.
However it will not be as big as an each one header one.
Let's open a paragraph and something like your product description here.
If you have an actual product you can fill this in or you can just use this as a template whenever you're
web designing.
It's useful to have templates because you want to minimize as much work as you have to do by having
reuse reuse is extremely helpful because by reusing I mean you can add more complex features instead
of having to begin at the basics all the time which would be extremely time consuming and would mean
less of a fine website.
Let's open another paragraph which will contain another button so remember we made a button previously
by using a paragraph tag and an anchor tag inside and a bootstrap Button class.
We're going to do exactly the same.
So we have a paragraph tag open and add an anchor with a class button and we'll go to say a button large
this is a boot strap class that will make a large button of large size and make it a button primary
which will set its colour to that same blue as we have already.
And we're going to give it a link so we don't have a link right now but we will add more products later
we're going to add product and service descriptions below this but we can add this as a hashtag for
now.
This is just going to lead it to the home page of the website and we can fill in that fill that in later
when we do the optimizing the code and we have to set the rule of this to be a button and go ahead and
close that anchor tag and type in something like learn more.
And so this will be a button containing text learn more.
Let's go ahead and check our output here.
So far we're still not seeing anything so fix that high output.
Okay let's look at what we've done so far.
We've set up a carousel inner carousel item and we have set up several items for use later.
And we have a container with our paragraph tax an hour each two.
OK.
That's all we need for the first item.
Let's go ahead and set the rest of the items and that will allow us to actually get a preview of everything.
So what we're going to do right now we have carousel item.
Let's go ahead and follow the exact same structure to make our next item.
So we're gonna make div class equals carousel placeholder carousel leaseholder too.
So we're using carousel placeholder too because we're gonna use a different color for this place holder.
So previously we had a red item.
It's going to open our CFS and make a different color we can use a blue color for example carousel place
holder too.
It's useful for making a minimalist website to stick with a two color scheme so two colors plus white
which means it will be extremely minimalist and it will be pleasing to the eye because it has that three
color structure.
If you've studied design you'll know that colors in threes like red blue and white.
That's a useful and pleasing to the eye and it is useful to have those kinds of design tricks because
they allow you to design faster bees instead of having to decide what color to choose.
You know that 3 is going to be quite useful.
Okay.
So we can go ahead and hide this yes.
Now that we've set up that place holder going gonna follow the exact same structure that we did for
the first item.
So we're gonna set up a div class of container and we're gonna close that off and inside of the container
we're going to put in our captions so div class carousel caption and we're gonna close that off as well
and inside of the careful caption we're gonna put it in H2 called Product 2.
So this is where the company's product logo is being featured.
And to put in your product description here.
And as you do this multiple times kind of like if you if you ever heard of a code cata those are exercises
that you do over and over again you'll gain muscle memory and this will help you learn the syntax of
code.
Code cutters aren't always the best but they are useful.
If you're starting out with a language.
OK.
So we have your product description now we're gonna add a button again so an anchor.
Class a bootstrap course button.
Again another bootstrap class by and large and we don't have a link to a product yet but we're gonna
be adding more pages with products later so we can leave it as a hashtag for now.
And later we'll fill that in with actual anchor and the role is going to be button again and the text
is going to be learn more.
And we have we closing paragraph tag there.
That is all we need for that careful item.
Let's go ahead and fill in the final carousel item number three is a aesthetically pleasing number in
terms of design.
When you design things in three so that's we're having three carousel items for the exact same structure
to set up a carousel leaseholder carousel please 3.
Now I'm using one based indexing which means I started counting the place holders at 1 for simplicity's
sake.
But remember that JavaScript will count at zero.
OK.
So we have a new custom class here.
So we have to sit there ourselves with open CFS and add our custom colouring here.
To give it a background color.
So far we have red and blue.
We can give it a lighter blue.
For example I just found these colors online.
You can use Google for colors followed by hex code like blue hex code and that will find you some hex
codes for the color you need.
So now we have another background color for that.
She's great.
And let's go ahead and fill in the rest of this final item that we have here using the exact same structure
that we did previously.
And this is its own item.
This place holder is considered its own div.
It's not containing anything except for its background.
And now we can set up the div for the container and we can close that.
And this container is what actually contains the text.
So we're separating the image from the text.
Everything above this container can contain the image and everything in the container will contain the
text.
So when I say div class equals carousel caption text right.
So you'll notice previously we should have aligned it to text center.
Well text enter is a default which is why we didn't put any styling here.
The careful caption because this will be styled text center because it's a carousel item.
But for this careful caption We styled that text right because we had takes left to center.
And now we're having text right.
So our texts sort of jump as the carousel slides through.
And that will give us a nice effect there.
And we can close off that div as well and inside of the cursor caption we're going to put in our each
to which we say product three and we can also put in our description so your product description here
and then we're gonna open up a paragraph tag which will contain our anchor.
So I'm going to say a class is gonna be a button.
It's gonna be large again.
It's gonna be that blue color using one primary.
And we have no link yet.
And we can add the text learn more so as you can see it might be confusing at first but once you've
done a lot of times bootstrap is not so bad after all.
And it saves you a lot of time with designing and making your website responsive.
Let's go ahead and check the output here and we're still not seeing it here so there must be some issue
that we're going to have to fix.
That's OK.
We're gonna learn how to troubleshoot that in the next lecture.
Other than that.
Thank you all for watching.
And so far we have set up our items here for the indicators and we've also set up the back end for containing
all replace holders and we can add images as well as needed for each product.
Well we also have to do next is set up.
The arrows.
So we're gonna be showing our placeholders and setting up the arrows in the next lecture.
Thank you for watching and we will see you there.