Bootstrap 4 - change position of carousel controls

user_1695437 0
Viewed 23689

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?

carousel bootstrap-4 css
3 Answers

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

user_85326560

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 */
}
user_48744570

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 */
}
user_65080540
Related