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
How to create outline button in Bootstrap 4
Overview
Bootstrap is a Cascading Styles Sheet (CSS) framework which provides us with a different style and layout of buttons. So to use the bootstrap buttons we need to import the Content Delivery Network (CDN) link of bootstrap to our HTML document, the link can be imported from the official page of bootstrap. The official page provides the link in various bootstrap versions. To create the outline button using the bootstrap we need to import the certain classes to our HTML element. These classes are btn, btn-outline-colorName. We can change the color of the button by replacing the colorName with primary, success, warning, danger, info, secondary, light and dark.
Syntax
The syntax to create a button using bootstrap is shown below. The color name will be changed with the name of the color of the button and buttonName will be changed with any text that you want to add to the button.
<button type="button" class="btn btn-outline-colorName>buttonName</button>
Content Delivery Network (CDN) Links
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Algorithm
Step 1 − Create a HTML file on your text editor with the HTML boilerplate in it.
Step 2 − Now link the above given CDN link to the head tag of the HTML document.
Step 3 − Now create a div container which contains all the types of HTML outline buttons.
Step 4 − Now create a HTML button.
<button type="button">Submit</button>
Step 5 − Add the class attribute to it. To create the bootstrap outline button use the class name as “btn btn-outline-primary”.
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light text-primary">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
Step 6 − If you want to add more buttons of different colors then repeat step 5 and just change the color name to it.
Step 7 − The bootstrap outline buttons are created successfully and ready to use.
Example
In this example we have created the entire bootstrap outline button using the bootstrap classes. These classes are pre defined and can be used by any developer.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title> outline button using bootstrap </title>
</head>
<body style="width: 100vw;">
<h3 class="text-center text-success">tutorialspoint.com</h3>
<p class="text-center text-success">(using btn-outline class)</p>
<div class="d-flex flex-wrap justify-content-center pt-5" style="gap: 2rem;">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light text-primary">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
The given below image shows the output of the above example. It contains all the colors of the outline button. When the user brings the cursor onto the button it changes its background to the color of its outline.
Conclusion
As in the above examples we have used the bootstrap classes with a HTML button tag, but it is not restricted to us we can also use these classes to any of the HTML div elements. The only thing is that whatever element would be on adding the bootstrap classes of the outline button it will give the property of the button to that element. The bootstrap is good to use with your projects as it saves your time in designing the layout of the project.
404 Views
To Continue Learning Please Login