Components
Media Embed/Video
<!--
CLSSES
.embed-responsive-1by1
.embed-responsive-4by3
.embed-responsive-16by9 (most used)
.embed-responsive-21by9
-->
<!-- Local Video -->
<div class="embed-responsive embed-responsive-16by9">
<video preload="auto" controls="controls" poster="../demo.files/video/hd0936.jpg">
<source src="../demo.files/video/hd0936.webm" type="video/webm;">
<source src="../demo.files/video/hd0936.mp4" type="video/mp4;">
</video>
</div>
<!-- Youtube -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W5Yst1Si3fw" width="560" height="315"></iframe>
</div>
<!-- Vimeo -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//player.vimeo.com/video/56624256" width="800" height="450"></iframe>
</div>
<!-- Facebook Embed -->
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/gary/videos/217526812176185/&show_text=0&width=560" width="560" height="315" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>
Media Objects : Custom
SOW Utils : Data Attribute
SOW Utils will parse the text and extract the initials from attribute: data-initials="John Doe"
View SOW : Utils for more
<!-- SQUARED -->
<!-- size -->
<a href="#" class="w--30 h--30 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--40 h--40 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--50 h--50 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--60 h--60 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--70 h--70 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--80 h--80 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--90 h--90 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<!-- span -->
<span class="w--60 h--60 rounded d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></span>
<!--
placeholder
.bg-primary-soft
.bg-secondary-soft
.bg-danger-soft
.bg-warning-soft
.bg-success-soft
.bg-info-soft
.bg-indigo-soft
.bg-pink-soft
-->
<span class="bg-danger-soft h5 m-0 w--60 h--60 rounded d-inline-flex justify-content-center align-items-center">
JD
</span>
<!-- CIRCLE -->
<!-- size -->
<a href="#" class="w--30 h--30 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--40 h--40 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--50 h--50 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--60 h--60 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--70 h--70 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--80 h--80 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<a href="#" class="w--90 h--90 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></a>
<!-- span -->
<span class="w--60 h--60 rounded-circle d-inline-block bg-light bg-cover lazy" data-background-image="demo.files/images/unsplash/team/thumb_330/erik-mclean-06vpBIHmiYc-unsplash.jpg"></span>
<!--
placeholder
.bg-primary-soft
.bg-secondary-soft
.bg-danger-soft
.bg-warning-soft
.bg-success-soft
.bg-info-soft
.bg-indigo-soft
.bg-pink-soft
-->
<span class="bg-danger-soft h5 m-0 w--60 h--60 rounded-circle d-inline-flex justify-content-center align-items-center">
JD
</span>
<!--
SOW Utils : Data Attribute
.sow-util-initials class is required
-->
<span data-initials="John Doe" class="sow-util-initials bg-danger-soft h5 m-0 w--60 h--60 rounded d-inline-flex justify-content-center align-items-center">
<i class="fi fi-circle-spin fi-spin"></i>
</span>
Media Objects
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Top-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Middle-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Bottom-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Image on right
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<!-- Media Objects : Nested -->
<div class="media">
<img src="demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="h--60 float-start" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
<div class="media mt-3">
<a class="float-start" href="#">
<img src="demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="h--60 float-start" alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media mt-3">
<a class="float-start" href="#">
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg" class="h--60 float-start" alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
<!-- /Media Objects : Nested -->
<!-- media object : align top -->
<div class="media">
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="h--60 float-start" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<!-- /media object : align top -->
<!-- media object : align middle -->
<div class="media">
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="h--60 float-start align-self-center" alt="...">
<div class="media-body">
<h5 class="mt-0">Middle-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<!-- /media object : align middle -->
<!-- media object : align bottom -->
<div class="media">
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="h--60 float-start align-self-end" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<!-- /media object : align bottom -->
<!-- Media Objects : Right Image -->
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Image on right</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="h--80 float-end" alt="...">
</div>
<!-- /Media Objects : Right Image -->