Bootstrap button circle example
May 17, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to create button circle in bootstrap with code example.
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.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
- Includes css in html page
This article will guide you to adding button circle in Bootstrap 4 with example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1" />Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<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>Step 3: Includes css in html page
Here we will use css to create the button circle.
<style type="text/css">
h1 {
color:rgb(230, 76, 71);
}
.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>Step 4: Define its class name
After that, create the button circle with a class name .btn btn-primary btn-circle btn-sm.
<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>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>
How to get circular buttons
in bootstrap
</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:rgb(230, 76, 71);
}
.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>aGuideHub</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> Check the output of the above code example.
All the best 👍
