Bootstrap code blocks Video Lecture - Learn Bootstrap From Basics to Building

this is part 13 of bootstrap tutorial in
this video well discus tiling code
blocks using bootstrap here are the
bootstrap tags available for styling
code blocks for styling inline snippets
of code use the code tag for styling
multiple lines of code pre tag for
styling variables fare for styling
sample output si MP and for styling
keyboard input KBD
let's look at a few examples now let's
first look at styling inline snippets of
code here's an example notice the first
line right here to highlight text use
mark tag mark tag in this line is styled
using the code tag similarly you and
strong tags are also styled using the
code tag let's now look at the HTML
required notice within the paragraph
element we have to highlight text use we
have the code tag and then within that
we have this word mark look at what we
have on the left and right-hand side of
that word on the Left we have ampersand
LT semicolon these four characters give
us less than angle bracket and on the
right we have M % GT semicolon these
four characters are going to give us
greater than angle bracket LT stands for
less than G T stands for greater than I
have this exact same HTML already typed
within visual studio and when we view
this page in the browser this is how it
looks like
notice how mark U and strong tags are
styled using the code tag one very
important thing to keep in mind is that
angle brackets must always be properly
escaped for proper rendering if you
wondering what's going to happen if we
don't escape angle brackets let's look
at that in action at the moment we are
escaping angle brackets using ampersand
LT semicolon and ampersand GT semicolon
instead of escaping them let's use the
angle brackets themselves so I'm going
to use less than angle bracket and
greater than angle bracket look at what
has just happened
we now have a mark tag nested inside
code tag so let's save our changes and
when we reload this page notice a dent
work as expected and let's remove this
closing mark
aggghhhhh now look at that inside the
code tag we have this word mark and then
we have less than and greater than angle
brackets let's say what changes reload
the page notice even now it's not
rendered as expected that's why it's
always important to escape angle
brackets for proper rendering
now let's discuss styling multiple lines
of code let's look at an example notice
how these three lines of code are styled
to style multiple lines of code use the
pre tag let's look at the HTML required
for this notice within the pre tag we
have those three lines of code and
notice how the angle brackets of strong
you and mark tags are escaped let's look
at this in action within the pre tag we
have those three lines of code when we
reload this page those lines of code are
styled as expected but if you look at
the code right here notice these lines
of code are not properly indented the
first line starts right here second
third and fourth lines start right here
now if I try to move them just below the
first line we are introducing white
spaces on the left-hand side of these
three lines we also have line breaks
here so let's save this changes and when
I reload this page notice in the
rendering we also have those white
spaces and line breaks so it's very
important to remove any unnecessary
white spaces and line breaks when using
pre tag because those white spaces and
line breaks will also be included in the
rendering now let's look at another
example of styling multiple lines of
code what we want to do now is set a
maximum height of 350 pixels for the
code block and if your code block is
beyond that then we want to provide a
y-axis scrollbar as you can see here
let's look at this in action let's flip
to visual studio so I'm going to use
another pre tag and within this pre tag
now we have a huge c-sharp program so
let's save these changes and when we
reload this page
notice we have that c-sharp program it's
a huge one now what we want to do is set
a maximum height for this code block and
since our program is beyond that code
block height we want to provide a y-axis
scroll bar like this to achieve this we
simply have to use a class provided by
bootstrap on this pre tag and that class
is pre scrollable let's save our changes
and when we reload this page now look at
this the maximum height of this window
is 350 pixels
since our c-sharp program is larger than
that we get a scrollbar now we can use
that scroll bar to see the complete
program and here is the HTML required
for that let's now discuss styling
variables - style variables we use the
VAR tag notice how these three variables
full name first name and last name are
styled let's look at this in action so
here notice we have the variables full
name first name and last name inside
pair tags so let's see if these changes
and when we reload this notice how the
variables are styled using those wear
tags is that same HTML which we have
seen just now let's now discuss styling
sample output let's say for example you
have a c-sharp program and that c-sharp
program is displaying these two words
hello world and you want to style that
output using bootstrap to do that we use
the SI MP tag let's look at this in
action notice here within the h4 tag we
have this word output and this is the
output of our c-sharp program that we
want to style so we are placing that
inside si MP tag let's save our changes
and when we reload this page notice how
the output of our c-sharp program is
styled using the si MP tag here is that
exact same HTML
finally let's discuss styling keyboard
input let's look at an example with
visual studio the keyboard shortcut for
commenting code is ctrl K and ctrl C for
uncommenting ctrl K and control you
notice ctrl K C and you all these are
keyboard inputs to style keyboard inputs
with bootstrap we use the KBD dad let's
look at the HTML required for this
notice ctrl K C and you all of them are
inside KVD tags and this is what is
making them render as you see here let's
look at this in action so I have the
exact same HTML that we have seen on the
slide let's save our changes and when we
reload this page notice how ctrl K ctrl
c ctrl K and control you or rendered
since they are inside the kbd tag they
are styled by bootstrap as you see here
thank you for listening and have a great
day