React Bootstrap Streak

React Streak - 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 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" ... />