Bootstrap 4 - change position of carousel controls

Question

I've got a simple bootstrap 4 (beta-v2) carousel:

<div id="carouselSteam" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
        {% for key, value in results.items %}
            {% if forloop.counter == 1 %}
                <div class="carousel-item active">
                    {% include "games/result_table.html" with key=key value=value %}
                </div>
            {% else %}
                <div class="carousel-item">
                    {% include "games/result_table.html" with key=key value=value %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselSteam" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselSteam" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

My issue is that the carousel-inner can be quite long as it contains a table. Currently, the controls appear mid-way down the carousel; ideally I'd like them much closer to the top (say 20% from the top) - does anyone know a way to do this?

Solution 1

In the latest Bootstrap v4 Beta, the distance of the carousel controls from the bottom of the carousel is controlled by the bottom CSS attribute.

Therefore, it's fairly easy to control the placing of the left and right carousel control icons by setting the bottom percentage. Here's an example where I place them about 75% of the way from the center of the carousel.

.carousel-control-prev,
.carousel-control-next{
      bottom: 75%;
}

Here's a working codepen: https://codepen.io/Washable/pen/xPYJma?editors=1100

Solution 2

In Bootstrap 4 for v4.0.0

.carousel-control-prev,
.carousel-control-next{
    align-items: flex-start;; /* Aligns it at the top */
}

.carousel-control-prev,
.carousel-control-next{
    align-items: flex-end;; /* Aligns it at the bottom */
}

Solution 3

In Bootstrap 4 you can also use :

.carousel-control-prev,
.carousel-control-next{
  align-self: flex-end; /* Aligns it at the bottom */
}

or

.carousel-control-prev,
.carousel-control-next{
  align-self: flex-start; /* Aligns it at the top */
}