The Demo
The Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> </head> <body> <div class="container"> <h3>Bootstrap 4 buttons with outline class</h3> <button type="button" class="btn btn-outline-primary">btn btn-outline-primary</button> <button type="button" class="btn btn-outline-secondary">btn btn-outline-secondary</button> <button type="button" class="btn btn-outline-success">btn btn-outline-success</button> <button type="button" class="btn btn-outline-info">btn btn-outline-info</button> <br /><br /><br /> <button type="button" class="btn btn-outline-light">btn btn-outline-light</button> <button type="button" class="btn btn-outline-dark">btn btn-outline-dark</button> <button type="button" class="btn btn-outline-danger">btn btn-outline-danger</button> <button type="button" class="btn btn-outline-warning">btn btn-outline-warning</button> </div> </body> </html>
Bootstrap 4 buttons with outline class
btn btn-outline-primary
btn btn-outline-secondary
btn btn-outline-success
btn btn-outline-info
btn btn-outline-light
btn btn-outline-dark
btn btn-outline-danger
btn btn-outline-warning