Bootstrap panel Video Lecture - Learn Bootstrap From Basics to Building

this is part 31 of bootstrap tutorial in
this video we'll discuss the bootstrap
panel component here we have the list of
classes that are useful when creating
panels panel class creates the panel
panel default this class applies the
default contextual styling to the panel
other contextual state classes like
panel primary success info etc can also
be used we also have classes for
creating panel heading title body and
futa let's look at these classes in
action let's create a panel with a
header body and footer let's flip to
visual studio now what we have here at
the moment is some text content so if we
view this page in the browser this is
how that text content is rendered by
default let's wrap this content inside a
panel so to create a panel all we need
to do is create a development with class
set to panel now let's move this text
content inside this panel let's also use
panel default class to apply the default
contextual styling let's save our
changes and when the reload our page
notice the content is now present inside
a panel but there is no pairing between
the panel border and the text content so
let's move this text content inside
panel body to create panel body we need
to create a development with class panel
body
let's move this content inside panel
body now when we reload this page we get
the padding as expected
let's also include a heading for our
panel to include a heading we create a
development with class panel heading our
heading is going to be what is strap now
when we reload our page notice we get
the heading let's place this heading
inside an h3 element
and let's set its class to panel title
notice now we get a different style
let's also include a panel footer to
create a panel footer we create a
development with class panel footer and
within the footer let's display regime
tech let's say your changes reload the
page notice we also get the panel footer
now at the moment we are using panel
default class which applies the default
contextual styling if you want other
contextual Styles you can also use other
contextual state classes like panel
primary so panel primary would give us
this color and similarly we can also use
panel info and that would give us this
color we can also use other contextual
state classes here is the HTML now let's
discuss an example of including tables
inside panels so we want to place a
table between panel body and panel futa
so let's flip tuitions to do so between
panel body and panel footer let's create
a table let's set its class to table and
inside this table element we need to
create table header and table body in
the interest of time I have already
copied the required HTML to the
clipboard so I'm going to paste it right
here so inside this table element we
have a table head so within table head
we have ID first name last name and
email and we have table body here we
have three rows where we have values for
ID first name last name and email so
let's save our changes when we reload
this page notice we get a table between
panel body and footer as expected and
here is the HTML for that thank you for
listening and have a great day