- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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>
- Related Articles
- Set light grey outlined Bootstrap 4 Button
- Dark grey outlined Bootstrap 4 Button
- Set blue outlined Bootstrap 4 Button
- Set warning action with orange outlined Bootstrap 4 Button
- Set positive success action with green outlined Bootstrap 4 Button
- Set less important content with Bootstrap 4 card
- Indicate danger with red outlined Bootstrap 4 Button
- Set a grey border to an element in Bootstrap 4
- Set a light grey border to an element in Bootstrap 4
- Add a blue background color to an element to set key stuff with Bootstrap
- Set key content with Bootstrap 4 card
- Add a grey background color to the Bootstrap 4 card
- Bootstrap 4 Button .btn-outline-warning class
- Bootstrap 4 .btn-outline-success Button class
- Bootstrap 4 Button .btn-outline-primary class

Advertisements