The bootstrap framework has many built in text formatting options.
In this lesson we'll go over a number of formatting options and show you how they differ from default
HDMI styling we'll start with the heading tags
in the HMO code on the left hand side of the screen we can see we have each one each to write to each
six in our web browser on the right hand side.
This is what the bootstrap formatting looks like for adding tags.
We can see each one right down to H six
bootstrap allows for a secondary text which is smaller text with less emphasis than the heading and
in order to use the secondary text we simply have to add the small tags around whichever text you want
to make secondary and so you can see we've done that for a number of items here right from heading each
one to H six.
We've added small tags around the text secondary text and that is what it looks like here.
We can highlight text using the mark tags so we've placed the mark tags around the word highlight in
this paragraph.
And
this is what it looks like.
Highlighted
we can also create a dotted underline with a tooltip as you see here using the APB our tags be placed
these tags around the word underline so you can see that we do have the dotted underline the tooltip
that appears we've put the word explanation in there just for demonstration purposes and you can do
that by adding title equals and in our case it's explanation but you can put in any text you wanted.
Next we have block quotes block quotes allow us to place emphasis on quotes using the block quote tag.
And that's this tag here.
The open blackboard tag has an ending.
Sorry a closing block or tag.
This is what a block looks like.
You can see the format of the of the block.
We can add a footer to a block or using the footer tag.
And in order to do this you need to nest the open and close footer tag inside the block wall and that's
what the footer looks like here.
BLOCK votes can be reversed by attaching a block quote reverse class to a standard block quote tag
and this is what the reverse block will format looks like here
we can use the code tags to highlight text in our HDL page so here is we have a paragraph of text here
and you can see that we've applied the open and closed code tag around a few words and this is what
it does.
You can see we've placed a code tag around div section in span
coattails are typically used when highlighting blocks of code
the K.B. D tags allow us to emphasize keyboard shortcuts and in this example we've placed an emphasis
on the control v command so you can see the K MIDI tags here.
Replace them around control plus V the text and this is what appear what it appears like in our web
browser.
The Prix element allows us to display text exactly as it appears in the HDMI document.
Typically whitespace is ignored when viewing an HD male page in a web browser so you can see here we
have whitespace here.
We also have line breaks so the text jumps to new lines in the HMO code.
Now typically our web browser would ignore this the whitespace but using the Prix element it preserves
all whitespace including line breaks.
So it shows up exactly how we would appear or does appear in our case and in the HDMI code
contextual classes allow us to add color to our text.
See here you can see that we have a variety of different lines of text and we've applied different classes
to this text so you can see we have new to text important text success text and so on and so forth.
You can also see the corresponding classes on the left here
and similarly we also have contextual background classes and this will highlight the text in different
colors depending on which class is used so it's very similar to contextual classes.
But this time you can see that the entire area is highlighted
so the class name for the first item is BJP primary and that highlights the text in blue BJP success
highlighted in green and so on.