Bootstrap 4.0 in Urdu/Hindi - How To Change Button Styles in Bootstrap 4.0 - Video 6

What Will I Learn?

• How to apply different styles/colors to buttons
• Using button classes in link, button and input elements
• How to use Bootstrap 4.0 classes to create outline/bordered buttons
• Button sizes in Bootstrap 4.0
• How to make block level buttons
• How to create active and disabled buttons

Requirements

• Basic HTML and CSS knowledge is required
• Text editor (Brackets, Sublime etc.)

Difficulty

Intermediate

Description

In this tutorial, I explained the classes available in Bootstrap 4.0 to create different styles of buttons in detail. We can also use these classes in input and link elements. In addition to that, I have explained how to create outline/bordered buttons, different sizes of buttons, how to make block level buttons and active/disabled buttons.

Button Styles


.btn, .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light


Button Outline


.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger, .btn-outline-dark, .btn-outline-light


Button Sizes


.btn-lg, .btn-sm, .btn


Block Level Buttons


.btn-block


Active and Disabled Buttons


.active, .disabled


Video Tutorial

Github Repository

github.com/twbs/bootstrap

Curriculum

Bootstrap 4.0 in Urdu/Hindi - What is Bootstrap? CDN and Downloading Bootstrap 4 - Video 1

Bootstrap 4.0 in Urdu/Hindi - How To Use Bootstrap 4 Grid System and Container Classes - Video 2

Bootstrap 4.0 in Urdu/Hindi - Typography in Bootstrap 4.0 and How to use Text Colors and Background Colors classes - Video 3

Bootstrap 4.0 in Urdu/Hindi - How To Use Table and Contextual classes in Bootstrap 4.0 - Video 4

Bootstrap 4.0 in Urdu/Hindi - How To Use Image Classes In Bootstrap 4.0 (Shapes, Alignment and Responsiveness) - Video 5

---

Posted on Utopian.io - Rewarding Open Source Contributors

---