Teaser
Create layout boxes with different styles.
Example # Teaser with <img> tag
HTML
<div class="bs-teaser-wrapper">
<div class="bs-teaser-media">
<img src="https://placeimg.com/640/480/nature" alt="Dummy image" />
</div>
<div class="bs-teaser-content">
<h4>quis nostrud exercitation ullamco</h4>
<p>quis nostrud exercitation ullamco laboris nisi commodo consequat.</p>
<p>Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="bs-teaser-link" href="#">Read More</a>
</div>
</div>
For image left or right side just need to add class "bs-teaser-wrapper__left-right"
<div class="bs-teaser-wrapper bs-teaser-wrapper__left-right">
Example # Teaser with image in background
HTML
<div class="bs-teaser-wrapper bs-teaser-wrapper__image-in-bg">
<div class="bs-teaser-media">
<div class="bs-teaser-media-item"></div>
</div>
<div class="bs-teaser-content">
<h4>quis nostrud exercitation ullamco</h4>
<p>quis nostrud exercitation ullamco laboris nisi quis.</p>
<p>exercitation ullamco laboris nisi quis nostrud exerci.</p>
<a class="bs-teaser-link" href="#">Read More</a>
</div>
</div>
For image left or right side just need to add class "bs-teaser-wrapper__left-right"
<div class="bs-teaser-wrapper bs-teaser-wrapper__image-in-bg bs-teaser-wrapper__left-right">
Example # Teaser with overlay
HTML
<div class="bs-teaser-overlay-wrapper">
<div class="bs-teaser-media"></div>
<div class="bs-teaser-overlay">
<h3>quis nostrud exercitation</h3>
<p>quis nostrud exercitation ullamco.</p>
</div>
</div>
Option 2: add class "detail-on-hover"
<div class="bs-teaser-overlay-wrapper detail-on-hover">
Option 3: add class "overlay-on-hover"
<div class="bs-teaser-overlay-wrapper overlay-on-hover">