React Bootstrap Image Replacement

React Image Replacement - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

React Image replacement is a utility that lets you swap text for background images by adding a single class.

Utilize the .text-hide class or mixin to help replace an element’s text content with a background image.

Basic example

        
            
          import React from 'react'

          const ReplacementPage = () => {
            return (
              <div>
                <h2 className="h1-responsive text-hide">Custom heading</h2>
              </div>
            )
          }

          export default ReplacementPage;
        
        
    

        
            

          // Usage as a mixin
          .heading { @include text-hide; }

        
        
    

Use the .text-hide class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a background-image instead of text.

        
            
          import React from 'react'

          const ReplacementPage = () => {
            return (
              <div>
                <h2 className="h1-responsive text-hide">MDBootstrap</h2>
              </div>
            )
          }

          export default ReplacementPage;
        
        
    

        
            
          h2 {
            background-image: url('https://mdbootstrap.com/img/logo/mdb-transparent-250px.webp');
            width: 250px;
            height: 90px;
          }