Hello everyone and welcome back to our bootstrap course.
In a previous lecture we built a carousel of products and in this lecture we're going to be filling
in more pages for details about the products in this services div..
So if you're using a software as a service and you're building a company for a SaaS company then services
and products are often the same thing.
So let's go ahead and fill in more detail here.
So first we're going to need to build a row and this row is going to contain items such as text and
icons and any images of products you want to have.
So to do that we can use bootstrap classes can use the class row to set up a row as well as feature
Red which is a key word that shows that it is featuring something like add some padding to the top and
bottom with P Y five.
And we can also use our custom classes going to use custom classes block of block 1 and full page.
We've already set up a full page which means we'll be 100 of the viewport height.
So and she will be the entire viewport.
Let's go ahead and close this div immediately and add styling to this block and block what.
So we're going to use a minimalist approach to our website.
Minimalism is quite trendy these days and it is useful because it is easy to set up.
It's pleasing to the eye.
It looks professional so minimalism is always a good idea.
Of course sometimes you can't use minimalism if you have specific requirements which is fine as well.
So let's go ahead and set up some color blocks which will help make our web page minimalist but also
colorful.
That way we can grab attention and associate with a brand et cetera.
So we have a Block and Block one here.
Let's open up our CFS and let's set up the styling for block as well as block one.
And we're gonna have several blocks for each page on our website.
So for block we can set the text color to white we can align the content to center because the default
is to align the left and we can set the paint to 5 percent percents are initially the best sizing to
work with because they are the most responsive.
OK.
For block one this is going to be where we set our background color and we're going to use the same
clothes we've been using so far for our carousel placeholders.
And we're going to set it up with this sort of blue color.
And right now it's not showing up because we have to fill in more content for our block.
We don't have any text in there which is why we're not seeing anything on the screen because height
is the default 0 4 0 content.
So let's go ahead up and set up the rest of the contents that we can actually see it and see its height.
So first we're going to have a product as well as some information about it.
So we're going to use a an icon as a placeholder for the product.
You can also put an image it's up to you and you can get our icons from the bootstrap library that we've
been using so far.
So I'm just going to get the code for a gift icon by searching gift in the bootstrap icon page that
we showed earlier and going to be quite a lot of code.
But you go ahead and copy it right in there.
It's an SPG which is a vector graphic vector graphics are actually only useful because they will retain
their quality even on a huge screen size.
And these are bootstrap classes bootstrap icons bootstrap icons gift.
So this specifies what icon it is.
Then the rest of the code sets the width and height to 10 10 is quite large as one is the default.
So I changed that to 10 and then the other code will create the actual icon.
So let's go to check the output and we're not seeing anything yet because we have to add in more information
here.
OK.
But so far we have this let's also give it some padding and put it into a column because we're gonna
have the icon on the left and then information on the right.
So you can imagine can have a product on the left and information about the product on the right.
So let's go ahead and put this into its own columns.
We're going to open a div and we're gonna give it the class column M.D. 5.
So this will make it into its own column.
We're going to add some padding immediately to it as well.
Typically you want to add padding to separate items so we can assume that we're gonna need some padding
and we can change it later if needed but we probably won't need to.
OK so five will specify the sizing of this column and let's go ahead and make another column just below
it for the actual text about this specific service.
So we have a div class and we're going to this time give us the column empty seven and we're gonna go
ahead and close that off.
And in here we're going to put in text information so do an each to class each rep heading and this
will specify that it is a heading and we are also going to give it the x and y padding of 5.
Or rather just the Y padding a 5.
We don't need X padding.
That'll be fine without it for now and I'm going to put in something like a service title and we can
also add in italics for the service subtitle.
So to do that or you'll do is open up a span and you'll use the bootstrap class font italic in here
you'll put in your service description here and then we have to go ahead and close off the each to tag
as well.
So let's go ahead and close it off right here and then we want to put in our service description.
So actually this is not served description.
This is going to be the subtitle subtitle here and then the service description is going to be in a
paragraph and we're gonna make this lead again to make it a bit bigger.
You'll see how all this looks in the output your service description here.
And let's close off that paragraph tag and the div is close which is perfect now.
So we have a row which represents the row and we have two columns inside of the road div.
So that is why we specified the bootstrap class row and the bootstrap class column because bootstrap
would automatically make for you columns inside of rows with this kind of specification.
Okay.
So far we have set up our first row with two different columns and this will contain information and
an image about a product.
Now we haven't actually seen anything in the output here.
So we're gonna go ahead and fix that in the next lecture to see this description about the product and
an image of the product as well as we're going to set up some more products.
So before we go ahead do that I challenge you to set up the next row for the product yourself.
So set up two more products here by using this kind of setup.
This kind of role and I encourage you not to just copy code but to actually think about the code behind
what you are building.
So why am I putting all these different classes here.
What do each of them are present and what kind of icon do I want here.
You can decide it size the challenge for this lecture.
We're going to be completing a challenge together in the next lecture.
So thank you all for watching and we will see you there.