CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Saani
Saani

Reputation: 782

Bootstrap Circle Buttons

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?

Upvotes: 1

Views: 8374

Answers (4)

ZeroToHero
ZeroToHero

Reputation: 64

You can use this code :

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

Upvotes: 0

Amit singh
Amit singh

Reputation: 2036

Just do this..

CSS

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

Upvotes: 7

MagnusRC
MagnusRC

Reputation: 26

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

Upvotes: 0

Steevan
Steevan

Reputation: 826

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;
}

Upvotes: 1

Related Questions