Bootstrap typography Video Lecture - Learn Bootstrap From Basics to Building

this is part 9 of bootstrap tutorial in
this video well discus bootstrap
typography what is bootstrap typography
bootstrap typography makes it easy to
create headings paragraphs ordered lists
unordered lists inline elements etc in a
way that would be appealing to the users
let's start with headings HTML provides
us heading elements h1 through h6 if we
view this HTML in the browser without
bootstrap this is how those heading
elements will be rendered I have this
exact same HTML already typed and look
at the reference to bootstrap stylesheet
this is commented so if we view this
page in the browser look at how those
HTML elements are rendered using the
browser defaults with bootstrap the same
header elements will be rendered using
bootstrap defaults like this so let's
uncomment the reference to the bootstrap
stylesheet save our changes reload our
page look at how those heading elements
are rendered using the bootstrap
defaults
along with these heading elements
bootstrap also provides classes h1
through h6 these classes are useful when
you want to match the font styling of a
heading but still want your text to be
displayed inline let's understand what
we mean by this with an example
notice here we put some text and look at
this word bootstrap this is present
inside h4 element since h4 is a block
element the word bootstrap is rendered
as if there is a line break before and
after that word I have the same HTML
already typed here so let's uncomment
this HTML and look at the word bootstrap
that is present inside h4 element so
when we reload this page look at that
word bootstrap this is rendered as if
there is a line break before and after
it now what we want to do is display
that word bootstrap in line with the
rest of the text but we want the styling
of h4 element to achieve that we can use
the bootstrap classes that are available
so I am going to use here
h4 class and this is going to make that
word bootstrap in line with
the rest of the text let's look at this
in action so instead of using h4 I'm
going to use a span element I'm going to
set its class to h4 let's save our
changes and when we reload this the word
bootstrap should be in line with the
rest of the text but we should still get
the styling of h4 element now let's look
at another example what we want to do is
display all the headings h1 through h6
in a single roll like this now to do
this if we use the heading elements h1
through h6 then since these are block
elements we are going to have those
elements rendered as if there is a line
break before and after so here we have
that same HTML so here we are using
those heading elements when we reload
this page look at what's going to happen
get those headings in a separate line
now if you want them in the same line
instead of using the heading elements
use the classes h1 to h6 and this is
going to give us all the headings in a
single line like this so let's look at
this in action I'm going to uncomment
this and when we reload we should get
headings in a single line to create a
lighter secondary text along with the
main text in any heading use a the small
tag or small class so this is what we
want to do notice we've got a main
heading and we have a lighter secondary
text as well now to get this lighter
secondary text that you see next to
every heading element that we have here
we can achieve that using either the
small tag or small class let's look at
the HTML required so we have the heading
elements and inside heading elements we
have nested this small tag and inside
that we want the text which we want to
be lighter so that's what is rendered
like this next to every heading element
so here we're using the small tag
instead of the small tag you can also
use small
class like this so I have this HTML
again already typed here so let's
uncomment the HTML and when we view the
page in the browser we should get
another main headings and the small
headings in our next video we'll discuss
working with paragraph elements thank
you for listening and have a great day