Hello and welcome to this lecture.
In this lecture we will be creating a simple progress bar using bootstrap.
This is the progress bar we'll be creating using bootstrap growth.
Bars are useful course the key.
Use a guy haas to how far he or she has left in the process.
For example today could be plugged in an image or done lowder's something deprogramme by gives them
a guide us to all their progress to begin.
I have got my Some poor basic skeletal template here.
I've got all my references to Louis bootstrap library on Maxy the in halcom I see SS and I'm on my Jav
us Jav us group mini 5 version have also got access to my g query library hosted by Google see the.
I've got all my links in place to the libraries so I just need to concentrate on my code.
So in my code we call in-between this body tag here so let me start writing the code and I will explain
that.
I have got my code in-between the body tag.
I started off with a diff.
This would be the container div that will wrap all the content but trap is always useful to enclose
your content in a container so that it might contain a D and then I went in to define a heading tag
with a hitchon tag here and then paragraph tag just to define what the worst part is and then created
on another div within that div call progress.
So this class is called progress and then in between that DB I created on another div nested inside
chord class.
I give you a class B name.
OK that is progress does bar progress but success progressed dashed past Tracht got three values.
So progress bar.
And this is the label problem that bars success ambits.
And it's this striped request buys buys a big stripe.
So these are the properties of the class and then I've given it a rule of progress bar.
I've given it a value of 40 and given a mean value max value and giving it style of 40 percent that
is 40 percent of its peer to contain and this 40 percent.
Thus the message that will be or text that will be displayed in the progress.
But so go the three days we are ready.
Let me save this and run and then will have a look.
While it looks like launching Chrome.
Right so this is what the progress bar looks like.
I'm going to apply background colour to the body just to make it more pronounced.
I have had this far here in between the thumbtacks.
Ideally I should use it and externals Tal shit but because this is a quick demo I just use an internal
one is said so given the entire body.
Background colour black and detect colour of white so let me say that.
And then we can run it see what it looks like.
Okay so it looks more defined now pronounce So this is what a progress bar looks like.
He can see how simple it was news in Bootstrap because they provided most of the styling and the framework
for the progress.
But in this video we created a scene poor striped progress bar using the bootstrap progress bar component
the progress bar is a component of the bootstrap framework we used to create a simple striped progress
bar.
There are different probers bars you can create.
You can create animated ones play or ones and different coloured contextual types using bootstrap.
Thank you so much for watching.
You can easily incorporate this into any web projet you are doing so much for watching.
Take care.
Bye for now.