Magento 2. Organize custom content by Bootstrap implementation.

by Peter D.

Argento template is a Bootstrap powered Magento 2 theme. It enables you to properly organize website content by using CSS helpers.

Here are some examples:

Visible and hidden classes

Argento provides Bootstrap visible-* and hidden-* classes, to help you organize custom content.

Examples:
<!-- Visible on the phones only -->
<img class="visible-xs-block" src="..." alt="..."/>
<!-- Hidden on the phones -->
<img class="hidden-xs" src="..." alt="..."/>

Please read official Bootstrap documentation for more information.

Responsive embed

You can use Bootstrap embed-responsive class to make any video content responsive.

Examples:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Please read official Bootstrap documentation for more information.

Text and block alignment classes

Examples:
<!-- Center text inside a div -->
<div class="a-center"></div>
<!-- Center div with a defined width -->
<div class="a-center-block"></div>
<!-- Float block to the left -->
<div class="pull-left"></div>
<!-- Float block to the right -->
<div class="pull-right"></div>

Recent articles