How to make the bootstrap carousel caption responsive in Flask

Question

I moved the bootstrap carousel caption all way to the left end with top and bottom as zero. but now my caption loss its responsive behaviour when I reduce the screen size. when I make the screen small, the caption disappears from the carousel slider and only the images left. How can I make the caption responsive?

The HTML code is below


<div class="container blog">
    <!-- Carosal slider -->
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="/blog-page/{{ first.id }}" class="blog-link">
                    <img class="d-block w-100" src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" alt="First slide" height="500px">
                    <div class="carousel-caption d-none d-md-block">
                        <div class="caption">
                            <h1>{{ first.title }}</h1>
                            <hr>
                            <p>{{ first.content[0:100] | safe }}...</p>
                        </div>
                    </div>
                </a>
            </div>
            {% for blog in recent %}
                <div class="carousel-item">
                    <a href="/blog-page/{{ blog.id }}" class="blog-link"> 
                        <img class="d-block w-100" src="{{ url_for('static', filename = 'uploads/blog/' + blog['cover_img'])}}" alt="First slide" height="500px">
                        <div class="carousel-caption d-none d-md-block">
                            <div class="caption">
                                <h1>{{ blog.title }}</h1>
                                <hr>
                                <p>{{ blog.content[0:100] | safe }}...</p>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

this is the CSS file

 .carousel-caption {
        background-color: white;
        opacity: 0.9;
        right: 0;
        text-align: right;
        height: 100%;
        max-height: 100%;
        max-width: 30%;
        left: auto;
        color: black;
        padding: 2rem;
        bottom: 0;
    }

Try using media quires and set its to its default OR if you want that behavior on mobile too then set its style accordingly w3schools.com/css/css_rwd_mediaqueries.asp — Awais
still not working. In the default too, the caption is vanishing when screen size is reduced. — Joshy Joy

Awais Awais · Accepted Answer · 2019-12-13T07:23:08

The problem is with .d-none on this line <div class="carousel-caption d-none d-md-block">

This hide it on all devices except medium one due to this class d-md-block. So just remove that class ans all sets good.

Reference form Bootstrap official site Hiding elements

How to make the bootstrap carousel caption responsive in Flask

1 Answers