How to create a bootstrap circled button with the text centered

Question

I am trying to add a button for numbers a round button. I am able to do it but the text(number is not centered). Ideally if i have 1 to 15 circular 15 buttons from 1 to 15

Code below

body {
  padding: 1em;
}

<link
  href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
  rel="stylesheet"
  id="bootstrap-css"
>


<button type="button" class="btn btn-info btn-circle btn-lg">100</button>

The above code is used from this link

This question is not about how to center text in general, but with bootstrap. As the first answer shows you can accomplish this by simply adding css classes, voted to reopen. — Justin Tanner, Feb 17 '22 at 17:14

score 6 · Answer 1 · answered Dec 24 '20 at 16:47

A very simple class will solve your problem-

<button type="button" class="btn btn-info p-5 rounded-circle btn-lg">100</button>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <style>
    body {
  padding: 1em;
}
  </style>
  
</head>
<body>

<button type="button" class="btn btn-info p-5 rounded-circle btn-lg">100</button>

</body>
</html>

score 3 · Answer 2 · answered Dec 24 '20 at 16:23

These changes will produce circular buttons with centered text:

include the .btn-circle css rules from the link you provided,
wrap the button text in a span and give the span negative margins.

body {
  padding: 1em;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}


/* use negative margins to accommodate wider button text */

.btn-circle span {
  margin: 0 -2rem;
}

<link
  href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
  rel="stylesheet"
  id="bootstrap-css"
>

<button
  type="button"
  class="btn btn-info btn-circle btn-lg"
><span>100</span></button>

score 1 · Accepted Answer · answered Dec 24 '20 at 16:29

You have to include the CSS for .btn-circle to have the rounded corners. I copied the CSS from the link you provided and removed all padding so the text is centered. This will result in:

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0; // changed
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 0; // changed
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 0; // changed
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-circle btn-lg">100</button>

score 0 · Answer 4 · answered Aug 16 '23 at 13:14

For Bootstrap 4, I needed circular buttons and their size had to match the height of the default buttons, or the height of inputs - for inline forms.

I've used the following code:

SCSS

$btn-height-border: $btn-border-width * 2;

$btn-circular-height: add(
  $btn-line-height * 1em,
  add($btn-padding-y * 2, $btn-height-border, false)
);
$btn-circular-height-sm: add(
  $btn-line-height-sm * 1em,
  add($btn-padding-y-sm * 2, $btn-height-border, false)
);
$btn-circular-height-lg: add(
  $btn-line-height-lg * 1em,
  add($btn-padding-y-lg * 2, $btn-height-border, false)
);

.btn-circular {
  width: $btn-circular-height;
  height: $btn-circular-height;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  border-radius: 50% !important;
  line-height: 1;
  
  &.btn-sm {
    width: $btn-circular-height-sm;
    height: $btn-circular-height-sm;
  }

  &.btn-lg {
    width: $btn-circular-height-lg;
    height: $btn-circular-height-lg;  
  }

}

Codepen: https://codepen.io/andreivictor/pen/vYvBJKB

How to create a bootstrap circled button with the text centered

4 Answers4

Linked