Bootstrap carousel indicators not clickable - html

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 / 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 pomegranate<span>£1.80</span></li>
<li>Harrogate spring still water <span>£1.40</span></li>
<li>Smeraldina sparkling water<span>£2.00</span></li>
</ul>
<ul class="menu_list">
<li>Fresh juice – orange / 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 moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li>
<li>Speciality birra 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 / 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; Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li>
<li>Chianti D.O.C. - Vernaiolo; 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; Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
<li>Sauvignon Blanc- Clifford Quay; New Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li>
<li class="section_title">Rose</li>
<li>Pinot Grigio Rose – Villa Serena; 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 D.O.C. Treviso – 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 / 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 / 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 pomegranate<span>£1.80</span></li>
<li>Harrogate spring still water <span>£1.40</span></li>
<li>Smeraldina sparkling water<span>£2.00</span></li>
</ul>
<ul class="menu_list">
<li>Fresh juice – orange / 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 moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li>
<li>Speciality birra 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 / 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; Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li>
<li>Chianti D.O.C. - Vernaiolo; 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; Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
<li>Sauvignon Blanc- Clifford Quay; New Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li>
<li class="section_title">Rose</li>
<li>Pinot Grigio Rose – Villa Serena; 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 D.O.C. Treviso – 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 / Originale <span>£6.50</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>