React Bootstrap Streak

React Streak - 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 Bootstrap streak is a horizontal block containing text, uses to separate content sections or highlight some piece of information.

They should be used with caution, since too many of them on a single page will make it hard to read.

Streaks may contain a quote or a background photo with effect similar to parallax.

Examples of React Bootstrap streak menu use:

  • Famous person quote
  • Landscape with a memorable quote

See the following Vue Bootstrap streak menu examples:

Basic example

  • The people who are crazy enough to think they can change the world are the ones who do.

  • ~ Steve Jobs
        
            
          import React from 'react';
          import { MDBStreak, MDBContainer } from 'mdbreact';
  
          const StreakPage = () => {
            return (
              <MDBContainer>
                <MDBStreak by="Steve Jobs">
                  The people who are
                  crazy enough to think they can change the world are the ones who do.
                </MDBStreak>
              </MDBContainer>
            )
          }
  
          export default StreakPage;

Medium streak

  • I photograph to see what the world looks like in photographs.

  • ~ Garry Winogrand
        
            
          import React from 'react';
          import { MDBStreak, MDBContainer } from 'mdbreact';
  
          const StreakPage = () => {
            return (
              <MDBContainer>
                <MDBStreak by="Garry Winogrand" size="md" byClass="grey-text font-weight-bold" wrapperClass="blue lighten-4"
                  quoteClass="font-weight-bold">
                  I photograph to see what the world looks like in photographs.
                </MDBStreak>
              </MDBContainer>
            )
          }
  
          export default StreakPage;

Streak with photo

  • The people who are crazy enough to think they can change the world are the ones who do.

  • ~ Steve Jobs
        
            
          import React from 'react';
          import { MDBStreak, MDBContainer } from 'mdbreact';
  
          const StreakPage = () => {
            return (
              <MDBContainer style={{height: "2000px"}}>
                <MDBStreak size="md" by="Steve Jobs" overlayClass="white-text rgba-black-light pattern-1" photo="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).webp">
                  The people who are crazy enough to think they can change the world are the ones who do
                </MDBStreak>
              </MDBContainer>
            )
          }
  
          export default StreakPage;

React Streak - API

In this section you will find informations about required modules of streak component.

Streak import statement

In order to use Streak component make sure you have imported proper module first.

        
            
          import { MDBStreak } from 'mdbreact';

API Reference: Props

Name Type Default Description Example
by String Set's quote author <MDBStreak by="Steve Jobs" ... />
size String Used to set streak's size. Choose from md|lg <MDBStreak size="lg" ... />
wrapperClass String CSS classes to be applied to streak's wrapper <MDBStreak wrapperClass="blue lighten-4" ... />
byClass String CSS classes to be applied to the author name <MDBStreak byClass="grey-text font-weight-bold" ... />
quoteClass String CSS classes to be applied to the quotation <MDBStreak quoteClass="font-weight-bold" ... />
photo String src attribute for the background picture <MDBStreak photo="https://mdbootstrap.com/im..." ... />
overlayClass String CSS classes to be applied to streak's overlay, which is the only child of streak's wrapper <MDBStreak overlayClass="rgba-black-light pattern-1" ... />