Angular Bootstrap Streak
Angular 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
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).webp')">
<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.
import { WavesModule } from 'ng-uikit-pro-standard';
import { WavesModule } from 'angular-bootstrap-md';