Need help creating perfect round buttons with bootstrap 4?

After incorporating this fiddle into my code, the goal was to design a circular button.

View Fiddle Here

The code provided is for bootstrap 3. However, when using it with bootstrap 4, the button ends up being square instead of circular. See example here:

New Example Here

The CSS being utilized is as follows:

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

Just like with all buttons, I have assigned classes btn and btn-success (or similar), along with this additional class.

Upon inspecting, it does apply this style, however, something seems to be conflicting or altering its appearance, resulting in a square shape.

Despite searching extensively on Google, I haven't been able to find any solution or functional code that would render a circular button in bootstrap 4. Any suggestions?

cssbootstrap-4

Answer №1

The issue occurred due to the .btn-success class conflicting with the border-color property. To resolve this, you can target both classes using .btn-success.btn-circle and also make sure to override the hover styles.

Additional CSS:

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

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

Check out the JSfiddle Demo

Answer №3

If you opt for using <button></button>, simply include border-radius:50%!important and 

padding: 1.375rem 0.75rem!important;
in the styling for .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>

Answer №4

How about trying a simple bootstrap hack that never fails? Check it out:

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

All you need to do is include rounded-circle in the class attribute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

cssresponsive-design

Adjust the background color in HTML emails for dark mode on mobile devices

How can I ensure that the HTML email maintains a normal white background even when mobile dark mode is turned on? I have included the following meta tag and media queries in my code: <meta name="color-scheme" content="light dark"> <meta name="supp ...

csshtml-emailios-darkmodedarkmodeandroid-dark-theme

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

javascripthtmlcssimagemobile

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a browser. <link rel="style ...

phphtmlcssxampphref

How can I arrange individual events in agendaWeek view on FullCalendar.io and then merge them all into one line?

I am using Fullcalendar.io version 2 When I switch to the agendaWeek mode, all my events are displayed on one line in each day square. As a result, the more events I have, the thinner the event blocks become. Is there a way for me to display only one eve ...

javascriptjquerycssfullcalendar

The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line. http://jsfiddle.net/A5Jc7/60/ The HTML structure is as follows: <div> <div class="box1"></div> <div class="box2"></div> ...

htmlcss

Importing images in React for CSS does not function properly

I've encountered an issue while trying to import an image for CSS. I successfully imported the image and used it in the img tag as src={furnitureBG} for testing purposes. Following the documentation, I imported the image and set the path as the value ...

cssreactjsstyled-components

Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...

javascriptjquerycssangularjskendo-ui

Click outside of this popup to dismiss it

I have been struggling to figure out how to make this popup close when clicking outside of it. Currently, it only closes when clicked directly on it. Your assistance in this matter is greatly appreciated. Here is the HTML code: <h2>Popup</h2> ...

javascriptcsspopup

The same HTML/CSS appears with varying appearances

I have encountered an issue where I created two identical pages, with one page calling the other through a link. Surprisingly, my top menubar changes significantly between the two pages, even though the HTML/CSS code is exactly the same. <html> < ...

htmlcssview

What is the best way to hide the jQuery modal I created?

Hello everyone! Currently, I am working on coding a simple JS modal that can be opened and closed smoothly. The issue I am facing is related to adding a click function to (.black-overlay) in order to fade out everything and close the modal. <div class ...

javascriptjqueryhtmlcsszurb-foundation

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

javascripthtmlcssweb

How can I achieve a floating effect for a div element that is contained within another element?

I have a container located within the body of my webpage. This container has margins on the left and right, as well as a specified width. Inside this container, there is a div element that extends beyond the boundaries of the container to cover the entire ...

htmlcssweb

Is the Foundation Orbit image slider experiencing technical difficulties?

Hey there, I've been experimenting with Foundations Orbit media container to create an autoplay image slider using HTML and CSS. While I'm more comfortable with HTML/CSS than JavaScript, I have struggled to find a simple and cost-effective soluti ...

htmlcsszurb-foundation

Maintaining a 3-column grid layout on mobile devices using Bootstrap 4

How can I display 3 columns per row on mobile, desktop, etc. devices? Currently, only 1 column is shown per row on mobile. <div class="container"> <div class="row"> <div class="c ...

twitter-bootstrapbootstrap-4bootstrap-grid

What is the best way to position the bottom block?

I'm trying to create a template that looks like the image below: https://i.sstatic.net/m6q0s.png I managed to position the top square correctly, but I'm having trouble aligning the bottom one - I can't seem to move it to the bottom left co ...

htmlcss

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Eliminate all hover functionalities from the Kendo Menu component in ASP.NET MVC

Currently, I am working on a project and utilizing the Kendo Menu. However, the package includes hover styling that I do not want to use. Is there a way to disable or remove this styling? ...

cssasp.net-mvckendo-uikendo-asp.net-mvc

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

htmlcss

When using the HTML code <p></p>, the empty paragraph tag does not create a line break

We have a .NET application that saves messages in axml format. Our task is to convert these messages into html. After some research, I came across a 3rd party library called "HtmlFromXamlConverter" that does this job, but with one issue: when the axml cont ...

htmlcss