- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set less important stuff with grey outlined Bootstrap 4 Button
To set less important stuff in Bootstrap, use the btn-outline-secondary class.
The outline is applied on a button and a green color is applied using the same class −
<button type="button" class="btn btn-outline-secondary"> Tools (Secondary Outline) </button>
Above, I have set the btn-outline-secondary class as any normal class set on any element, which is button here.
You can try to run the following code to learn how to set grey outline Bootstrap Button −
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <h2>Web Tools</h2> <p>The following are the Tools:</p> <ul class = "list-group"> <li class = "list-group-item">JSON Editor</li> <li class = "list-group-item">XML Editor</li> </ul> <p>For more, click below:</p> <button type="button" class="btn btn-outline-secondary"> Tools (Secondary Outline)</button> </body> </html>
Advertisements