Making Bootstrap Buttons in my previous lesson on Bootstrap i just presented the overview of Bootstrap, in this lesson i am giving full overview on Bootstrap Buttons in Bootstrap Buttons package we have variety of Stylist Buttons , manage the button sizes , active and inactive status buttons, even we can use html elements as buttons
Live Demo
Default Buttons
Bootstrap Buttons Package we have seven types of Buttons by default in our bootstrap css file we have class name like .btn- .btn btn-default( it give a default button without any indication visual effect)
- .btn btn-primary
- .btn btn-success
- .btn btn-warning
- .btn btn-info
- .btn btn-danger
- .btn btn-link
<div class="btn btn-default">Default Button</div> <div class="btn btn-primary">Primary Button</div> <div class="btn btn-success">Success Button</div> <div class="btn btn-info">Info Button</div> <div class="btn btn-warning">Warning Button</div> <div class="btn btn-danger">Danger Button</div> <div class="btn btn-link">Link</div>
Manage Button Sizes
We have four button Sizes- .btn btn-lg
- .btn btn-md
- .btn btn-sm
- .btn btn-xs
<div class="btn btn-primary btn-lg">Primary Button</div> <div class="btn btn-success btn-md">Success Button</div> <div class="btn btn-info btn-sm">Info Button</div> <div class="btn btn-warning btn-xs">Warning Button</div>
Active Disabled Buttons
the Active mode button display pressed mode and Disabled button display unclickable<div class="btn btn-danger btn-lg active">Active Button</div> <div class="btn btn-success btn-lg disabled">Disabled Button</div>
Buttons With Icons
Bootstrap Provides 260 Glyphicons i just used few of icons with buttons<div class="btn btn-danger btn-lg"> <span class="glyphicon glyphicon-heart"></span> Love </div> <div class="btn btn-danger btn-lg active"> <span class="glyphicon glyphicon-trash"></span> Trash </div> <div class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-envelope"></span> Message </div> <div class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-search"></span> Search </div>
Very detailed technical article. We would need a guy like you at Evo Essay for topics like this every once in a while. Please let us know what you think.
ReplyDeleteBeing new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving..find out more School website design uk
ReplyDeleteAwesome work.Just wanted to drop a comment and say I am new to your blog and really like what I am reading.Thanks for the share
ReplyDeleteBootstrap 5 Button component. Catches give predefined styles to multiple catch types. Use MDB custom catch styles for actions in structures, exchanges, and more with help for multiple sizes, states, and then some.
ReplyDeleteYour contents are too straightforward to browse and easy to understand.
ReplyDeleteuser experience design firms