Update the carousel markers to circular shapes in Bootstarp 5

I have been searching for a solution to change Carousel indicators from rectangles to circles in Stackoverflow, but all the available solutions are for Bootstrap 4. Is there a way to achieve this?

Here is what I attempted:

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 10px; /* modified width */
  height: 10px; /* modified height */
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
  border-radius: 100%; /* added border-radius */
}

Unfortunately, this resulted in:

https://i.sstatic.net/d9G42.png

Changing the height property did not have any effect on the indicators as expected.

htmlcssbootstrap-5

Answer №1

After some adjustments, I was able to achieve circular carousel indicators in Bootstrap by setting the proper width and height along with a correct border radius. Please review the modified code below which worked for me. If you are still facing issues, feel free to share a demo link for further assistance.

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 50%;
}

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

Incorporating fresh JSON information into an established database

I'm currently facing an issue with adding new data (from JSON) to an existing table using jQuery. Within my HTML, there's a sample table structure like this: <table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column ...

javascriptjqueryhtmljsonhtml-table

What could be the reason for an ASP.NET Core application not loading within an iframe on the same domain?

I am facing an issue with my ASP.NET Core MVC website, which is embedded as the src of an IFRAME within a portal. Both the portal and the .NETCore application share the same domain (e.g., site.portal.domain / portal.domain). Upon entering the portal, I en ...

htmlasp.net-mvcasp.net-coreiframe

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Adding new rows between existing rows in an HTML table using Jquery syntax

How can jQuery be used to insert rows between existing rows in an HTML table? <Table id="TEST"> <tr>1</tr> <tr>2</tr> </table> I need to include a new row <tr>xx</tr> between the rows with values ...

jqueryhtmlhtml-tablerow

What is the best way to "leap" a sole transform value within an animation?

I need to create an animation that makes a transform function value "jump" in an animation. Within my @keyframes rule are three percentages with the transform property in each one. I specifically want only the scale to transition from 0.5 to 1 between the ...

csscss-animationscss-transforms

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

javascripthtmlcss

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

Navigating and Organizing in Ionic Service Factory

Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...

javascripthtmlangularjsionic-framework

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

cssreactjsnext.js

Receive the outcome once the form is submitted

Can someone provide quick assistance? I am looking to allow users to upload a CSV file for me to parse and analyze. Once the processing is done, I need to display the results back to the users. While uploading the file, I also need to ensure that the file ...

javascriptjavajqueryhtmljsp

Sending a request to a PHP file using Ajax in order to display information fetched from

I am attempting to display the database row that corresponds with the student's forename and surname selected from the dropdown list. I have managed to store the first name and surname in a variable called clickeditem. However, I suspect there may be ...

phpjqueryhtmlmysqlajax

JavaScript threw an error with message: 'Unexpected identifier' that was not caught

Upon launching Web Developer in Firefox: SyntaxError: missing } after property list note: { was opened at line 7, column 7 ...

javascripthtmljsonajax

Utilizing vanilla JavaScript or ES6 to extract data from a JSON file

I am currently working on an HTML project where I need to extract data from a JSON file that cannot be modified. I am looking to accomplish this using pure JavaScript or ES6, but I am struggling to make it work. Specifically, I am trying to retrieve a link ...

javascripthtmljsonecmascript-6

Place the division at the bottom of the screen

I'm facing an issue where I am trying to place a div at the bottom of the viewport but it's not working as expected. Here is how my current setup looks like: html <div class="parent"> <div class="bottom"> </div> </div&g ...

jqueryhtmlcss

Angular: seamlessly transferring all directives from parent component to child without interference

Imagine we have a component called main that includes another one named sub. I would like for the directive passed to main in the client side, such as: <main dir1='dirval1'></main> for the main component to act as a thin wrapper and ...

htmlangulardirective

Using JavaScript to Transmit URL

Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...

javascripthtmliframe

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

javascriptjqueryhtmlcss

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

javascriptphpjqueryhtmlemail

At times, the animation in SetInterval may experience interruptions

I have created an animation using a sequence of images. The animation runs smoothly with the setinterval function, but for some reason, it occasionally pauses. I've shared a fiddle where you can see this pause happening. Click Here to See the Unwante ...

javascriptjquerycsshtmlsetinterval

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

I am currently working on implementing smooth scrolling into my website using JavaScript. However, I have run into a problem with CSS property scroll-margin-top causing a sudden jump at the end. The CSS I am using for scroll margins looks like this: class ...

javascriptcsssmooth-scrolling