CODEWITHSUNDEEP
cssbootstrap-4bootstrap-carousel
Mike
Mike

Reputation: 13

Bootstrap 4 Carousel: How to stack container items instead of inline

Wanting to stack the contents of each slide (an h2 and button) vertically instead of the default inline format of Bootstrap 4 Carousel. My code is as follows:

<div id="slider" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active" style="background-image: url({{ 'placeholder1.jpg' | asset_url }})">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h2>Great food without the price</h2>
                <button class="btn btn-primary btn-lg">Order now</button>
            </div>
        </div>
        ...
    </div>
</div>

Current default format

Desired format

This is my first time using version 4 so a little fresh on use of d-flex etc. Any help would be appreciated :)

Upvotes: 1

Views: 882

Answers (1)

Toan Lu
Toan Lu

Reputation: 1239

You need to add .flex-column to your .d-flex div. But also need to put some <br> tag inside <h2> as to seperate the text into two lines.

Upvotes: 1

Related Questions