CODEWITHSUNDEEP
csscarouselbootstrap-4
Darkstarone
Darkstarone

Reputation: 4730

Bootstrap 4 - change position of carousel controls

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?

Upvotes: 5

Views: 29606

Answers (3)

Harekrishna Murari
Harekrishna Murari

Reputation: 89

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

Upvotes: 7

Burhan Shakir
Burhan Shakir

Reputation: 237

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

Upvotes: 1

TidyDev
TidyDev

Reputation: 3668

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

Upvotes: 6

Related Questions