The Bootstrap 4 Carousel Indicators are missing from the page

I am currently working on creating a carousel slider with indicators at the bottom using Bootstrap 4.1.3. However, I have run into an issue where the indicators are not visible, although they still function when clicked on.

I have attempted solutions such as adjusting the z-index and background colors of the indicators, but these have not resolved the problem.

Below is the snippet of my code:

.carousel-indicators {
  z-index: 3;
  #slide-buttons {
    background-color: #999 !important;
    background-color: rgba(70, 70, 70, .25) !important;
  }
  .active {
    background-color: #444 !important;
  }
}

<div class="carousel slide col-9 mx-auto pt-5 position-relative" data-ride="carousel" id="slides">

  <!--Carousel Content-->
  <div class="carousel-content carousel-inner" role="listbox">
    <div class="slide-1 col-12 carousel-item active" id="slide1">
      <h5>Example</h5>
    </div>

    <div class="slide-2 col-12 carousel-item" id="slide2">
      <h5>Example</h5>
    </div>

    <div class="slide-3 col-12 carousel-item" id="slide3">
      <h5>Example</h5>
    </div>
  </div>

  <!-- Carousel Indicators -->
  <ul class="carousel-indicators mt-5 pt-5 ">
    <li data-target="#slides" id="slides-buttons" data-slide-to="0" class="active"></li>
    <li data-target="#slides" id="slides-buttons" data-slide-to="1" class=""></li>
    <li data-target="#slides" id="slides-buttons" data-slide-to="2" class=""></li>
  </ul>
</div>
htmlcsssassbootstrap-4.1.x

Answer №1

Avoid using the same id multiple times in your webpage. Instead, consider implementing the following solution:

.carousel .carousel-indicators li {
  background-color: red;
}

.carousel .carousel-indicators li.active {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer №2

After reviewing Cristiano Soares' solution, I have incorporated some additional recommendations.

In order to ensure that the main carousel component wrapper displays active indicators:

<Carousel indicators={true} .... <Item><ProjectImg><Caption> ... >

I also applied extra styling to address the issue of the indicators not being visible even after activation:

.carousel-indicators li {
  background-color: red;
  height: 5px;
  width: 20px;
  z-index: 5 !important;
  margin: 0 5px;
  cursor: pointer;
}
.carousel-indicators li.active {
  background-color: blue;
  height: 5px;
  width: 20px;
  z-index: 5 !important;
  padding: 0 5px;
  cursor: pointer;
}

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

Answer №3

Your code contains a typo in the CSS ID. You wrote 'slides-buttons' instead of '#slide-buttons'

Answer №4

Encountering the identical issue with bootstrap 4 led me to discover that the indicators were not displaying properly. Implementing this adjustment resolved the issue:

.carousel-indicators{
display: block !important;}

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 is the impact of a floated element on vertical spacing?

I have come across an article discussing the usage of CSS, but I am puzzled as to why image number four is not positioned below image number one. Instead, it appears below image number three. Can someone please explain this to me? Here is the HTML code sni ...

javascriptjqueryhtmlcss

The sass compiler has produced two separate CSS files, but I am only able to link one of them to the index.html file

Everything was going smoothly with my SASS compiler. The styles were reacting perfectly in the live web server. But then, out of nowhere, it stopped working. Upon closer inspection, I realized that the extension had created a new CSS file. Instead of compi ...

csssass

Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered. Here is what I have tried so far... <!DOCTYPE html ...

htmlcssbootstrap-5

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

I am trying to achieve a similar effect as shown on: this website I require assistance in creating a mouseover image link that hides the top image and reveals a bottom image that scrolls vertically within the same space as the top image. The long vertica ...

javascripthtmlcssmouseoveronmouseover

Tips for customizing the appearance of the active item in the navigation bar

Currently, I am developing a project with React.js using HTML, CSS, and JavaScript. My goal is to enhance the visual appeal of the active navigation item in the navbar by adding a white border around it. This way, the border will remain visible while the c ...

javascripthtmlcssreactjsnavbar

Showing nested arrays in API data using Angular

I would like to display the data from this API { "results": [ { "name": "Luke Skywalker", "height": "172", "mass": "77", & ...

javascripthtmlangular

Creating a magical transformation for the bootstrap carousel

Trying to create a bootstrap wizard with a carousel and disable auto-scrolling by setting bs-interval to "false" without success. Here is my code: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" ...

javascripthtmlcssbootstrap-5

AngularJS Partial Views: Enhancing Your Website's User Experience

As a newcomer to the world of Angular, I am seeking guidance on a specific issue. I have encountered a one-to-many relationship scenario where one Category can have multiple Product items. The challenge lies in my layout page setup where I display various ...

javascripthtmlangularjsangular-routing

What is the best way to retrieve the textbox value when its associated checkboxes have been selected?

Upon selecting a checkbox and entering data into the linked textbox, upon submission I aim to reveal a form showcasing both the entered text and which checkboxes were selected. ...

phphtml

Unlocking the potential of data inputted in a JQuery Autocomplete form

Seeking assistance with extracting data from a form to utilize for additional purposes <form onsubmit="return false;"> Enter a School: <input id="schoolsearch" type="text" /> <INPUT TYPE=SUBMIT VALUE="GO"> </form> I am struggling ...

phpjqueryhtmlformsautocomplete

Is there an easy method to verify if the local storage is devoid of any data?

Query is named aptly; seeking to verify in a conditional statement. ...

javascripthtmllocal-storage

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Take a look at the code I've provided below : HTML : <input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345" onclick="myClick(this)"> Javascript : <script> $('#sel_44').attr("checked", true); < ...

javascriptjqueryhtmlcheckbox

Are you in search of an opening <html> tag for your project?

When I use Initializer to quickly generate HTML5 + Boostrap boilerplates, I noticed that the HTML document it creates does not include an opening <html> tag. This got me curious. Here is the beginning portion of the code generated by Initializr: &l ...

htmltwitter-bootstrapinitializr

The @html.TextBoxFor model value does not appear pre-filled or set for the date type

I am using the @html.TextBoxFor method with a specified type of date. However, when rendering the view, the model value (retrieved from the database) is not being set. Here is an example of my code: <tr> <td>@Html.Label("ReferenceId")< ...

htmlasp.netasp.net-mvcdatepicker

Identifying the loaded CSS with jQuery

My HTML page dynamically loads specific CSS files based on screen width (for PC, tablets, and phones): <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="all" href="css/style.css" &g ...

javascriptjqueryhtmlcss

aligning divs in a horizontal distribution is ineffective when the divs become fixed in place

When distributing divs horizontally equally, issues arise when these elements are attached without spaces in between (particularly in Chrome and Firefox). For instance: http://jsfiddle.net/pdelorme/au9ouko0/ HTML : <div class="ul"> <div class=" ...

htmlcss

How to center a span using Twitter Bootstrap

As a newcomer to Twitter Bootstrap, I'm wondering how I can center a span within a parent row. Currently, I am working with Twitter Bootstrap Version 2.3 instead of 3.1. In version 3.1, there is a center-block feature that I cannot utilize in 2.3. Th ...

csstwitter-bootstrapresponsive-designcss-frameworks

Can a parent div be resized to accommodate inline-block white-space nowrap content using only pure CSS?

I'm currently exploring possible solutions for making a parent div adjust its size to fit content that is deliberately set not to wrap. To better illustrate my issue, here is a jsfiddle showcasing the problem: jsfiddle.net/wtQfV Here is the code exam ...

htmlcss

increasing the size of a picture without resorting to a pop-up window

Struggling to implement a product details tab within a table that features a clickable image. When the image is clicked, it should enlarge but the width doesn't adjust accordingly. I'm using bootstrap 5.3 and can't seem to identify the root ...

javascripthtmlcssbootstrap-5

jquery's animation causing elements to move abruptly when containing text

For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 70 ...

javascriptjqueryhtmlcssjquery-animate