Bootstrap carousel being rendered vertically instead of horizontally

So I am creating a movie website using Django, and in the detail page I want to include a carousel of all the movies available. But for some reason, my carouse is not working properly. The movies are being rendered, but vertically and with no control buttons. I want them to be rendered horizontally with control buttons - like a usual carousel. I don't know what is wrong. Can anyone please help me fix this ?

My html:

<div id="demo" class="carousel slide" data-ride="carousel">
        {% for movie in movies %}
          <!-- Indicators -->
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
          </ul>

          <!-- The slideshow -->
          
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="{{movie.flyer.url}}" alt="Los Angeles">
                </div>
           
            <!-- Left and right controls -->
                  <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                  </a>
                  <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                  </a>

                </div>
            
            </div>
            {% endfor %}