Hello everyone and welcome back to on a bootstrap course.
In this lecture we're going to be learning how to apply different display values to our elements in
the previous lecture.
We learn how to build rows and columns.
But we can go ahead and delete all this code here and just leave our template for our next example here.
So what we're going to be doing is building an element and showing different display properties without
bootstrap.
You can apply display properties via CSA us here.
However for our concerns we don't want to use display properties with CFS because bootstrap allows you
to do it much faster.
So typically you do something like have the class and then you would apply display something like display
none or display block et cetera.
And we're going to looking at all the different variations and this would affect the alignment and positioning
of the elements on the page and how they respond to changes in screen size.
Now we don't want to do it this way because bootstrap provides a shortcut so that you don't have to
use this old style.
Okay let's go ahead and toggle closed the CFS and let's build some elements.
So we're going to first start with a span element span is an empty container.
It is different from div because span is not a div container it is more generic and general.
Okay great.
But you can still apply styling to it.
So we're going to add a class and we're going to begin with D.
Now let's go out and close that span tag off while we're at it.
So right now you've just made an empty object and we've applied this bootstrap class to it which is
indeed none.
Every type of display property that you want to add with bootstrap will be done with the keyword or
the key letter D followed by a hyphen and followed by the key word for the value of the display.
So as mentioned there is display none display block and many more that are going to look at shortly.
So Dean that means that the display has none.
Which means that it won't be shown.
Or rather it will be shown but it will not be aligned either inline which means with other elements
nor aligned as a block which means it is aligned on its own line.
The best way to understand this is to test out how it looks.
So in order to test out how this looks all we want to do is add to this span some color so in order
to do that we can set the background immediately with this bootstrap class known as BMG primary which
stands for background primary and this is an alternative to using the CSF styling as we had here in
our CFS.
We set the background color ourselves as well as the outline where we can actually delete all this because
with bootstrap styling we can just assign the bootstrap class a BJP primary and that will give a blue
color to the background automatically because we're changing the background color.
We also want to set the text color which is going to be text white because the background is going to
be blue so white will be easiest to read.
And then in here we can also put some text D none so that we know how this will appear and what this
element is referring to.
Otherwise it would just be a blue box.
Let's go ahead and make a similar span for a second element.
So we're going to open up a span I'm gonna give it the class D.
None.
And the background.
Dark as well as text white.
And let's go out and close that span and we're making to because if you just made one then you would
not be able to see the alignment differences between D none and other display properties property values.
Display is the property and none is the property value.
And so we have to see to see how this will affect this display none will affect two elements whether
it would put them side by side or on top of each other et cetera.
So let's go ahead and test how this looks in the output.
So if I click on the output you'll notice that nothing will appear in the output because display none
will hide the element here.
Okay.
Let's go ahead and show some more by making more of our span elements here with different display properties.
So we want to copy these two.
I'm going to piece them below.
And the only thing I'm going to change in the two new ones is the text inside of the span as well as
the display of the span.
So I'm going to do block as our next example block will mean that these two will be each on their own
row.
Let's go ahead and see how that look but first I'm going to also change this text here.
That way we know which span is for white.
And as you can see here in the output we now have two boxes that's a D Block and they are stacked on
top of one another no matter the screen size.
And that is because the block property value of display will display the current element on its own
row as if it was its own new paragraph.
OK so you'll notice that the text is a bit close to the edge we can fix that by adding a another class
called P2 which will add padding.
And as you'll notice pattern goes from the border of the element to the inside.
Which means that added padding between the border and all the content inside which in all cases some
text margin would mean the opposite it would be from the border to the outside.
Okay let's go ahead and that for the second block as well.
And here we have an example of what a d block looks like and you'll notice they're automatically colored
with this BD primary and b g dark bootstrap classes.
OK.
Let's go ahead and add some more.
Stan classes and how we're going to do that is going to hide the output and I'm going to copy over these
two spans and paste them again and this time we're going to change the class again so that we can see
different display properties.
Why do you need to know different display properties.
Well because for responsively you need to know how your elements will be aligned.
For example if they're in line that means they'll be side by side.
But if they're blocking means we'll be on top of each other.
And this well you said how your page looks because you can set items to be beside each other on top
of each other in a table et cetera.
So the next one we're going to looking at is commonly use and it's called in line and in line is just
as the name goes it means that the element will be in the same line as its next element is also in line.
If the next moment is a block then the block one would be on its own and you can play around this and
try different combinations for your site.
Let's go ahead and look at how these would look.
Let's also make sure we change a text to D in line just so that we are clear on what has what bootstrap
class.
OK so I'm going to go to the output and as you can see we now have these two new blocks D in line D
in line and they are beside each other whereas the two blocks above them are one on top the other they're
stacked.
OK.
And this would be the typical mobile screen size whereas this would be a laptop and you'll also notice
that the width of blocks is set to 100 percent of it's containing width whereas the width of inline
is set to the default which is just a fraction of the width.
OK excellent so now we have in line and as you can see you need to know both because your elements might
need to be sized differently depending on what the element is.
And you can assign these d in line D block this display property this bootstrap class to any element
it doesn't have to be a span it can be a div and typically it would be on a div.
OK great.
Let's go ahead and look at some more because there are quite a few.
So besides in line you can also have other ones like inline block which will treat it halfway between
an in line and halfway between a block and you will see how that looks when we test it.
Let's go ahead and just add a few more so we can prove them all at once.
So we have inline block the other ones you can use.
I'm going to go over them all quickly.
There is all so flex flex means that it will put the element into a row.
Similarly to making a row flex will put the arms inside in two columns in this row and this is extremely
useful because flex is very responsive and you can do use for justifying and aligning of elements inside
of a flex container and can be showing you how to do that later.
It's very great for positioning and justifying elements and making sure everything is spaced out evenly
et cetera.
OK.
So there is d flex the next one that we're going to preview is going to be inline flex and I'm just
going to put them all in here so that you have a reference and you'll know that all the inline flex
and that way you can come back to this template whenever you need to choose the best display property
for you.
So there is flex in line of flex.
There is also table which will create a table and there is also going to change this table as well and
after table there is also table cell and table row.
So these are typically used with tables.
As you can imagine.
But I'm going to show them for reference on their own table cell tables fell.
And finally there is table row and each of these will be displaying the element that is applied on slightly
differently.
OK the best one you can use depends on what you need.
Your current element to do the most common ones that use our block and flex as well as in line.
Okay let's test how all these look like now that we have display table row display table cell display
table display inline flex display flex display inline block and display in line really.
Okay great failsafe snapshot and justices.
So let's go to the output and as you can see now we have quite a lot more of our elements.
I'm going to toggle easternmost we can see all this.
These two are display in line and these two are display inline block as you notice they're slightly
bigger and they take up before a height of their containing element whereas display in line had a slight
margin at the top and bottom whereas display in land block they are the 100 percent height we have deflects
which is treated as its own row here and you can put columns or elements into display flex divs and
they will be treated as a rule which mean that they will stack very nicely and you can also justify
and align them.
Here we had display flex wrestling again.
Let's check what that was.
We forgot to change its text I guess display inline flex of course.
OK display in line flex is another option that you can use.
OK now we're seeing this.
So it is slightly smaller in with the display flex.
This is a great reference to have because as you can see there is a difference but because it's still
flex even though it's in line it's flex which means that you can apply flex properties onto it.
Flex has its own properties for justifying and aligning that the regular inline does not have.
And we're gonna be looking at those in our Flex box lecture.
Okay.
Then we have table and table silent table row.
These are typically used together tables used to be used to outline a website and to make the grid of
a website.
How ever you don't want to do that anymore.
That was before things like CSX and flex box and grid came into effect.
So now for two sites you can still definitely use tables for data if the data is in a table format.
Okay great.
Well these are all of these display properties you can use.
And typically before bootstrap you would use CSX to apply all of these properties and as you can see
the h the CML and adding the bootstrap directly into the EMR like this it is much more efficient for
you as a developer because you don't have to apply CSX you can do it with bootstraps.
Yes yes.
OK well that is everything that we're going to be covering in this lecture I had encouraged you to test
different designs around putting rows into tables putting elements into flex elements.
I challenge you to see how they would all look like because you will be using multiple ones on your
Web sites because sometimes you may need an element to be in line sometimes you might need an element
to be on its own line et cetera.
So these are important to know as you need them because you have to choose between them.
Okay.
Great.
Thank you all for watching and we'll see you in the next lecture where we're going to be continuing
learning bootstrap core fundamentals to get you up and running with projects see you there.