Is the spacing of the indicators on the bootstrap carousel uneven?

I'm stuck here and trying to figure out why the distance between the bootstrap carousel indicators is not equal.

https://i.sstatic.net/n2MQm.jpg

If you look at the image, you can see the uneven spacing between the 1st and 2nd indicators.

#carousel-example-generic-right .carousel-indicators .active {
    background-color: #990000;
}
.carousel-indicators li {
    width: 12px;
    height: 12px;
}

I made changes to the width and height of each bullet, as well as the active state.

View the working codepen here

Any help with this issue would be greatly appreciated!

csstwitter-bootstrap

Answer №1

Congratulations! Your code is functioning properly.

Just remember to insert the correct version of Jquery before adding the bootstrap files. Refer to the updated instructions below:

UPDATED

Ensure that the version mentioned in the comments is included (not the latest).

As per the feedback received, a screenshot has been added: https://i.sstatic.net/Jmu0l.png

#carousel-example-generic-right {
  background-color: #ccc;
}
.carousel-indicators li.active {
  border: 1px solid #990000;
}
#carousel-example-generic-right .carousel-indicators .active {
  background-color: #990000;
}
#carousel-example-generic-right .carousel-indicators li {
  background-color: #fff;
}
.carousel-indicators li {
  width: 12px;
  height: 12px;
}
.item {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
<!-- jquery 1.11.1  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- bootstrap 3.3.5 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

<div id="carousel-example-generic-right" class="carousel slide white box-shadow-rounded" data-interval="false" data-ride="carousel" style="height:200px;">
  <ol id="aux-box-carousel-pagination" class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#carousel-example-generic-right"></li>
    <li data-slide-to="1" data-target="#carousel-example-generic-right"></li>
    <li data-slide-to="2" data-target="#carousel-example-generic-right"></li>
    <li data-slide-to="3" data-target="#carousel-example-generic-right"></li>
  </ol>
  <div id="aux-box-carousel" class="carousel-inner" role="listbox">
    <div class="item active">
      Slide 1
    </div>
    <div class="item">
      Slide 2
    </div>
    <div class="item">
      Slide 3
    </div>
    <div class="item">
      Slide 4
    </div>

  </div>

</div>

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

Modifying images through resizing and scaling within a flexible web application to accommodate different screen dimensions

With my web application, I have an image that changes in sizes as it calls a different image from the database each time it is viewed. My goal is to make sure this image is displayed responsively on different devices. For smartphones, I want the image to f ...

htmlimagecssresizeresponsive-design

Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...

htmlcsstwitter-bootstrapforms

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

The HTML website appears to be having trouble scrolling on Android devices, however, it functions properly on both iOS and desktop platforms

Hello everyone, I need help solving an issue with my responsive HTML website. It works perfectly on a desktop browser, but when viewed on a mobile device, it gets stuck and won't scroll. Any suggestions on what might be causing this problem? Thank you ...

htmlcssweb

What could be causing the background rainbow animation to malfunction?

.colorful { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: change 10s ease-in-out infinite; } @keyframes change-color { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 10 ...

css

What is the best way to adjust padding within a flexbox layout?

I am attempting to replicate the design of this webpage using HTML and CSS: https://i.sstatic.net/bFVmg.jpg But, I am struggling to adjust the padding for the box on the right side. Here is how my version looks currently: https://i.sstatic.net/WMwii.jpg ...

cssflexbox

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...

htmlcssangulartypescript

Show equally sized elements using a grid system

I need assistance with displaying fields in a row using CSS grid. I want to display 3 fields in a row with equal width, and if there are only 2 fields, they should also have equal widths. Additionally, if there is only one field, it should take up the full ...

cssreactjsmaterial-uicss-grid

Node JS server fails to load CSS even with the use of express.static

It's quite absurd, but I've been grappling with a rather nonsensical code conundrum for days now. I just can't seem to get the CSS and image to load on my Node.js server. I've tried various solutions (like express.static, etc.), but n ...

cssnode.jsexpressstatic-files

Maximizing the width of an absolute div element inside a container

Looking at this demo, you'll notice that the header remains fixed. However, my issue lies in getting the absolute <div> inside the <th> to occupy 100% of the width of the <th> When I set width: 100% for the <div>, it expands t ...

htmlcssfixed-header-tables

Tips for making an appended element match the height of an image

After embedding the div .soonOverlay into specific .smallCatalogBlock's, I am facing difficulty in adjusting the height of soonOverlay to match only the height of the img within smallCatalogBlock. Currently, its height extends throughout the entire co ...

javascripthtmlcss

Detecting Pixel Colors Across Multiple Overlapping Canvases

I have a challenge with multiple canvas elements on my webpage. I am trying to retrieve the pixel color of all overlapping canvas elements when they are stacked on top of each other. Let me illustrate with an example below. In this scenario, I am attempt ...

javascriptcsshtmlcanvas

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

javascripthtmlcssangulartypescript

When the Chrome Dev Tools are activated, the responsive website malfunctions

As I work on designing a responsive website, I've encountered an issue with media queries. When I set the breakpoint to min-width: 320px in Chrome dev tools, all of my CSS styles disappear. The same problem occurs when I zoom the window size to 150%, ...

css

Unable to display divs in a stacked format using Bootstrap 5

I need help aligning div's vertically on the page. Currently, all my elements are displaying next to each other instead of stacking one below the other. body { height: 100vh; } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

javascripthtmlcssalignmentbootstrap-5

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

utilizing a dynamic value within CSS modules for class naming

Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...

cssreactjsnext.jscss-modulesreact-css-modules

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

htmlcss

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow