Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap Streak

Bootstrap streaks are simple components that either serve as a break from long blocks of text or introduce the reader to some significant 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 photow with effect similar to parallax.

Examples of Bootstrap streak menu use:

  • Famous person quote
  • Landscape with a memorable quote

See 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
                
<div class="streak grey lighten-3">
    <div class="flex-center">
        <ul class="mb-0">
            <li><h2 class="h2-responsive"><i class="fa 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="fa 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
                
<div class="streak streak-md blue lighten-4">
    <div class="flex-center">
        <ul class="mb-0">
            <li><h2 class="h2-responsive font-bold"><i class="fa fa-quote-left" aria-hidden="true"></i> I photograph to see what the world looks like in photographs. <i class="fa fa-quote-right" aria-hidden="true"></i></h2></li>
            <li class="mb-0"><h5 class="text-center font-italic font-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
                
.streak.streak-photo {
    background-attachment: fixed;
}
                
            
                
<div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
    <div class="flex-center white-text rgba-black-light pattern-1">
        <ul class="mb-0">
            <li><h2 class="h2-responsive"><i class="fa 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="fa 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>