Hey, in the previous video, we built this front end here, which has these series of widgets and now
we want to add bootstrap to our project.
Bootstrap is a CSS library, so CSS is a language that adds style to HTML elements.
So we want to work on the index.html code.
The very first thing we want to add here is a link element inside the head elements.
So we have the head tag here and the closing head tag in here.
So we want to add to add the link and inside link here you want to say rel stylesheet.
So we want to specify where the stylesheet is located.
The stylesheet should be a file which contains CSS code.
So you can put that file inside static here.
So create a file and say something like main dot CSS.
But we don't want to do that.
We want to use a remote file which has been written already.
So that is the bootstrap library and that remote file is located in https CDN dot JS deliver.
You can find this link attached in the lecture resources.
So I'm also going to copy that link and paste it here.
So that's a complete link element.
So it should look like this.
So the name of this file is min dot CSS and this file is stored somewhere on a remote server.
If you're curious, you can copy that link and just paste it here, reload and what you'll see is CSS
code.
So all that now that contains classes.
So all that code actually parts of that code can be used in our HTML script.
How?
Well, for example, let's start with the H1 tag here.
So we want to work inside the body tags, right?
So in the H1 tag, you want to add a class attribute which is equal to empty dash for space and B dash
for.
And if you go to the web page and refresh it, you'll see that this changes to something else.
So what we just did is we specified the margin for the top and the bottom of the H1 tag.
And so these are bootstrap classes.
We can apply classes for other objects as well.
One important class is the container class, which applies to the entire content.
So the entire content is inside the body tags.
And to apply that class to all our elements, we need to add here a main div tag.
Div.
Right.
And this should be closed somewhere before the body tag here.
Here.
So you open the just under the opening body tag.
And you close the div just above the closing body tag.
Right.
And then you want to select that div the entire elements up to here.
So everything in between the body tags you want to select and press tab to indent it.
Things will still work if you don't indent it, but indenting makes the code readable more readable.
So now we add here a class is equal to container.
And if you refresh the page.
So you can see that now we have some margin here on the left.
So the app is starting to look better already.
Let's add some more classes, bootstrap classes.
The div under the form we want to add a class is equal to form group.
And be for.
Let's refresh the page.
And so this is what we've got.
So we've got some spacing under the first name, right?
So we just changed the div of the first element, which is the first name, this one here.
So we added some margin at the bottom and means margin bottom.
And this here is also a class, a bootstrap class, which specifies some other styling for group elements.
Let's do the same for the other.
Widgets last name.
So class is equal to form group and before same goes for the other one email.
So I'll just copy this div and just replace this div of the email.
So there we go.
The other div of the date class of the date element.
There we go.
And lastly in here, so the div just above the label current occupation.
So current occupation.
Here is the div.
We want to replace that with this div or you just type in the class, whatever you prefer.
And so yeah, that's it, let's see what we've got.
So we have some spacing between the elements.
So that's looking better now and what's next?
Well, next is you see we have the first name label, the last name label just next to the fields.
We want to put the first name label above its corresponding field, and same for the other labels as
well.
To do that, you should go to each input element, input type, text ID, first name, and in here you
want to add class is equal to.
Form control.
All right.
So let's see the change here for first name.
You see now, first name is on top here, the label.
And then we have this input box, which looks quite better.
So you see the highlighting when I put the cursor here that's different from this one down here.
So that's much better, more visually appealing.
I'll say, Let's do the same for the last name input element class is form control.
Write the email as well.
Class is form control, so make sure you are putting the class inside the input element, not inside
the label.
Same for the date class is form control.
And then we have the radio buttons, which should should take something else.
But let's refresh the page for now.
So there we have first name, last name, email available start date.
So that's looking good.
Now this once here, we can change them to something else, to another style.
We can make them vertical.
You want to go below B or in this div which has the ID occupation.
So this div contains all those radio buttons.
Right now, inside this div we want to add a class of BTN group vertical.
Oh, in quotes.
So BTN dash group dash vertical.
And if you refresh the page now, you will be able to see the buttons stacked vertically.
However, the labels are down here, so let's improve that further.
You want to go to the first input element of the first radio button and you want to add a class of BTN
Dash check space form control.
So two classes, BTN Check and form control.
And you also want to apply a class to the label element.
Class is equal to quotes, BTN, BTN, outline secondary and let's go and refresh the page.
So this is what we've got here.
So that circle was transformed into this toggle button style for this radio button.
And so we have this one and these three, let's make all of them the same.
So I want to copy that class and paste it in the other radio button here, right in the other one.
So I'm working on the input elements first here as well, and then I'll get the class of the label elements.
This class paste it in here, space between the class and the four attributes for this label as well.
And this one as well.
Right.
Let's see.
Yeah, there we go.
So now we can select one of them.
Let me zoom out a bit.
So that is looking good.
And let's finish the submit button as well.
So that is looking good.
Let's also stylize the submit button.
So we locate the button element and we add a class.
BTN.
So BTN is the class that specifies a certain style for buttons.
So basically you're telling the HTML document that this button should be styled according to the BTN
class.
So in the bootstrap CSS file, which I showed you earlier, this class is defined and the attributes
of this class are written in that document.
In that document.
So for example, that the button should have rounded corners and the text should be this far from the
borders of the button and the font family should be this and that.
So when you say this, you are you are basically specifying all those properties, the round corners
and so on.
So instead, instead of writing those manually, you just call this class.
And so that means your button will look good according to the bootstrap standards.
And then you also have things like BTN Dash secondary.
This specifies the color in this case of the button.
So we also use this for this one here you'll see the difference.
So let's go and refresh.
You see now with that secondary option, the button is filled in grey color or but when you say BTN
outline secondary, the button is not filled, but the outline is gray.
So that's the difference here.
I would also like to add and for for this button, so some margin below.
So there we go.
So that the button is not close to the border of the web page.
Now we have some more space down here.
So that's about it.
But we need to add two more elements here, and that is just before the body tags.
So down here, before the body closing tags we want to add.
These two, which you can find attached in the lecture resources.
So this too, will make it possible to show like a notification message here when the user presses the
submit button.
So basically these specify links to JavaScript code which is needed to display that notification message.
So that's the completed script.
I do believe that this looks better now.
I know that it is subjective.
The style is a bit subjective, but we can all agree that this looks better than before.
So thanks a lot for following.
I'll see you later.