In responsive mode, Carousel displays indicators and captions below the image

I'm experiencing an issue with my carousel code. It works perfectly in full screen mode, but when viewed on smaller screens the captions and indicators appear below the image. I've tried multiple solutions without success. Any suggestions on how to resolve this?

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="/img/courtyard.png" alt="First slide"> <!--IMAGE SIZE 1080px x 550px-->
                <div class="carousel-caption d-none d-md-block">
                    <p align="left">
                        <a id="hero-caption" href="#">
                            <span style="font-size: 200%;"> 
                                ...
                            </span>
                            <br>
                            <span style="font-size: 350%;"> 
                                ...
                            </span>
                        </a>
                    </p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="/img/openfield.png" alt="Second slide"> <!--IMAGE SIZE 1080px x 550px-->
                <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                </div>

            </div>
        </div>
    </div>
htmlcsscarousel

Answer №1

Using Bootstrap v4.5

Your query seems to lack precision, however, The inclusion of the d-none class results in setting the property display: none !important;, causing the carousel captions to not display below 768px and preventing the captions and carousel indicators from appearing beneath the image in responsive scenarios.

You should also remove font styles that are interfering.

Refer to this guide for more information (additional examples can be found at https://getbootstrap.com/docs/4.5/components/carousel/):

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
                <div class="carousel-caption d-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
                <div class="carousel-caption d-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
                <div class="carousel-caption d-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

overrule styling in react native

In React Native, I am looking to modify a specific style within a sub-component. For instance, I have defined a style called CircleShapeView: const styles = StyleSheet.create({ CircleShapeView: { width: 50, height: 50, borde ...

cssreactjsreact-nativestylesheet

What is the Most Effective Method for Implementing a Unique Font-Family without Sacrificing Loading Speed

I have recently incorporated my own unique font to my website and utilized the code below to specify a custom font-family. Unfortunately, I've encountered an issue where the custom font initially displays as a standard web font while the page is loadi ...

cssfont-face

I am having trouble keeping my containers from overlapping

I have used bootstrap to create the following design: https://i.sstatic.net/1yqKI.jpg Here is the code for the design shown above: <div class="jumbotron cta-header"> <div class="container cta-intro-box"> <h1 class="cta-heading ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Having trouble toggling the dropdown submenu feature in a Vuejs application?

.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial ...

javascripthtmlcssvue.js

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

What is the best way to align the icon in the middle of these social buttons?

I'm struggling to center the font awesome icons both vertically and horizontally within their rounded background. Every time, they end up on the left, top, or bottom. Is there a way to adjust the positioning of these icons and properly center them? ...

twitter-bootstrapcssbootstrap-4font-awesome

Is it possible to align the last item in a MUI stack to the bottom?

https://i.stack.imgur.com/IsutM.png Currently, I am working on a modal component using MUI's Grid. My goal is to position the Button at the bottom of the modal. const styles = { modalBox: { position: 'absolute', top: &ap ...

cssreactjsmaterial-ui

Troubleshooting: Issues with window.location.href and window.open within an iframe

Code Update <div> <button type="button" class="submit btn btn-default" id="btnSubmit">Submit </button> <button type="button">Cancel</button> </div> <script> $("#btnSubmit").click(function(e) { ...

javascriptjqueryangularjsajaxhtml

What is the process for adjusting the horizontal position of a flexbox using CSS?

Currently experimenting with flexbox to better understand its functionality. I have created the following layout: https://i.sstatic.net/rxvFD.png using the code provided below: .container-1 { display: flex; flex-direction: row; } .container-1 div ...

cssflexbox

What is the most effective method for customizing non-MUI elements within an MUI framework?

As someone new to React and development in general, I understand that there are various ways to style elements within React itself: importing CSS, using locally scoped CSS modules, implementing CSS-in-JS via libraries like Styled Components or Emotion, ut ...

cssreactjsmaterial-ui

What is a straightforward way to add Pagination to an HTML page using Javascript?

I'm in the process of developing an HTML table with pagination. To achieve this, I am utilizing a GET API to fetch JSON data and presenting it in a dynamic table layout. Pagination is being managed by the API through page number parameters. How can we ...

javascripthtmlpagination

Gradually make a section disappear and delete it in WordPress

Is there a way to smoothly fade out and remove a section after clicking on it in WordPress? I tried using the code below, which worked but doesn't seem to work for WordPress. I am using the Oceanwp theme, which allows me to easily add CSS and JavaScri ...

jquerycsswordpressfadeout

'Modify' feature for forum threads and other similar posts

While searching online for a script that would allow users on my site to edit fields and other information, I couldn't find anything specific. Can someone please explain or demonstrate how this process works with a script? Essentially, I want users to ...

phpmysqlhtml

Having difficulty extracting information from an HTML page using Swift

I'm attempting to convert data retrieved from an HTML page into a readable format, but the string urlContent is showing as nil even though the data received from the NSURLSession is not null. This is my approach: var city = "London" var url = NSURL ...

htmlswiftdecodensurlsession

What could be causing my form inputs with a Get method to not cooperate?

Originally posted this question on the WordPress stack exchange site since I was working on a WordPress project, but now realize it's more suitable for this platform. I am trying to incorporate two input fields into the same form. Individually, they ...

phphtmlformsinputget

A step-by-step guide on retrieving information from a span and em element with Beautiful Soup

Currently, I am developing a code that is responsible for extracting data from various web pages. # Here's the content of task.py import requests from bs4 import BeautifulSoup url = ('https://www.naukri.com/job-listings-Python-Developer-Cloud-A ...

pythonhtmlweb-scrapingbeautifulsoup

Adjust the positioning of several divs using CSS floats

Can the pink div (link3/link4) start at the same top position as the div (link1/link2)? Or do I still need a wrapper div for the left button bar, TreeDiv, and another one for the right button bar + DataGridDiv? CSS html { background-color:Yellow; ...

htmlcsscss-float

Retrieve data from multiple groups of dynamically generated list boxes

I've implemented a form on my website that dynamically adds rows with form fields. Each row consists of a textbox and a multiple select list. I found a helpful tutorial on this topic at: Here is the code for the textbox: <input type="textbox" nam ...

phpjavascripthtmlforms

Switch Picture on Active List Item

I've implemented a two-tab content slider specifically for the mobile section of my website. Users can click on the linked image within the <li> element to load the corresponding content. My goal is to have the image change color when in an "act ...

javascriptjqueryhtmlcss

Unable to display tooltip on added <li> items

I implemented a live search feature that retrieves a complete list element and appends it to a container. However, I am facing an issue with the tooltip not working. Below is the code snippet: $(".hb_search_text_job").on('keyup', function() { ...

phpjquerycssjsonwordpress