Streak

Bootstrap Streak

Bootstrap streak is a horizontal block containing text, that is used to separate content sections or to highlight a 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 an effect similar to parallax.

Examples of Bootstrap streak menu use include:

  • A famous person quote
  • A landscape with a memorable quote

Please take a look at the following Bootstrap streak menu examples:

Basic example MDB Pro component

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

  • ~ Steve Jobs
Edit in sandbox 
        
            

        <div class="streak grey lighten-3">
          <div class="flex-center">
            <ul class="mb-0 list-unstyled">
              <li>
                <h2 class="h2-responsive"><i class="fas fa-quote-left" aria-hidden="true"></i> The people who are
                  crazy enough to think they can change the world are the ones who do. <i class="fas fa-quote-right"
                    aria-hidden="true"></i></h2>
              </li>
              <li class="mb-0">
                <h5 class="text-center font-italic mb-0">~ Steve Jobs</h5>
              </li>
            </ul>
          </div>
        </div>

Large streak MDB Pro component

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

  • ~ Garry Winogrand
Edit in sandbox 
        
            

        <div class="streak streak-lg blue lighten-4">
          <div class="flex-center">
            <ul class="mb-0 list-unstyled">
              <li>
                <h2 class="h2-responsive font-weight-bold"><i class="fas fa-quote-left" aria-hidden="true"></i> I
                  photograph to see what the world looks like in photographs. <i class="fas fa-quote-right" aria-hidden="true"></i></h2>
              </li>
              <li class="mb-0">
                <h5 class="text-center font-italic font-weight-bold grey-text mb-0">~ Garry Winogrand</h5>
              </li>
            </ul>
          </div>
        </div>

Streak with photo MDB Pro component

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

  • ~ Steve Jobs
Edit in sandbox 
        
            

        <div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).webp')">
          <div class="flex-center white-text rgba-black-light pattern-1">
            <ul class="mb-0 list-unstyled">
              <li>
                <h2 class="h2-responsive"><i class="fas fa-quote-left" aria-hidden="true"></i> The people who are
                  crazy enough to think they can change the world are the ones who do. <i class="fas fa-quote-right"
                    aria-hidden="true"></i></h2>
              </li>
              <li class="mb-0">
                <h5 class="text-center font-italic mb-0">~ Steve Jobs</h5>
              </li>
            </ul>
          </div>
        </div>

      
        
    
        
            

        .streak.streak-photo {
          background-attachment: fixed;
        }