Not able to see MDBCarouselItem contents in small view

**it should show the caption in small view i.e less than 768px, which inclues iphone 12

**it works will till 770px after that the button in the MDBCarrouselItem dissppears, i tried various options in the api with all combinations of Screen size Class Hidden on all .d-none Hidden only on xs .d-none .d-sm-block Hidden only on sm .d-sm-none .d-md-block Hidden only on md .d-md-none .d-lg-block Hidden only on lg .d-lg-none .d-xl-block Hidden only on xl .d-xl-none Hidden only on xxl .d-xxl-none Visible on all .d-block Visible only on xs .d-block .d-sm-none Visible only on sm .d-none .d-sm-block .d-md-none Visible only on md .d-none .d-md-block .d-lg-none Visible only on lg .d-none .d-lg-block .d-xl-none Visible only on xl .d-none .d-xl-block .d-xxl-none Visible only on xxl .d-none .d-xxl-block

also tried to override with .custom-carousel-button.d-none { display: block !important; /* Use !important to ensure it overrides the MDBCarousel styles */ } nothing worked

Please see the screanshot which is taken from desktop and mobile , mobile view doesn't have the button,CUSTOMIZE where desktop view has it , , please help **

Resources (screenshots, code snippets etc.)

  <MDBCarouselItem style={{ 


  backgroundSize: 'contain', // Ensure the background image contains the container
}} 
    className='carousel-item-custom rounded img-fluid '
    itemId={'Every Decision Matters'}
    src='https://opengrit.com/images/SaaSPromotional'    
    alt='...'
  >

   <MDBBtn className="carousel-caption bg-success text-white bg-opacity-75 d-block custom-carousel-button" onClick={() => setIsLoginRequired(true)}> 
      <h3>Every Decision Matters</h3>

    </MDBBtn>
    {/* <div className="bg-success text-white bg-opacity-75 carousel-caption  d-xs-block">  <h3>Every Decision Matters</h3></div> */}

  </MDBCarouselItem>

  <MDBCarouselItem style={{ 


  backgroundSize: 'contain', // Ensure the background image contains the container
}}
       className='carousel-item-custom rounded img-fluid '  
    itemId={'Scan or Upload'}
    src='https://opengrit.com/images/scanupload1.png'
    alt='...'
  >

  <MDBBtn className=" bg-success text-white bg-opacity-75 d-block" onClick={() => setIsLoginRequired(true)}> 
      <h3>Scan or Upload</h3>

    </MDBBtn>

  </MDBCarouselItem>