How to get circular buttons in bootstrap 4 ?

Last Updated : 08 Jul, 2019

It is an open source toolkit for developing with the HTML, CSS, and JS. It includes several types of buttons, styles, fonts each of them serving its own semantic purpose which is predefined, with a few extras thrown for more control. You can use Bootstrap custom button styles to create your buttons and more with support for multiple sizes, states, and more. Bootstrap does not provide any circular buttons by default. If we want to include circular buttons in a web page then with the help of Bootstrap 4 and a little bit of CSS, you can create your own circular buttons for your web page or application. Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to get circular buttons
        in bootstrap 4 ?
    </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.3.1/css/bootstrap.min.css"> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
      
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script> 
    
    <style type="text/css">
        h1 {
            color:green;
        }
        .xyz {
            background-size: auto;
            text-align: center;
            padding-top: 100px;
        }
        .btn-circle.btn-sm {
            width: 30px;
            height: 30px;
            padding: 6px 0px;
            border-radius: 15px;
            font-size: 8px;
            text-align: center;
        }
        .btn-circle.btn-md {
            width: 50px;
            height: 50px;
            padding: 7px 10px;
            border-radius: 25px;
            font-size: 10px;
            text-align: center;
        }
        .btn-circle.btn-xl {
            width: 70px;
            height: 70px;
            padding: 10px 16px;
            border-radius: 35px;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>

<body class="xyz">
    <h1>GeeksforGeeks</h1>
    
    <h4>Normal Circle Buttons</h4>
    <button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
    <button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
    <button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
    <button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
    <button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
    <button type="button" class="btn btn-light btn-circle btn-sm">White</button>
    <button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>

    <h4>Large Circle Buttons</h4>
    <button type="button" class="btn btn-primary btn-circle btn-xl">Blue</button>
    <button type="button" class="btn btn-secondary btn-circle btn-xl">Gray</button>
    <button type="button" class="btn btn-success btn-circle btn-xl">Green</button>
    <button type="button" class="btn btn-danger btn-circle btn-xl">Red</button>
    <button type="button" class="btn btn-warning btn-circle btn-xl">Yellow</button>
    <button type="button" class="btn btn-light btn-circle btn-xl">White</button>
    <button type="button" class="btn btn-dark btn-circle btn-xl">Black</button>
</body>

</html>

Output:With the help of the following code we can easily add circular buttons using Bootstrap 4. Following is an image of the various kinds of circular buttons obtained.

How to create block level buttons in Bootstrap ?

Choco_Chips

Improve

Article Tags :

How to get circular buttons in bootstrap 4 ?

Similar Reads

Thank You!

What kind of Experience do you want to share?