Bootstrap allows for many different buttons dials.
The first row in this example provides an illustration of what the different button classes look like.
In our HMO code on the left side we can see how each button was created.
We start with the open button tag and this is in reference to the first button here.
The default button
after the button tag we specify the type attribute which in this case is button and next.
This is the important part for the styling.
We specify the two classes button Beatty and end button default button default gives this type of button
styling.
Next we just specified the label for the button which in this case is default.
And lastly we close the button element tag for the remaining buttons in this block of code.
All we've done is updated the Button class and button label so you can see here for the second button
we've changed one of the classes to button primary and updated the label as well.
Two primary if you wanted something different displayed on the button you could simply go and change
the label
or save the file.
And once a refresh we can see different text displayed in the button.
The third button uses the button success class followed by button in full warning danger and button
link button link creates this type of an effect it's a text link which is underlined on mouse over
bootstrap.
Oh also allows us to apply.
Button classes two elements such as input elements and submit buttons we can see an example here.
The first item is a link element.
You can see that with the Open a tag enclosing a tag.
In this case the element the link element has been assigned the class button and button info.
We also need to specify the button or sorry the role which in this case equals button and when we do
that.
This is the type of button that's created and so you can see that we've converted a link element into
a button format.
Next we have the input button so you can see the open input tag.
We specify the type button type and we've also specified the class which in this case two classes button
and button primary and so you can see we've applied.
This is the type of style that's created to an input when you apply these two classes.
Next we have a submit button or sorry submit input and we've applied to classes again button and button
warning and this is the different.
This is the type of input style we get from those two classes now keep in mind that the value is just
the tax that's outplayed on the button itself.
So if we wanted to change that we could not receiving or just refresh then you can see that the label
changes
we can change the size of the buttons by adding the button size class.
Here we have our first button said to button large so Beatty and dash LG and that produces the the largest
button size followed by button medium small and extra small and you can see the output on the right
hand side here.
We can create block level buttons using Booth a block level button spans the entire width of the parent
element.
So in this case the pyramid the parent element is a fixed with container.
So there you can see the parent class equals container
K and to create a block level button you just need to apply the button Dash.
BLOCK class so here we have button button primary.
And the third class button.
BLOCK And so that's what that looks like there.
You'll notice that the other block level buttons are larger or sorry.
The second one is larger and the other one is smaller.
And that's because we've specified the size.
So on the second block level button we've just created another class which is button large
in the primary the button primary is as we explored previously is the bluish button button.
Default is the clear button.
And so you can see all the different classes we've applied here.
Button button primary button large and button block and that's produced this large block level button
here
these two block level buttons were created in the same way.
All we've done is changed from button large to button small as you can see here
we can create disabled or active buttons so you can see here that this button is unthinkable meaning
it's disabled and on the left.
This button is active so on the left hand side in the cold we can see that we've applied the Button
class button primary and also active.
So the active class gives it a little bit more of a highlight.
It's it's like the darker blue than the primary class which is over here now disabled.
You can see in the second button we've created the different classes Button Button primary and disabled.
So by adding the disabled class this is the effect you get.