Owl Carousel 2 not showing navigation dots - owl-carousel-2

Question

I am trying out owl-carousel 2.3.4 (https://owlcarousel2.github.io/OwlCarousel2/) - all is fine except that the navigation dots are not showing. They aren't images so I don't know why it's not loading. I was wondering what I am doing wrong. I can see that it's working here (https://codepen.io/Ittisafur/pen/ggqzwY) but this uses owl-carousel version 1.3.3.
<style type="text/css">
.owl-carousel div.content
{
box-sizing:border-box;
background-color:#fff;
border:1px solid red;
min-height:150px;
padding:10px;
margin:10px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="content">
<p>Text 1</p>
</div>
<div class="content">
<p>Text 2</p>
</div>
<div class="content">
<p>Text 3</p>
</div>
<div class="content">
<p>Text 4</p>
</div>
<div class="content">
<p>Text 5</p>
</div>
<div class="content">
<p>Text 6</p>
</div>
<div class="content">
<p>Text 7</p>
</div>
<div class="content">
<p>Text 8</p>
</div>
<div class="content">
<p>Text 9</p>
</div>
<div class="content">
<p>Text 10</p>
</div>
</div>
<script>
$(document).ready(function()
{
$('.owl-carousel').owlCarousel(
{
center:false,
items:5,
loop:true,
margin:10,
dots: true,
autoplay:true
});
});
</script>

Answer 1

Add the owl-theme class to your container:
<div class="owl-carousel owl-theme">

Answer 2

Add the owl-theme class to your container:
<div class="owl-carousel owl-theme">
<div class="pr-2 pl-2 item"> </div>
<div class="pr-2 pl-2 item"> </div>
</div>