Bootstrap carousel indicators not clickable

Question

I can't seem to figure out why the carousel indicators are not clickable like on the Boostrap 4 carousel examples I have seen. From what I have seen this functionality should work without any extra code but mine doesn't. I can't see what I've done wrong as all I did was copy the carousel from the Boostrap documents, and then add some content. I would like to have clickable text as the indicators for each slide. What have I done wrong?

 .carousel-indicators { background-color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <section class="drinks_menu"> <div class="container"> <div id="drinks_carousel" class="slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#drinks_carousel" data-slide-to="0" class="active">HOT DRINKS</li> <li data-target="#drinks_carousel" data-slide-to="1">SOFT DRINKS</li> <li data-target="#drinks_carousel" data-slide-to="2">BEER</li> <li data-target="#drinks_carousel" data-slide-to="3">WINE</li> <li data-target="#drinks_carousel" data-slide-to="4">SPIRITS</li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-12"> <h2 class="heading">HOT DRINKS</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li>Espresso <span>£1.80</span></li> <li>Espresso macchiato <span>£1.90</span></li> <li>Tea - peppermint / green / camomile / earl grey&nbsp;/&nbsp;yorkshire <span>£1.90</span></li> <li>Americano <span>£2.00</span></li> <li>Caffe latte <span>£2.40</span></li> </ul> <ul class="menu_list"> <li>Flat white <span>£2.60</span></li> <li>Cappucino <span>£2.40</span></li> <li>Mocha <span>£2.60</span></li> <li>Hot chocolate <span>£2.40</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">SOFT DRINKS</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li>San pellegrino cans – blood orange / limonata/ orange&nbsp;&nbsp;pomegranate<span>£1.80</span></li> <li>Harrogate spring still&nbsp;water <span>£1.40</span></li> <li>Smeraldina sparkling water<span>£2.00</span></li> </ul> <ul class="menu_list"> <li>Fresh juice – orange&nbsp;/&nbsp;apple <span>£1.80</span></li> <li>Coca cola / sprite <span>£1.50</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">BEER</h2> </div> </div> <div class="row"> <ul class="menu_list full"> <li>Draught – birra&nbsp;moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li> <li>Speciality birra&nbsp;moretti<span>toscana £4.80</span> <span>siciliana £4.80</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">WINE</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li class="section_title">House</li> <li>Tenuta san marco white&nbsp;/&nbsp;red<span>125ML £2.75</span> <span>250ML £5.50</span> <span>500ML carafe £11.00</span></li> <li class="section_title">Red</li> <li>Malbec- El Finatello;&nbsp;Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li> <li>Chianti DOC - Vernaiolo;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li> </ul> <ul class="menu_list"> <li class="section_title">White</li> <li>Gavi Di Gavi – conti speroni;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li> <li>Sauvignon Blanc- Clifford Quay; New&nbsp;Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li> <li class="section_title">Rose</li> <li>Pinot Grigio Rose – Villa Serena;&nbsp;Italy <span>250ML £6.50</span> <span>Bottle £19.50</span> </li> </ul> <ul class="menu_list"> <li class="section_title">Prosecco</li> <li>Miol DOC Treviso&nbsp;–&nbsp;Italy <span>125ML £6.00</span> <span>Bottle £24.00</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">SPIRITS</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li>Aperol Spritz <span>£6.90</span></li> <li>Grappa Invecchiata<span>£3.50</span></li> </ul> <ul class="menu_list"> <li>Limoncello <span>£3.50</span></li> <li>Malfy Gin & Fever Tree Tonic – Sicilian bloody orange / Sicilian pink grapefruit / Limone&nbsp;/&nbsp;Originale <span>£6.50</span></li> </ul> </div> </div> </div> </div> </div> </section> 

Answer 1

What you are missing is this <div id="drinks_carousel" class="carousel slide" data-ride="carousel"> the carousel class is missing from the div. check this out.

 .carousel-indicators { background-color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <section class="drinks_menu"> <div class="container"> <div id="drinks_carousel" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#drinks_carousel" data-slide-to="0" class="active">HOT DRINKS</li> <li data-target="#drinks_carousel" data-slide-to="1">SOFT DRINKS</li> <li data-target="#drinks_carousel" data-slide-to="2">BEER</li> <li data-target="#drinks_carousel" data-slide-to="3">WINE</li> <li data-target="#drinks_carousel" data-slide-to="4">SPIRITS</li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-12"> <h2 class="heading">HOT DRINKS</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li>Espresso <span>£1.80</span></li> <li>Espresso macchiato <span>£1.90</span></li> <li>Tea - peppermint / green / camomile / earl grey&nbsp;/&nbsp;yorkshire <span>£1.90</span></li> <li>Americano <span>£2.00</span></li> <li>Caffe latte <span>£2.40</span></li> </ul> <ul class="menu_list"> <li>Flat white <span>£2.60</span></li> <li>Cappucino <span>£2.40</span></li> <li>Mocha <span>£2.60</span></li> <li>Hot chocolate <span>£2.40</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">SOFT DRINKS</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li>San pellegrino cans – blood orange / limonata/ orange&nbsp;&nbsp;pomegranate<span>£1.80</span></li> <li>Harrogate spring still&nbsp;water <span>£1.40</span></li> <li>Smeraldina sparkling water<span>£2.00</span></li> </ul> <ul class="menu_list"> <li>Fresh juice – orange&nbsp;/&nbsp;apple <span>£1.80</span></li> <li>Coca cola / sprite <span>£1.50</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">BEER</h2> </div> </div> <div class="row"> <ul class="menu_list full"> <li>Draught – birra&nbsp;moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li> <li>Speciality birra&nbsp;moretti<span>toscana £4.80</span> <span>siciliana £4.80</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">WINE</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li class="section_title">House</li> <li>Tenuta san marco white&nbsp;/&nbsp;red<span>125ML £2.75</span> <span>250ML £5.50</span> <span>500ML carafe £11.00</span></li> <li class="section_title">Red</li> <li>Malbec- El Finatello;&nbsp;Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li> <li>Chianti DOC - Vernaiolo;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li> </ul> <ul class="menu_list"> <li class="section_title">White</li> <li>Gavi Di Gavi – conti speroni;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li> <li>Sauvignon Blanc- Clifford Quay; New&nbsp;Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li> <li class="section_title">Rose</li> <li>Pinot Grigio Rose – Villa Serena;&nbsp;Italy <span>250ML £6.50</span> <span>Bottle £19.50</span> </li> </ul> <ul class="menu_list"> <li class="section_title">Prosecco</li> <li>Miol DOC Treviso&nbsp;–&nbsp;Italy <span>125ML £6.00</span> <span>Bottle £24.00</span></li> </ul> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-12"> <h2 class="heading">SPIRITS</h2> </div> </div> <div class="row"> <ul class="menu_list"> <li>Aperol Spritz <span>£6.90</span></li> <li>Grappa Invecchiata<span>£3.50</span></li> </ul> <ul class="menu_list"> <li>Limoncello <span>£3.50</span></li> <li>Malfy Gin & Fever Tree Tonic – Sicilian bloody orange / Sicilian pink grapefruit / Limone&nbsp;/&nbsp;Originale <span>£6.50</span></li> </ul> </div> </div> </div> </div> </div> </section>