Hello everyone and welcome back to our bootstrap course.
In this lecture we're gonna be setting up more rows and columns for each service as well as actually
showing all of the services so previously we were not able to see these services here in the console.
But in order to see that all you have to do is remove this full page here from the div because this
class uses you port height of 100 using 100 V H and it looks like Bean has some issues with using viewport
height because if you put height means the compiler has to calculate the viewport height and if you're
using something like G.S. bean which is an online editor then there can be issues with calculating viewport
height.
However if you're using an Ivy.
So an integrated development environment such as brackets or atom or something then you won't have problems
with viewport height but for Japan you may suggest to go ahead and delete that and now in the output
you will see we have here we've added this gift icon as well as service title the service subtitle in
italics and the description so we'll go ahead and hide e-mail.
This is what it would look like on a web page.
And then if we toggle that this is what it would look like on mobile.
Something like this.
OK.
So what you could do is to decrease this image size when it's on mobile because this is quite huge however
because it's an icon right now.
It looks huge but if it was a product image or a service image then we actually would need it to be
full size because a product would have to take up the whole screen for the user to see what it is.
So going to leave it as the size for now as a placeholder icon and then below we have the title and
this title ice tower sized using Bootstrap classes and description.
So in a previous lecture we challenged you to make the two other pages for two more services and let's
go ahead and do that together now to build out some more pages of our Web site.
So we're going to use the exact same structure as we did for the first feature set for the first service.
We're gonna build our second service.
Now make sure this is outside of this first feature.
So you can add a comment here telling you that this is one feature set and each feature set is for its
own product.
So this is the div containing all of the products all products.
So just outside of the first feature we're going to add a second one.
So to do that we're gonna open up another div and this time it's going to be a div class with the same
bootstrap class of row row means that we can put items in there to be columns in a row.
It's going to be another feature set and we're gonna add the painting immediately as well as another
custom class block.
And the custom class block too and we're going to avoid using full page and just use the default height
which will be 100 percent as we set it in this.
Yes yes it will just be its parent's height if we don't give it a height because just has been doesn't
seem to like the viewport height if you're using an idea even you can use viewport height.
So now we have our next feature right set up here.
Let's go ahead and set up block two as our custom class because this is not a bootstrap class.
This is one of our own classes so you can scroll down here and RCA says We have block one to be a background
color of a blue ish and you can add block to to be a background color using one of the colors you've
been using previously.
So background color we can go back up here and use one of these such as this light blue and copy that
and paste it over here.
That way we're using similar colors in our web page.
You want to avoid using many web Pete when many colors on your web page typically two colors two main
colors.
It's a good idea to associate those two with a brand and of course you can have little splotches of
other color for buttons or for inside of images of course but typically for your main design you want
to minimize the number of colors you use.
So now we have this custom class set up block to we can hide the CFS and let's go back to filling in
the second feature set using a similar structure to the first feature that you'll notice in the first
feature at or service we have the icon on the left and the description on the right for the second one
we're going to switch the order.
This is commonly done in web design where you have one product image here and then the next product
image down here on the right.
So we're going to switch the order for our second feature.
We're going to highlight this.
And now here in the free trade I'm going to write in this code so I'm going to have first one column
there will be the text.
So we're doing this in order so be a div class column.
I'm D7 which specifies its size and just go ahead and close that off immediately so we don't forget
you can add a little comment here by copying this comment and putting it here so that we know that this
div is a feature set.
OK.
Now I'm going to add a header too and you're going to say it's a class feature Red heading this is another
bootstrap class that will automatically sell or text and I'm gonna give it some padding on the top and
bottom of five padding is something you often want to include before you can see the output.
And we can add a service title and similarly to the previous threat to add a span class called a font
italic to italicized text using Bootstrap that way we are minimizing our CFS I'm going to put in subtitle
here and then go ahead and close as band tag and let's close the each to tag and let's finally add a
description and it's gonna be lead in the bootstrap class lead will increase the text a little bit I'm
going to say your service description here and let's close that p tag as well.
Okay great.
So we just set up our second feature it detects for it.
We also have to go ahead and pull in an icon.
So go back to the bootstrap icon library and find an icon that you'd like to use.
And go ahead and copy its code just in here.
I'm going to use the bootstrap icon for an eye you'll see a B I B I I.
That is a tongue twister anyway.
This will make an eye on the screen and I'm going to put it inside of another column because remember
this is part of a row which means you must put it into a column.
I'm going to give it padding as well then close off that div you can't put padding onto an SPG you must
put that onto a div.
That's why we have a div that will contain the SPG.
OK.
Great.
That just set up our second column in the row and that's all we need for that second row.
Let's go ahead and look at the output this time and we're not seeing anything yet.
When I hit run just just to check.
No.
OK well let's go ahead and build out some more and see why we're not seeing it yet.
That's fine we'll fix anything if there is an issue.
OK.
So we have a column you have a feature at
not sure why we're not seeing it but it's fine you some real time troubleshooting here mealtime error
handling as long as it's all inside of the services div then we should be fine.
Sometimes if you're missing something in the CFS or if there is just a semicolon missing then it can
completely hide your whole element.
That's why detail is very important.
Okay well we'll find a later and fix it later.
For now let's go ahead and set up our third feature set and then we'll see that.
OK all products great.
Let's set up our third trek.
We're gonna open up a other div following the exact same structure if we tread with the padding a five
gonna block block three and then we're gonna go ahead and close that div.
Now let's go ahead and style block 3 which is the third custom block element that we have here.
Now let's go to a different color and we can use this similar color that we've been using above.
We have this red color we can apply that red color to our block 3 class.
Excellent.
Okay.
It's gonna open output.
See.
Okay.
So we set up the feature red for this one.
Let's go ahead and now fill in the contents the columns for the row.
This will be the final row.
So let's go ahead and set up the call last for the first column.
Now previously we had the icon on the right where if using an image you would have the image on the
right.
And now we're gonna put the third image back on the left.
So we'll have a zigzag structure which is common in design.
Let's add padding immediately and specify that it's a column and close off that div and go ahead and
find another icon or image whatever you prefer.
You can even put a video for this column.
I'm gonna find the icon for a game controller.
Perhaps this is a video game development company.
I'm going to copy that right in here.
OK great.
So now that is inside of my div here and that is all set up there.
OK.
Excellent.
So all we can do also is add any more padding that we might need depending on what the output is often
you add styling afterwards but having the template up first is the best idea that you have the structure
set up because if you start adding styling too early then you might end up changing it at the end.
So you want to avoid styling too much at the beginning.
OK so I have my eye in here.
I'm going to add another column for so I had a comment that this is the end of our third feature right.
And I'm gonna add another column now for my text element and this will follow the exact same structure
that we have appear with this kind of text it up here.
It's useful to type it out when you're just starting to learn because then you'll memorize what the
structure should be like.
You don't have to necessarily memorize all the different classes you will with time but you should memorize
the structure of what it can be.
But all the classes you can look up and I have encourage you to look at more classes as you need them.
You don't have to learn everything off the bat but the best way to learn is to learn as you need it.
Let's set up another header to make this feature it heading and I'll make it with Patty neatly.
We'll call this service title then let's add in a span.
Call this font italic and we'll add another subtitle so following the exact same structure that way
we have several different pages that look the same.
You want to be as consistent as possible throughout your page.
That way your users minimize confusion.
Let's add another description here and this will end up looking extremely neat and aligned because it
is the same structure you'll notice for each of the different pages each service follows the same structure
icon and then information about the product okay.
Great.
So now that is all we need to set up the feature ads.
Let's go ahead and check if we can see them in output.
So so far we're only seeing this one in the output.
So in the next lecture we're gonna go ahead and troubleshoot how we can show the other pages that we
have in our feature sets.
So far we have one in our div and we're gonna show the rest in the next lecture.
Other than that.
Thank you for watching.
You've now set up your first feature at the back end for the other featured feature ads.
Actually this is all front end but my back and I just mean the code behind the Web site.
But this is all front end development back end development would mean using servers to save data from
users.
OK.
Thank you all for watching.
And we're going to see you in the next lecture where we'll continue with this project Cesar.