How To Create Round Buttons With Bootstrap 4?

How To Create Round Buttons With Bootstrap 4?

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.

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.

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.

Example:

<!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.

bootstrap html css web-development javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Pricing Table HTML, CSS | Bootstrap 5

Creating a Pricing Table that is responsive in the latest Bootstrap 5 using their example as reference. Using bootstrap we create a pricing table using basic HTML and CSS. Creating Bootstrap 5 template. HTML Pricing Table Header. Pricing List Table. Pricing Card Layout. Pricing Table Column Row Design. Responsive Pricing Table html css. Pricing Table Button

Creating a Login Form using HTML, CSS and Bootstrap 5

Learn how to create a login form using HTML, CSS and Bootstrap 5. Using Bootstrap 5 to create a Login Form HTML CSS. Login Form HTML CSS | Bootstrap 5

Top Neumorphism UI Design Using HTML, CSS & JavaScript

Top Neumorphism UI Design Using Html CSS & Javascript - Neumorphism Effect. Neumorphism Element Using HTML, CSS & JavaScript