CODEWITHSUNDEEP
cssbootstrap-4
NibblyPig
NibblyPig

Reputation: 52942

Having trouble getting circular buttons in bootstrap 4

I used this fiddle directly in my code. The idea is to create a circular button.

https://jsfiddle.net/yeyene/59e5e1ya/

This code is for bootstrap 3 though. When using it referencing bootstrap 4, the button is square rather than circular. Here's an example:

https://jsfiddle.net/NibblyPig/fsedc5p6/

The CSS that it is applying is:

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

As with all buttons I set the classes to btn and btn-success (or similar) as well as this class too.

Checking the inspector, it is definitely applying this, however something must be overriding or changing this behaviour because it still appears square.

I am unable to find any explanation or working code via google that will produce a circular button in bootstrap 4. Is there any advice?

Upvotes: 1

Views: 1942

Answers (4)

jerryurenaa
jerryurenaa

Reputation: 4704

Maybe you can just do a bootstrap trick that always work. Here is how

button class="btn btn-success rounded-circle"> $$ </button>

basically just add rounded-circle to the class.

Upvotes: 2

Sai Manoj
Sai Manoj

Reputation: 3849

If you are using <button></button> then Just add border-radius:50%!important and padding: 1.375rem 0.75rem!important; to .btn.

.btn {
  border-radius: 50%!important;
  padding: 1.375rem 0.75rem!important;
}
<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.4.0/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>

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

Upvotes: 0

m4n0
m4n0

Reputation: 32275

It is because the .btn-success was overriding with a border-color. You can target them both using .btn-success.btn-circle. Also try to override the hover styles.

Added CSS:

.btn-circle.btn-success {
  border-color: transparent;
}

.btn-circle.btn-success:hover {
  border-color: transparent;
}

JSfiddle Demo

Upvotes: 3

Sumit Patel
Sumit Patel

Reputation: 4638

Need to Update -webkit-appearance: none;

Check the fiddle https://jsfiddle.net/f46ab37x/

Upvotes: 0

Related Questions