React Bootstrap Image Replacement

React Image Replacement - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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;
          }