Bootstrap Typography – How to Inspect Code Elements Tutorial for Beginners


In this tutorial, we are going to understand
the bootstrap typography. Hello and welcome to another new episode of
learning simplified. In this tutorial we are going to understand
different typography used in Bootstrap. Now,
if you just get back to our custom.css we can see over here that some additional class
names have been created in this respect, we are practically using this
Banner7 and banner8 currently, and in this index.htm l we have created another container
and we have used banner7 along with this container. As we can see here that
this Banner7 it has the property of this one, this is the background colour and it is using
practically margin-top of 20px. Now we have created all those properties
as we have done previously. The row the class name being used here is
col-lg-12 which means that we are consuming all those 12 grids, and inside this class
name we have created banner8 class name, and inside
this we have created some header tags, such as h1, h2, h3, h4, h5 and h6. Everything has been done here. This is the
thing that has been done over here so far. Now just press control+s, get back to your
project and reload it and we can see that this is the output so far that has
been created. If we get back to our project in index.htm
and all we are doing here, we are just removing these two links and let’s see what is the
output. So if you just now get
back to our project and reload, now we can see the original display of all those header
tags. So actually this is the beauty of Bootstrap
and this is practically the customization that you have done in your custom.css
and together when they are working they are practically producing this output over here. Now the problem is, these header tags, those
are practically block elements. So the first thing is, if we want to use these
things horizontally, prince all this contents will be placed along side by side,
what could have been done over here? So this is why we are going back to our project
and here we are practically using… And just change this values.. H1 will be here, h2 will be here, h3 will
be used over here, h4 will be used over here. No just press control + s, get back to your
project, and reload. And now you can see that H1, H2, H3, H4, they
are practically in line, practically horizontal. That means if we use a span and if we provide
our class name from H1 to H3 to H4… If you want to put this remaining header tags
into the same line, if you want to appear them in line, then all you have to do is to
provide here… Now if you just press Control + s, get back
to your project and reload, now you can see that everything is in line. Those blocked elements, these
header tags, those were supposed to be block elements, those are inline, those are now
all in same line, ok. So I think this thing has been understood
now. The first thing that we are going to do, we
are going to undo any kind of changes that we have made so far. Just reload and you can see that the previous
state has been restored. Now if we want to determine what kind of font
family it is using over here and the default values those have been imposed over here,
we have a very important and very significant tool here in Mozilla Firefox
that will help us in this purpose and that is known as the firebug extension. This is practically the Firebug tool, if
you just click on it you can see that another control box has been opened over here and
from here, you may choose a particular element over here to inspect the
coding behind it and what kind of class name and what kind of attributes are provided to
it. So this is a very important tool which is
known as firebug and in case, if you want to use, install firebug into your Mozilla
web browser has an extension then all you need to do, you need to go to this settings,
here, into this Add-ons, and inside this add ons all we need to do… This is the extensions that we will be needing
here…. And here all you have to do, you have to look
for it, and here we may see that here is the list of the elements related to firebug. Now as firebug has been
installed into my machine previously so it is not showing over here, but in case of yours,
if you haven’t installed firebug yet, it will be shown into this list and
all you have to do, have to click on this install button just and everything will be
coming down to your bar on the right corner of your web page. So this is the firebug and with this tool,
you may just click on this Arrow sign over here which says that pick an element from
the page and all you need to do you need to click on an element to inspect the
properties that is being used to over there. Now this is the thing that has been developed,
H1 hello world, and in the right corner if you just sneak into this thing We can see
that these are the classes and these are the properties those are being imposed
over here. So all you need to do you need to inspect
these properties. As we can see we have selected h1 and this
is the font size that has been used here, this
is the default value that has been used by Bootstrap over here. Now font size is 36px, if you just mute it
then what will happen you will see here. This hello world this word is now getting
shrink, this word is now getting reduced in size. It is getting back, it is getting restored
again. Now margin-top is provided here 20px. So all we need to do if you just get back
here and place 0px, we can see that the margin which was provided here is now getting
diminished. It is now gone practically as you have provided
a margin top of 0px here… So this is how you may rectify all those things. You may see the effects what will be the outcome
if you provide a particular property or attribute to a particular
element, or you may change the values over there, you may see the effects caused due
to change in this valuation. So this is the first and preview of all the
changes that you will be making in your website. So this is a great tool to determine this
kind of effect and in case, you are done with your experiments, with your
project then now if you want to restore the properties of your webpage which it was in
case of your previous state, all you need to do you need to reload it over
here, just get back to your reload current page and you’ll be seeing that all your original
and Default current page is being restored in its previous state. No suppose we are going to use a lighter text
over here as we may see that we will be having a lighter text here. We are just writing something else, something
like, how are you today? Now if you just press control + s, get back
to our project and reload, you can see that this is the same exact thing that is being
displayed over here. We are practically intending to make a lighter
text smaller in size that will be displayed in line along with this hello world. So all we need to do we need to
get back to our project and here we will be using this tag which is small. Now if we just press Control + s, get back
to our project and reload, now you can see that
hello world is a prominent word, besides which we can see that there is a lighter and smaller
version of this h1 extension…. So what we did here, we have just used up
a small tag, this is the thing that is making all the difference here in this particular
case. In the same manner if you put here underline… Get back to your project and reload now you
can see that there is an underline version. If you just put here strong… Press control + s, get back to your project
and reload and now you can see that this is the bold version that has been produced which
is in line with this H1 tag. Press del over here, what it creats? You see. Now italic, and now you can see that there
is an italic version. So all those things those things are practically
alike. All you need to do you need to use these things
and see what is happening. These types of class names those
are making all the changes. Everything is practically defined over here. So you need to do you need to learn more about
this and implement these classes into your project. Now let’s talk about some paragraphs. First paragraph that is used over here, for
say… Is this one. Now all we are doing we are just copying it
from here, and we are just copying it and pasting it over here. Now if you just press Control + s, get back
to our project and reload now you can see that a paragraph has been
generated. So this time we are going to observe that
what kind of properties are being attributed over here so we here activating firebug again,
and who are selecting this arrow and we are selecting
this paragraph element. And we can see here that for the paragraph
element the margin provided here is 0 0 10px and the
font family being used here is helvetica and the font size being 14px, and the colour being
here is this one, this is the colour over here. So if you want to change
the colour all you need to do, for severe intending to have a white colour over here,
so we are providing a white colour and what we are seeing her…. Now everything inside this particular container
it is turning into white. In case if you want to make some changes,
practically customization will be coming into the
latter parts but first of all what we need to know here we need to know this Bootstrap
framework, the objective of this tutorial is to make you understand about the
Framework itself. We are practically knowing the framework over
here and that is why we are learning the Framework first and in the later tutorials will be knowing,
we will be customizing, when we will be creating our own template in Bootstrap; and only then
we will know how to make customization using the custom.css that has
been produced by us into project root folder and using this firebug element. So all we need to do now for the time being
we are just using the default values that are being used by Bootstrap. In the second case we are using another paragraph
element… Now just press control + s, get back to your
project and reload and now we can see that using that
particular class with paragraph lead we can see here that it’s being practically a little
bit of bigger in size. Now just get back to firebug and use this
arrow, click here, and you will see that the lead element, it has a font size of 21px. For the time being let’s assume
that we want a justified text alignment over here, so where we should provide it? That is why we should get back to our project
and here, in the rightmost corner, just use text align and you may see here that
the justified text alignment is been attributed over here. So that’s it for today’s tutorial. Hope you have liked our tutorial. If you have liked our tutorial then please
do not hesitate to hit that red subscribe button down
below. Hope to see you guys in our next tutorial. Till then, bye.

Leave a Reply

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