---
title: "What is an button styles in bootstrap? How many types of button has been used in it?"  
description: "What is an button styles in bootstrap? How many types of button has been used in it?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93858/what-is-an-button-styles-in-bootstrap-how-many-types-of-button-has-been-used-in-it  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 2 minutes  

---

# What is an button styles in bootstrap? How many types of button has been used in it?

What is an [button](https://www.mindstick.com/articles/23268/connect-devices-using-wps-button-on-your-linksys-wifi-router) styles in [bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming)? How many types of button has been used in it?

## Answers

### Answer by Ravi Vishwakarma

in the bootstrap framework, we are seeing the many types of button styles like primary, danger, warning, dark, etc. we are using the outline on the button, only showing the border doesn't show the inner background color. we are making the button in the Html page using the **'.btn'** class for making the button and changing the background color using '.btn-[bootstrap color name]' or **'.btn-* '**. we are creating the outline button then we use the **'.btn-outline-* '** the '.btn' class is always apply on the <a>, <button> and <input> tags. 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.5.2/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<body>
    <div class='container mt-2'>
        <h2>Buttons</h2>
        <button type='button' class='btn'>btn</button>
        <button type='button' class='btn btn-primary'>btn-primary</button>
        <button type='button' class='btn btn-outline-success'>btn-outline-success</button>
        <button type='button' class='btn btn-info'>btn-info</button>
        <button type='button' class='btn btn-outline-warning'>btn-outline-warning</button>
        <button type='button' class='btn btn-danger'>btn-danger</button>
        <button type='button' class='btn btn-outline-dark btn-sm'>btn-outline-dark btn-sm</button>
        <button type='button' class='btn btn-dark btn-lg'>btndark btn-lg</button>
    </div>
</body>
</html>
```

Output ![What is an button styles in bootstrap? How many types of button has been used in it?](https://answers.mindstick.com/questionanswer/c66df537-82e4-487f-b197-12a8cc667e3c/images/109cd13d-8938-4ebd-9ace-78bb78f96a02.png) \


---

Original Source: https://answers.mindstick.com/qa/93858/what-is-an-button-styles-in-bootstrap-how-many-types-of-button-has-been-used-in-it

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
