🔖 Bootstrap - Buttons and colors

2018 - 03 - 24
🔖 Bootstrap - Buttons and colors
When we build a navbar, there is a button with class .navbar-toggler which is used to open and collapse the nav-items on mobile devices. A navbar-toggler is a special button since it is not quite actually a button class in bootstrap.
1. [.btn] In fact, Bootstrap has a standard class for buttons - .btn . This defines the button object should present itself as a typical button like this: and it is called by:
<button class='btn btn-primary' type='button'>Button</button>

2. [color] The .btn-primary defines the color of the button. There are different colors available such as .*-primary .*-secondary .*-danger etc, where * can be btn text bg etc. For more detail of Bootstrap colors, you take a look at this Bootstrap Cheatsheet . This cheatsheet is very useful, it shows every classes you may come across.
3. [button sizes] In addition to colors, there are classes of different button sizes. If you look for Button Modifiers in the cheatsheet, there are .btn-sm , .btn-lg and .btn-block.
<button type='button' class='btn btn-secondary btn-sm'>
    Small button

<button type='button' class='btn btn-secondary btn-lg'>
    Large button

<button type='button' class='btn btn-secondary btn-block'>
    Button block

4. [disable] In case you wish to prevent users from clicking certain buttons, you can disable it. There is a class disabled :
<button type='button' class='btn btn-danger btn-block disabled'>
    You cannot click this

For more detail of buttons, you can either go through the Bootstrap Cheatsheet or visit the official site at Buttons.Bootstrap


There is no comment yet

New Comment

Please Login to comment