---
title: "Button Styling in Bootstrap"  
description: "Button Styling in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156605/button-styling-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Button Styling in Bootstrap

What is [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) styling in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)? How many button styles are there that we can use?

## Replies

### Reply by Anonymous User

Button styles in Bootstrap are defined with the help of the .btn class to create a nice look and feel button with fewer lines of code. The .btn class can also be used with anchor tags and input tags.

If you are using the .btn class for an anchor tag to create collapsible buttons or any other feature, rather than linking to a new page or other section, you need to provide a proper description of their purpose within the page.

Let's have an example of button in Bootstrap :

```
<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
    <title>Hello, world!</title>
</head>
<body>
    <div class='container'>
        <h2>Bootstrap Buttons</h2>
        <button type='button' class='btn btn-primary'>Primary</button>
        <button type='button' class='btn btn-secondary'>Secondary</button>
        <button type='button' class='btn btn-success'>Success</button>
        <button type='button' class='btn btn-danger'>Danger</button>
        <button type='button' class='btn btn-warning'>Warning</button>
        <button type='button' class='btn btn-info'>Info</button>
        <button type='button' class='btn btn-light'>Light</button>
        <button type='button' class='btn btn-dark'>Dark</button>
        <button type='button' class='btn btn-link'>Link</button>
    </div>
</body>
</html>
```

Output :

![Button Styling in Bootstrap](https://www.mindstick.com/mindstickforums/497156d4-488b-4b5d-9f3d-71c61456a930/images/9ac16b1d-6a08-483c-abc6-d86977d999a9.png)\

Hope this will help you.\

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156605/button-styling-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
