In this tutorial, we are going to understand the bootstrap column grid interpretation system.
Hello and welcome to another new episode of learning simplified.
In this tutorial we are going to know about the column offset position used in bootstrap.
Now, before we jump into our tutorial, this is
the exact thing that we are going to do as you can see over here, this blue box and this
white box both of them as you can see, they are practically shifted towards
right from its initial position.
In this respect I would like to say that despite of the fact bootstrap uses 12 grids, each
time and everywhere you do not need, you do not require to use all of them.
You may specify your grid requirements, you may use particular grids, and rest of the
grids those will remain unused.
Now before we move on to our tutorial the first thing that I would like to disclaim
that, behind the scene I have created some additional classes into our custom.css, such
as this banner5 and this banner6.
There's no more major changes have taken place over here only this is that the
banner5 has a background of this one, and it has a margin top of 20px, we will be observing
it what is going on in this particular case, and this is Banner6,
it has the same case, it has a background of this color, this offset color here, and
it has a height of 100px.
Now let's get back to index.html and Let's create
another div container, the same thing that was created over here, and in doing so what
I am doing I am just copying it and I am pasting it over here.
This container is banner1.
Now instead of banner1 I am placing it here as banner5.
Div class row is the same.
Now I won't be using this grid consumption over here, that means I am
not going to use all those 12 grids over here.
Instead, I will be using only 6 grids here and the rest of the 6 grids, those will remain
unaltered.
So let's do it fast.
First of all, we are using, we have to remove all those things those were present in our
previous case, and instead of col-lg-4, I am using here
col-lg-3.
Div class banner2 is same over here that has been taken inside our column class name col-lg-3.
And in this particular case we may see that three grids will
be consumed so far.
Now in the same manner in the second part, all we're doing over here is just replacing
it with 3, div class banner3, this is the same, for say we
are changing it to banner6, as has been created over here as banner6.
And this third one, just go on and delete it.
We don't require it anymore.
As we can see that we are practically utilizing 6 grids out of
these 12 grids.
This is col-lg-3 in the first case and this is col-lg-3 in the second case.
3 + 3 equals to 6 grids have been used over here, is been consumed over
here.
Now first of all, press control + s, get back to your browser and reload it.
Now you can see that second container has been created by us.
All of these boxes they are practically a total of 3 + 3 grids, that means 6 grids and
we have taken this grids inside this col-lg-3 class.
That is why both of them are leaving a 15px of padding from either ends.
This is just the same padding theory that we have been taught in our previous tutorial.
If you have any problem with this padding system
then please refer to our previous tutorial.
We have to shift this blue box towards its right and the shifting will be taking place
up to 3 grids.
So all we can do we will be using this class over here, which is known as col-lg-3.
Now you have to think about it why I am using this col-lg-3 again here.
We have used here col-lg-3 and it is a larger device preview and as we are using col-lg-3
over here, so we have to use col-lg-3 again and we are using another word which is known
as offset.
This command practically going to shift your blue box 3 grids right of your web page.
So let's get back to our project and we see what happens.
Press control + s, get back to your project and reload and you can see now this box is
practically been shifted 3 grids towards its right, this blue box.
And according to this blue box, white box is also shifting towards its right in the
same manner.
Now if we use, for say.. we are copying it here.
If we use the same thing here, in case of this white box now what will happen?
This white box is now practically shifting towards its right consuming 3 grids, that
means, it will be 3 grids shifted towards its right of your web page.
If you want to place both of them into a central position then all you need to do, just pick
it off, you don't need to use that command there, just reload and you
can see that the blue box and the white box, they are placed in the same exact middle position,
and here the empty spaces, these are practically the empty spaces,
this grids are practically empty there's no content inside it, all we are doing we are
just forcefully pushing our content towards right of our web page in this
particular case.
Now if we want this blue box to appear in the extreme left and this white box to appear
in the extreme right, then we do not have any need of this command here
instead we are placing it over here, but this time we are just placing here 6.
Press control + s, get back to your project and reload and you can see that your
blue box is aligned at the extreme left and your white box is aligned at your extreme
right.
Now why this 6?
Now here comes the calculation.
As you know that your bootstrap device it is practically dividing the device width into
12 grids, that means the total sum up of all the components you are using
inside, those have to be summing up to 12 grids at a total.
That should not exceed beyond 12 grids.
Now I have used col-lg-3 means I have used 3 grids over here and
in creating the second box, I have used 3 grades here again.
So 3 + 3 = 6, so 6 grids are remaining here, so that is why while you are shifting your
contents towards right, you are using 6 grids.
You are practically consuming 6 grids over here to shift your contents towards right
of your web page.
So 6 + 3 = 9, and 9 + 3 = 12, that means a 12 grade operation has been taken
place over here.
So that is why we are using here 6, instead of taking 8, 10, 12, or 200, whatever value
it is.
So this whole thing, whole thing is depending upon your maths and your calculation.
Now let's initiate some technical approach.
First of all, you may have seen here that I have used a separate container here.
No instead of this separate container, what you have to do, just copy this row here.
Now remove it as we don't need to provide any second container over here.
Now in the first container, where I have practically created this row, in the first
case what I am doing I am now inserting another row over here.
As we can see that another row has been created.
So this is the second row, this is the row number2, and
this is the row number 1.
Now if you just press Control + s, get back to your project and reload now you can see
that the margin is now gone.
All contents and now under same container.
They are practically using these two different rows.
If you talk about academic section, absolutely there's no problem with it.
What according to industrial approach, it will be very voice thing to use separate
container for separate contents.
All you have to do you have to think about the future.
What is the future?
Practically when you are working in an office, what you
have to do you have to work with developers you have to work with other designers, your
co-workers over there.
So all of them they have some different approach some
different thinking.
Practically they are trying to do, trying to implement.
Now the question is in case, you are asked to create a parallax, then that particular
time you have to create some containers, separate containers, you have to provide separate IDs
to them, so that is why it is a wise thing to create provisions for
each and every cases and that is why I would like to recommend here, the first thing is.....
To use separate containers for separate contents.
This is the first and the primary thing.
And this is a very valuable suggestion.
Always keep that in mind.
Just press Control + s, get back to your project and reload and you can see that
there are two separate containers over here.
The second thing is, if you just kindly pay your attention over here,you may see that
this huge part that is practically being unused is practically an empty part.
You cannot reuse this part in future.
The wise thing is, instead of leaving some empty some hollow parts inside your
container, it is practically will be a wise thing that you just utilize all those 12 grids
over here, do not leave any empty space, and what is the benefit of this
approach?
In future if your customer appears and asks you that I want to place some revenue generating
ads on the left and right part of this content cause these
empty fields, I want to utilize them.
Then all you have to do, re-calibrate all these things again, you have to create all
those slots, you have to put those contents, copying, pasting, doing the same
thing again and again and this is very disgusting and annoying thing.
So that is why my suggestion is always, do you
things like this, instead of using this col-lg-offset-6, you are not using that col-lg-offset-6 over
there, instead, create another div with class name col-lg-3,
as we are asked to keep it empty so we don't need to provide any content over here.
Now you can see that those boxes are now placed centrally.
There is absolutely no problem, but the benefit is, these parts, these parts are now not hollow
nor empty.
Instead at anytime, you may provide any type of content over here like this one.
Now just get back to your project, reload and you can see that those places,they are
not empty now.
You can pour contents inside it and if your customer or your
project doesn't require any content over here then do not provide any content, you may keep
it blank.
All you can do, you can just provide provision that in future
these places can be utilized.
We can always put contents over here.
And this is what is known as the industrial approach.
In this way you may have to code a lot, may have to code more, but if you have to
think about the future, always think about the future, what will be happening at the
end of the project, not at the beginning of the project.
This is the primary thing that you have to acquire yourself, think about the end result.
All the 12 grids are now being utilized.
In the next tutorial we have to walk on with some typography.
So if you have liked or tutorial then do not hesitate to hit that red subscribe button.
Hope to see you guys in our next tutorial, till then, bye,
enjoy learning!!
For more infomation >> Wife beating her friends and loss bet then rap her wife - Duration: 1:06. 
For more infomation >> Sad Cinematic Background Music / Emotional Royalty-free Music Instrumental - by AShamaluevMusic - Duration: 15:46. 
Không có nhận xét nào:
Đăng nhận xét