Bootstrap Grid Layout Padding Tutorial – Bootstrap for Beginners


In this tutorial we are going to understand
the Twitter designed bootstrap Framework content distribution inside column class names. Hello and welcome to another new episode of
learning simplified. In this shot tutorial we are going to understand
how to make some content distribution inside column
class names of twitter design bootstrap framework. This is the actual content layout that we
have seen in our previous tutorial, but this is the thing that we want
to learn. How to create gaps, how to make gaps inside
this column contents as I have mentioned in our previous tutorial that in case of making
some gaps inside this bootstrap contents, inside this column contents,
we have to pour some contents inside and they will be taking automatically a gap of 15px
from both sides. Practically bootstrap uses the strategy of
leaving a padding of 15px from either ends, from left side and from the right side and
that is why whenever we put some content inside it, then it automatically realign
itself leaving a total gap of 30px from both the ends, from left and from the right. but in case if you want to have
a display on it, how to create these gaps as we have seen in this particular case, then
all we need to do we need to make some innovation on to it. So the first thing we have to do we have to
get back to our project first which is known as index.html, and we have previously created
a custom.css in which we have defined some default selectors, and we have
created some banners. Now inside this index.html what we can see? We have practically aligned them under a single
tag as we can see here, div class container banner1,
inside this div class row appears, inside this, this col-lg-4, first of all we have
called in a large column preview and then we have called in this banner2 selector
name, this one actually. In the same process we have called in another
col-lg-4, hello movie this class name, this selector name which is known as banner3, and
successively we have created another class name which is known as banner4. After making this kind of coding over here,
when we are previewing our output into our Browser then all we get here is these sort
of things when no gaps are appearing here on. But now, we are making some
certain changes, what we are doing here we are just copying the class names, and.. We are separating them. Now instead of banner2 which is appearing
along with col-lg-4 that we have created, this col-lg-4
is actually the bootstrap column class name that we have called in, this 4 here represents
that four columns have been consumed, and we have put this div class banner2
inside this div class col-lg-4. In the same manner what we are doing here
we are separating this.. Here you go…
banner 3. In the same manner, first of all cut the selector
name and place it over here. Now if you just press control + s, save this
project, get back to your browser and reload, now you can see that these
gaps they are now appearing in between each contents. As we have seen previously that these contains
they were aligned together, they were practically using the
full width and no gaps were present over there, it was the apparent thing that was practically
being viewed by us, but in actuality there was a padding, there will
be always a padding over there and each time whenever you are pouring some contents inside
your bootstrap columns, all you will be staying there will be a 15 pics of
gap from either ends, from both the ends as you can see over here. Now if you do not wish to provide any gap
over here, then all you need to do you need to get back
to custom.css and you could create a selector name as… So we have created a class name here as no-padding,
that means we are not creating any padding. you may see here that.. padding-left is set to 0px and padding-right
is set to 0px. Now if you get back to index.htm and inside
this parent div if you provide this class name no-padding,
now just press control + s, get back to your project and reload and now you can see that
the padding, that was by default being placed by the Twitter designed
bootstrap, it is now practically vanished. It is now practically leaving no padding from
left and no padding from right. So this is how you may customize your gaps
and this is how you may modify it. So remember, each time whenever you are pouring
some contents inside such as in this case, this is the container, this yellow box
this is practically the container, and inside this container you were practically pouring
some contents here, but this is not the actual case. In actuality, you have
called in some columns, some default column class names such as col-lg-4, as you have
provided here, you see? This is col-lg-4. You have created these classes first,
and inside these classes, just observe it over here, inside these classes, col-lg-4,
you are creating this class banner 3. In case if you want your content appear as
if in this image,as you can see over here. In this particular case, they are practically
leaving a gap of 15px from the extreme left, and gap of 15px from the extreme right. That means they are leaving a
padding from both the sides and in between this red box, it is leaving a gap of 15px
from the right, and this green box it is leaving a gap of 15px from the left. And that is why a total 30px of gap is produced
between these two boxes, the red box and the green box. So this is what we have to learn from this
tutorial. From now on whenever you are trying to provide
some customization, in case if you wish to go by the default
values as per prescribed by Twitter Bootstrap, then all you need to do you need to call in
the class name first, this is the default class name that has been
assigned into Bootstrap, and then inside this class name you have to call in another div
which are not the selector name, and that is how you will achieve this kind
of output and in case if you want to make some customization, that means in first case
there won’t be any gap, but from letter on there will be some certain gaps,
if your project demands such type of allocation then all you have to do, you have to create
a no-padding selector name, and then you have to get back to index.htm
inside this Parent name such as over here, inside this parent class name you have to
put it all along together. If you just create another div over here,
say you are just creating another div, for say, you
have named it as learning, this is an example. In this particular case to there will be another
15px of gaps from both the ends. It will practically generate a padding from
both the ends, from left android under total of 30px gap will be left from both the ends
equally distributed from both the ends, 15px from the left and
15px from the right and so on. And this process will continue it’s time whenever
you are creating some classes inside. Hope you have like this tutorial. If you have like this tutorial, do not hesitate
to hit that red subscribe button. Subscribers to stay tuned for more. Hope to see
you guys in our next tutorial, till then, bye

Add a Comment

Your email address will not be published. Required fields are marked *