The carousel indicators in Bootstrap 4 are not responding to the CSS styles

I'm having trouble customizing the bootstrap 4 carousel indicators to look like the example image below.

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

.carousel-indicators {
    width: auto;
    padding: 8px 18px;
    background-color: rgba(96,107,114,.8);
    border-radius: 18px;
    line-height: 0;
   
}

.carousel-indicators li {
  border-radius: 50% !important;
  width: 12px;
  height: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<ul class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

The width of the background is larger than desired. I've attempted to adjust using positioning and translate properties without success. I'm still unable to achieve the desired look similar to the image above. Could someone assist me in resolving this issue?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure your styles override Bootstrap's, you can utilize the !important declaration.

While this method is effective, it's generally not recommended. Instead, consider using Bootstrap Sass to customize your styles through the variables defined in the _variables file.

Apologies for not fully addressing your question earlier. In addition to overriding Bootstrap styles, you'll need to modify default classes to achieve the desired indicators.

.carousel-indicators {
  /* Override Bootstrap styles */
  right: unset !important;
  left: unset !important;
  padding-left: 18px !important;
  margin-right: unset !important;
  margin-left: unset !important;
  /* Your custom styles */
  width: auto;
  padding: 8px 18px;
  background-color: rgba(96, 107, 114, .8);
  border-radius: 18px;
  line-height: 0;
}

.carousel-indicators li {
  border-radius: 50% !important;
  width: 12px !important;
  height: 12px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row no-gutters justify-content-center">
  <ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

How to access a shadowroot element using R Selenium

Currently, I'm dealing with web scraping where one of the websites presents a 'Accept cookies' button within a shadow root. To address this issue, I sought assistance on how to click this button in discussions found here: Click on accept co ...

htmlcssrseleniumxpath

Customize Your AJAX POST URL with Radio Buttons - A Step-by-Step Guide

I'm looking for some guidance on how to use AJAX to change the post URL based on a radio button selection. Do I need to use an if statement or is there another way? var barray = []; function cbutton() { $('input:radio[name="cheking"]:checke ...

javascripthtmljqueryajax

Tips for incorporating Action Links into your CSS workflow

<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li> I have made a change by replacing th ...

asp.net-mvchtmlcssrazorasp.net-mvc-4

What is the best way to conceal part of a chart or a div in Angular?

I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...

htmlcssangularchart.js

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

htmlcssimagehover

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Struggling to understand why there is a blank space between the image and the menu. Here is the HTML and CSS related to it: <header class="header_nav"> <img src="img/logo.png" class="logo"/> <nav class="nav_bar"> <u ...

htmlcssweb

Struggling to keep text aligned to the left?

Check out the image at https://i.sstatic.net/Qu7hT.png in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the htt ...

htmlcsscss-position

Ways to emphasize search outcomes in Flask/HTML?

I am currently working on creating a search box using HTML and the Flask framework in Python. Below is the layout I am working with: Layout My goal is to input text into the search box and have it highlighted within the text area on the same HTML page. F ...

javascriptpythonhtmljqueryflask

Leveraging font as a comprehensive repository of icons

I have been experimenting with using entypo as the icon source for my web application. The UI technology I am working with is ZK. However, I encountered an issue when trying to include an icon from that font by using: <span sclass="entypoWhite">&am ...

cssfontszk

Ways to apply the margin-top property to create space between an input field and

I have been experimenting with Vue and I created a simple code snippet. <template> <div> <input /> <span class="span-text">Hi</span> </div> </template> // index.css .span{ margin-top: 3px; } I a ...

cssvue.js

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time. Here is what I have: function animation() { document.getElementById('ExampleButton').className = &apo ...

javascripthtmlcssanimationbutton

Steps for positioning a z-indexed division

In my main wrapper, which has a fixed width of 960px, there is a login button located at the top right corner. When this button is pressed, a div layer opens directly below and in front of the main wrapper using z-index: 1. The issue I am facing is that I ...

htmlcsspositionz-index

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

This task seems deceptively simple, yet I am struggling to find a straightforward solution. Language: (HTML) <div class="col-6-12 subcontent-outer"> <div class="subcontent"> <h1>Header</h1> ...

htmlcss

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

htmlcss

Unable to display the complete JSON data using ng-repeat in AngularJS

Utilize ng-repeat to display data retrieved from a web service. Below is my controller JS (GetAllCtrl.js): https://i.stack.imgur.com/GAelG.jpg I have received JSON data: https://i.stack.imgur.com/0xkAU.jpg My goal now is to extract only company informati ...

javascripthtmlangularjscontrollerangularjs-ng-repeat

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices. For the design, I want the panel width to b ...

htmljquerycssjquery-mobileresponsive

Arranging mat-checkboxes in a vertical stack inside a mat-grid-tile component of a mat-grid-list

I'm looking to create a grid list with 2 columns, each containing 2 checkboxes stacked vertically. While I found this helpful question, it still involves a lot of nested divs. Is there a cleaner way to achieve this layout? Here's how I currentl ...

htmlcssangularangular-material

I seem to be having trouble locating the element using its xpath

I am in search of the xpath element below. What would be the xpath? precise location (GPS and network-based) Below is the HTML code: <div class="permission-bucket" jsinstance="1" jstcache="75"> <div class="bucket-icon-and-title" jstcache="87"&g ...

htmlxpath

Preserve the original position of the inner <div> when animating the container <div> using JQuery

I am currently working on a small website and encountering some challenges with jQuery animation. My issue involves placing a single character text inside a circle and wanting it to grow when the user hovers over it, while keeping the inner text in its ori ...

javascriptjqueryhtmlcss