How to override bootstrap style

Question

I created the carousel and I need to override styles Indicators buttons. I have style:

.carousel-indicators {
    position: absolute; 
    bottom: 10px;
    left         


        

Answer 1

You should also keep an eye in which order your scripts are loaded to get everything working correctly. If you overwrite CSS, the overrided code should be loaded at last. Also interesting is to make use of important:

.exampleClass {
    margin: 0 !important;
}
.exampleClass {
    margin: 5px;
}

The first one will overwrite the second one so that .exampleClass will have a margin of 0 because with !important you can tell the browsers that this directive has a higher weight than the others. But keep in mind that CSS will use the logical loading order of the code when you've multiplice important-statements because in this case the browser can't know which of them is more important than the other one.

Answer 2

You mean styles to its default css?

.carousel-indicators {
    z-index: 1;
    padding-left: 0;
    list-style: none;
    display: inline-block;
    /*lets override other properties*/
    position: static;/*or relative*/
    width: auto;
    margin: 0;
    text-align: left;
}

_{top, left aren't required to modify as it is using static position won't sense for those}

Answer 3

Which Bootstrap version are you using?

If it's the CSS version, simply write your styles with a more specific selector. For example:

#your-carousel .carousel-indicators {
    /* your styles*/
}

If you use the LESS version of Bootstrap (the option I always recommend), you can easily change it in the carousel.less file and compile to the CSS version.