Bootstrap Jumbotron.
This is the part that we are going to understand in this tutorial.
It actually helps you in displaying your contents as a summary at the top of
the page and that is why it is very important to know how to build this Bootstrap Jumbotron.
So stay tuned and watch the video till end.
[Music..]
Hello and welcome to another new episode of learning simplified.
Today we are going to understand what is bootstrap jumbotron.
Now from our very previous tutorials we have learnt a lot of things such as how
to create a collapsed drop down menu; then we learnt how to create this carousel image
slider, and then we learnt about a bootstrap accordion and setting animation
delay in it, as we can see over here.
When we knew how to create this modals and how to insert video inside your Bootstrap
HTML5 project; and there's a lot of many things those we have clarified.
No this is the thing that we are going to know we are going to learn in this tutorial.
We are going to insert bootstrap jumbotron into
this part.
So let's proceed.
Let's get back into our project and here we will be typing as..
Here it is; we have created a class which is known as jumbotron.
Now if you just create a H1 tag inside, get back to your project and reload
and you can see that a jumbotron class has been produced over here.
This is practically the jumbotron that has been
created, that has been introduced over here but this thing is practically indistinguishable,
this is the first thing and the second thing is it is practically
spreading a lot, it is practically taking the whole width of your webpage and this is
what we are going to rectify.
This actually happened as we used only this jumbotron class, but we haven't introduced
anything else.
So this is now going to be rectified; but how?
Don't use it over here.
Use it here.
Create a class 'container' and then you keep your jumbotron class into that container and
see what happens.
Now just reload and now you can see that your jumbotron class
is practically..
This is not a hundred percent width anymore.
Press F12; open up your code inspector, click here, now just
hop in to your right panel and see what are the exact properties those are practically
being played into action; in this particular case while We're trying to create
our Bootstrap jumbotron it has a border radius of 6px and it has a background color of this
one.
So if we need to change it, here it is, now this is a very prominent
one and this is practically the .Jumbotron class which is making all these differences.
You may have observed as you have used a 'container' class and then you are
using a jumbotron class inside this container hence you may observed there are 15px padding
is been observed over here from both the ends.
If you want to use 'no padding' class here, you need to used
here another class which is 'no padding' as we have created earlier.
First of all reload; Now this is practically having no longer padding at both the ends.
So this is the thing and what is the nature of this 'no padding' element?
No padding, here.
We have set this 'no padding' element to padding-left 0px and padding right 0 px.
And the same exact selected name is been used in this container
element.
So that is why while executing this jumbotron, it is practically imposing no more padding
from both the ends and that is what is being executed over here.
So this thing is clear.
Now we have to use this class '.jumbotron'.
So we just copy this class name.
We get back to our custom.css and right beneath this
.Banner11 caption we are using this class jumbotron and here we are using the same background
as we have used in this particular case.
Copy this color code from here and paste it.
Now let's get back to our project and see and exactly the same thing that we have coded
here, we have successfully changed these intrinsic properties,
these physical properties up to this part.
Now all we need to do we need to make some more amendments; but first of all I would
like to make one more amendment over here.
If you wish to use the whole hundred percent you width of this page, then all you need
to do you need to get back to your project and here instead of using
jumbotron inside the container we will be using this jumbotron class on the top of this
container and we will be placing it right on the top of everything and will
be clicking reload, and we can see now this is a 100% width.
Now we can see a full 100% width of this page.
We have placed the rest of the contents inside this div class 'container'.
And if you wish in continuing this 'no padding' element, no padding selector name with your
container then you may continue or you may remove and you can see that the 15px padding
property is back.
All we want here is a subscribe button to appear and then we want here a paragraph to
appear for the time being.
And this is what we intend to do in our next part so let's move on.
Ok.
Now we have created 2 columns over here then all we need to do here is to create a...
We have created a row inside this container class and then write beneath this h1 class
we have created 2 more dave's such as this col-sm-3 and col-sm-9.
These two blocks have been created and now in the first part all we're doing here..
Now inside this...
P tag we are creating this paragraph.
Press control + s, get back to your project and reload.
Now we can see that here subscribe button has been produced and here a paragraph has
been created.
Now if you want to make any kind of amendments over here, first of all let's get back to
our mobile responsiveness view and press control+shift+m, and we can see here's the look, here's the
subscribe button, here is 'hello cruel world' the writing.
Now if we change this value, that means you're providing a 768px and we can see that all
these contents those are coming side by side.
As we placed over here that this will be a col-sm-3, that means in this particular case
a width greater than 767px, all these contents those will be coming side by side.
The same thing is been observed over here and they are coming aside.
Now let's press control shift M again and get back to our original preview.
First of all I think we would like to change all these things all these fonts over here.
Select this paragraph first and you can see that this is a jumbotron p and all those characteristics
are depicted over here.
So in this particular case if we write down as 1em then we can see that this is how
it will look like and in the same manner if we write here color; then the color will be
changed.
So all we need to do we need to copy this thing get back to your custom.css
and here right beneath this jumbotron we are testing it and reload and you can see this
is the thing that we can observe over here.
This text alignment is pain under a justified condition.
They have changed their font color and if we Press control+shift+m, then we can see
that the same thing is happening over here.
Now if we want to change this font-family, then what should we do now?
For say,we are going to....
For say we are going to use this font family which is known as 'Roboto'.
All we need to do we need to select this one; we need to copy this one; and in this index.html......
Now we can see that we can successfully changed all the font color,
font size, text alignment and in fact the font-family.
Now in the same manner if you want to make some certain
amendments in this 'hello cruel world' segment then all we need to do...
For more infomation >> Фильм "Tomb Raider: Лара Крофт" (2018) - Официальный трейлер (Русские субтитры) - Duration: 2:28. 
For more infomation >> Video: It will get warmer this weekend 9/20/17 - Duration: 2:26. 
For more infomation >> ✌ #Car Reviews:トヨタ 新型 プリウス マイナーチェンジ 細かなデザイン変更、Toyota Safety Sense P 全車標準搭載 2018年6月発売 ✌ - Duration: 8:44. 
Không có nhận xét nào:
Đăng nhận xét