How to make round corner button in bootstrap?
June 15, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this article, we will use some bootstrap classes to design round corner button.
To make round corner button, put .btn class to create round corner button in bootstrap.
Bootstrap has it’s own classes for borders including .btn to get rid of rounded corners on any element including buttons.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />Step 3: Define its class name
After that, create round corner with a class name .btn.
<div class="text-center">
<h3>Rounded corners button</h3>
<a class="btn btn-primary">Regular Rounded Corners</a>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h3>Rounded corners button</h3>
<a class="btn btn-primary">Regular Rounded Corners</a>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍
