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