Reactstrap：Carousel Caption移动端不显示的解决方法

Got it, let's solve this! The problem is exactly what you identified: Reactstrap's default CarouselCaption component adds the d-none d-md-block classes out of the box, which hide the caption on screens smaller than the Bootstrap md breakpoint (768px). Here are a few straightforward, Reactstrap-native ways to fix this:

1. Force the caption to show on all screen sizes #

The simplest fix is to override the default classes using the className prop that CarouselCaption accepts. Just replace the hidden classes with d-block, which ensures the caption is visible everywhere:

<CarouselCaption
  className="d-block"
  captionHeader="Your Caption Header"
  captionText="Your full caption text here"
/>

This completely replaces the default d-none d-md-block classes with d-block, making the caption visible on mobile, tablet, and desktop.

2. Customize the responsive breakpoint #

If you don't want the caption to show on all small screens, but only starting at a smaller breakpoint (like sm instead of md), use Bootstrap's responsive display classes instead:

<CarouselCaption
  className="d-none d-sm-block"
  captionHeader="Your Caption Header"
  captionText="Your full caption text here"
/>

This will hide the caption only on screens smaller than 576px (Bootstrap's sm breakpoint), and show it on everything larger—including most modern mobile devices.

3. Dynamic control (for advanced use cases) #

If you need more granular control (like showing/hiding based on custom screen sizes or user interactions), you can use React state to dynamically set the class name:

import { useState, useEffect } from 'react';
import { Carousel, CarouselItem, CarouselCaption } from 'reactstrap';

function CustomCarousel() {
  const [showCaptionOnMobile, setShowCaptionOnMobile] = useState(window.innerWidth >= 576);

  useEffect(() => {
    const handleResize = () => {
      setShowCaptionOnMobile(window.innerWidth >= 576);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Carousel>
      <CarouselItem>
        <img src="/your-image.jpg" alt="Slide content" />
        <CarouselCaption
          className={showCaptionOnMobile ? "d-block" : "d-md-block"}
          captionHeader="Dynamic Caption"
          captionText="Shows on mobile when screen is 576px or wider"
        />
      </CarouselItem>
    </Carousel>
  );
}

This listens for window resize events and adjusts the caption's visibility based on your custom breakpoint.

Key Takeaway #

Reactstrap components are designed to be flexible—any default Bootstrap classes they add can be overridden or extended using the className prop. For most cases, option 1 or 2 will be all you need to get your caption showing on mobile.

内容的提问来源于stack exchange，提问作者WebbH