I am trying to create circle buttons using Bootstrap but its not working as it should be. Here is what I am doing:

<button type="button" class="btn btn-default btn-circle">4</button>

And it is showing the result like this:

I referenced this website. my version of bootstrap is 3.3.5. Any help?

I am trying to create circle buttons using Bootstrap but its not working as it should be. Here is what I am doing:

<button type="button" class="btn btn-default btn-circle">4</button>

And it is showing the result like this:

I referenced this website. my version of bootstrap is 3.3.5. Any help?

• javascript
• css
• twitter-bootstrap

• 2 just add border-radius to 50% – Amit singh Commented Sep 15, 2015 at 7:08
• Did you include the css? I'm not sure this is standard, could be wrong though – StudioTime Commented Sep 15, 2015 at 7:09
• Check for any overridden CSS. – m4n0 Commented Sep 15, 2015 at 7:10
• Border radius worked magically. Thanks @Amit Singh – Saani Commented Sep 15, 2015 at 7:11
• @Amit singh, put this in the answers so that i can accept it. – Saani Commented Sep 15, 2015 at 7:16

4 Answers 4

Just do this..

CSS

.btn-circle {
 border-radius: 50%;
}

You can check with the below link.

Fiddle

    .round-button {
    width:25%;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #cfdcec;
    overflow:hidden;

    background: #4679BD; 
    box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
    background:#30588e;
}
.round-button a {
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

try: <button type="button" class="btn btn-circle btn-default">4</button>

You can use this code :

<button type="button" class="btn btn-default rounded-circle">4</button>