Angular Bootstrap streak

Angular Streak - Bootstrap 4 & Material Design

Angular 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 photow with effect similar to parallax.

Examples of Angular Bootstrap streak menu use:

  • Famous person quote
  • Landscape with a memorable quote

See the following Angular 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 list-unstyled">
            <li><h2 class="h2-responsive"><mdb-icon fas icon="quote-left" aria-hidden="true"></mdb-icon> 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

<div class="streak streak-md blue lighten-4">
    <div class="flex-center">
        <ul class="mb-0 list-unstyled">
            <li><h2 class="h2-responsive font-weight-bold"><mdb-icon fas icon="quote-left" aria-hidden="true"></mdb-icon> 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

<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 list-unstyled">
            <li><h2 class="h2-responsive"><mdb-icon fas icon="quote-left" aria-hidden="true"></mdb-icon> 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;
}
                

Angular Streak - API

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


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'