Change arrow colors in Bootstraps carousel

Question

I m obviously missing something stupidly simple here  I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible  So many changing the color of the arrows  NOT the background like I ve done     CSS   carousel-control-prev-icon   carousel-control-next-icon       height  100px      width  100px      outline  black      background-color  rgba 0  0  0  0 3       background-size  100   100       border-radius  50       border  1px solid black      Carousel HTML   lt div class    col-md-9  gt        lt div id  carouselExampleIndicators  class  carousel slide  data-ride  carousel  gt            lt ol class  carousel-indicators  gt               lt li data-target   carouselExampleIndicators  data-slide-to  0  class  active  gt  lt  li gt               lt li data-target   carouselExampleIndicators  data-slide-to  1  gt  lt  li gt               lt li data-target   carouselExampleIndicators  data-slide-to  2  gt  lt  li gt           lt  ol gt            lt div class  carousel-inner  role  listbox  gt               lt div class  carousel-item active  gt                   lt img class  d-block img-fluid  src  carousel Bars 20and 20Dots jpg  alt  First slide  class    img-responsive  gt               lt  div gt                lt div class  carousel-item  gt                   lt img class  d-block img-fluid  src  carousel murial jpg  alt  Second slide  class    img-responsive  gt               lt  div gt                lt div class  carousel-item  gt                   lt img class  d-block img-fluid  src  carousel Upper 20Partialism 20album 20covers004white jpg  alt  Third slide  class    img-responsive  gt               lt  div gt           lt  div gt            lt a class  carousel-control-prev  href   carouselExampleIndicators  role  button  data-slide  prev  gt               lt span class  carousel-control-prev-icon  aria-hidden  true  gt  lt  span gt               lt span class  sr-only  gt Previous lt  span gt           lt  a gt            lt a class  carousel-control-next  href   carouselExampleIndicators  role  button  data-slide  next  gt               lt span class  carousel-control-next-icon  aria-hidden  true  gt  lt  span gt               lt span class  sr-only  gt Next lt  span gt           lt  a gt        lt  div gt    lt  div gt

User · Answer

If you are using bootstrap min css for carousel-   lt a class  left carousel-control  href   carouselExample  data-slide  prev  gt     lt span class  glyphicon glyphicon-chevron-left  gt  lt  span gt     lt span class  sr-only  gt Previous lt  span gt   lt  a gt   lt a class  right carousel-control  href   carouselExample  data-slide  next  gt     lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt     lt span class  sr-only  gt Next lt  span gt   lt  a gt    Open the bootstrap min css file and find the property  glyphicon-chevron-right  and add the property  color red

User · Answer

With Font Awesome icons    lt  -- Controls -- gt   lt a class  carousel-control-prev  href   carousel-example-generic  role  button  data-slide  prev  gt     lt span class  fa fa-chevron-left fa-lg  style  color red   gt  lt  span gt     lt span class  sr-only  gt Previous lt  span gt   lt  a gt   lt a class  carousel-control-next  href   carousel-example-generic  role  button  data-slide  next  gt     lt span class  fa fa-chevron-right fa-lg  style  color red   gt  lt  span gt     lt span class  sr-only  gt Next lt  span gt   lt  a gt

User · Answer

In bootstrap 4 if you are just changing the colour of the controls you can use the sass variables  typically in custom scss     carousel-control-color   7b277d   As highlighted in this github issue note  https   github com twbs bootstrap issues 21985 issuecomment-281402443

User · Answer

Currently Bootstrap 4 uses a background-image with embbed SVG data info that include the color of the SVG shape  Something like    carousel-control-prev-icon   background-image url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  fill   23fff  viewBox  0 0 8 8  3E 3Cpath d  M5 25 0l-4 4 4 4 1 5-1 5-2 5-2 5 2 5-2 5-1 5-1 5z   3E 3C svg 3E        Note the part about fill   23fff  it fills the shape with a color  in this case  fff  white   for red simply replace with  f00  Finally  it is safe to include this  same change for next-icon     carousel-control-prev-icon  background-image  url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  fill   23f00  viewBox  0 0 8 8  3E 3Cpath d  M5 25 0l-4 4 4 4 1 5-1 5-2 5-2 5 2 5-2 5-1 5-1 5z   3E 3C svg 3E

User · Answer

This worked for me   carousel-control-prev-icon           background-image  url  quot data image svg xml  3csvg xmlns  http   www w3 org 2000 svg  fill   23000  width  8  height  8  viewBox  0 0 8 8  3e 3cpath d  M5 25 0l-4 4 4 4 1 5-1 5L4 25 4l2 5-2 5L5 25 0z   3e 3c svg 3e quot                          carousel-control-next-icon           background-image  url  quot data image svg xml  3csvg xmlns  http   www w3 org 2000 svg  fill   23000  width  8  height  8  viewBox  0 0 8 8  3e 3cpath d  M2 75 0l-1 5 1 5L3 75 4l-2 5 2 5L2 75 8l4-4-4-4z   3e 3c svg 3e quot             I changed the color in the url of the icon  Thats the original that is used in the bootstrap page but with this section in black   quot    fill   23000     quot

User · Answer

If you just want to make them black in Bootstrap 4    carousel-control-next   carousel-control-prev      carousel-indicators          filter  invert 100

User · Answer

To customize the colors for the carousel controls  captions  and indicators using Sass you can include these variables        carousel-control-color        carousel-caption-color        carousel-indicator-active-bg

User · Answer

a little example that works for me       carousel-control-prev       carousel-control-next          height  50px          width  50px          outline   color-white          background-size  100   100           border-radius  50           border  1px solid  color-white          background-color   color-white              carousel-control-prev-icon            background-image url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  fill   23009be1  viewBox  0 0 8 8  3E 3Cpath d  M5 25 0l-4 4 4 4 1 5-1 5-2 5-2 5 2 5-2 5-1 5-1 5z   3E 3C svg 3E             width  30px          height  48px             carousel-control-next-icon            background-image  url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  fill   23009be1  viewBox  0 0 8 8  3E 3Cpath d  M2 75 0l-1 5 1 5 2 5 2 5-2 5 2 5 1 5 1 5 4-4-4-4z   3E 3C svg 3E            width  30px          height  48px

User · Answer

I too had a similar problem  some images were very light and some dark  so the arrows didn t always show up clearly so I took a more simplistic approach   In the modal-body section I just removed the following lines        lt  -- Left and right controls -- gt       lt a class  carousel-control-prev  href   id  data-slide  prev  gt          lt span class  carousel-control-prev-icon  gt  lt  span gt       lt  a gt       lt a class  carousel-control-next  href   id  data-slide  next  gt         lt span class  carousel-control-next-icon  gt  lt  span gt       lt  a gt    and inserted the following into the modal-header section       lt  -- Left and right controls -- gt       lt a  href   gamespandp  data-slide  prev  class  btn btn-outline-secondary btn-sm  gt  amp  10094  lt  a gt       lt a  href   gamespandp   data-slide  next  class  btn btn-outline-secondary btn-sm  gt  amp  10095  lt  a gt    The indicators can now be clearly seen  no adding extra icons or messing with style sheets  although you could style them however you wanted   See this demo image

User · Answer

You should use also   lt span gt  lt i class  fa fa-angle-left  aria-hidden  true  gt  lt  i gt  lt  span gt  using fontawesome  You have to overwrite the original code  Do the following and you ll be free to customize on CSS    lt a class  carousel-control-prev  href   carouselExampleIndicatorsTestim  role  button  data-slide  prev  gt       lt span gt  lt i class  fa fa-angle-left  aria-hidden  true  gt  lt  i gt  lt  span gt       lt span class  sr-only  gt Previous lt  span gt   lt  a gt   lt a class  carousel-control-next  href   carouselExampleIndicatorsTestim  role  button  data-slide  next  gt       lt span gt  lt i class  fa fa-angle-right  aria-hidden  true  gt  lt  i gt  lt  span gt       lt span class  sr-only  gt Next lt  span gt    lt  a gt      The original code   lt a class  carousel-control-prev  href   carouselExampleIndicators  role  button  data-slide  prev  gt       lt span class  carousel-control-prev-icon  aria-hidden  true  gt  lt  span gt       lt span class  sr-only  gt Previous lt  span gt   lt  a gt    lt a class  carousel-control-next  href   carouselExampleIndicators  role  button  data-slide  next  gt       lt span class  carousel-control-next-icon  aria-hidden  true  gt  lt  span gt       lt span class  sr-only  gt Next lt  span gt   lt  a gt

User · Answer

I know this is an older post  but it helped me out  I ve also found that for bootstrap v4 you can also change the arrow color by overriding the controls like this    carousel-control-prev-icon    background-image  url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  fill   23fff  viewBox  0 0 8 8  3E 3Cpath d  M5 25 0l-4 4 4 4 1 5-1 5-2 5-2 5 2 5-2 5-1 5-1 5z   3E 3C svg 3E    important      carousel-control-next-icon     background-image  url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  fill   23fff  viewBox  0 0 8 8  3E 3Cpath d  M2 75 0l-1 5 1 5 2 5 2 5-2 5 2 5 1 5 1 5 4-4-4-4z   3E 3C svg 3E    important      Where you change fill   23fff  the fff at the end to any hexadecimal value that you want  For example   fill   23000  for black  fill   23ff0000  for red and so on  Just a note  I haven t tested this without the  important declaration

User · Answer

I hope this works  cheers   x000D   x000D   carousel-control-prev-icon  x000D   carousel-control-next-icon   x000D    height  100px  x000D    width  100px  x000D    outline  black  x000D    background-size  100   100   x000D    border-radius  50   x000D    border  1px solid black  x000D    background-image  none  x000D    x000D   x000D   carousel-control-next-icon after x000D    x000D    content    gt    x000D    font-size  55px  x000D    color  red  x000D    x000D   x000D   carousel-control-prev-icon after   x000D    content    lt    x000D    font-size  55px  x000D    color  red  x000D    x000D   x000D   x000D

User · Answer

for bootstrap-3 one can use    carousel-control span glyphicon       color  red

[html] Change arrow colors in Bootstraps carousel

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to carousel