Small tutorial - Custom fields inside Themler Bootstrap row, columns, equal height

Took me some time to figure it out. In principle everything is already in Bootstrap documentation. Had to generate one empty Themler row with columns to figure out how classes are placed.

For further developing and adapting after wish to different devices read documentation, it ie pretty easy:
http://getbootstrap.com/css/
Bottom, custom responsive width. There is no need for CSS media queries. In Themler Bootstrap all power is in classes.
http://answers.themler.com/articles/3896/columns-shortcode
Back to tutorial.

• Let us say this simple examle to not complicate code. You have one Page with repeatable ACF fields.
• Page is for Links/Frends.
• One custom field is for URL Link Title, name of a friend.

• Second field is for URL Website of a friend.

• Insert CMS Code in Themler template, where you want and need custom fields to be shown.

• In code paste this. Adapt names of your fields to your own, or add more fields if you want.

<pre class>&lt;div class="separated-item- col-md-24"&gt;
&lt;div class="bd-griditem-"&gt;
&lt;div class=" bd-layoutcontainer-"&gt;
&lt;div class="bd-container-inner"&gt;
&lt;div class="container-fluid"&gt;
&lt;?php /* * Loop the_sub_field */ if( get_field('my_repeatable_field') ): ?&gt;
&lt;?php while( has_sub_field('my_repeatable_field') ): ?&gt;
&lt;div class="row bd-row-flex bd-row-align-middle bd-collapsed-gutter chronik-alternate"&gt;
&lt;div class="col-md-4 chronik-title text-center"&gt;
&lt;div class="bd-layoutcolumn-"&gt;
&lt;div class="bd-vertical-align-wrapper"&gt;
&lt;?php the_sub_field('friend_url'); ?&gt;
&lt;i class="icon-calendar"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-20 chronik-text"&gt;
&lt;div class="bd-layoutcolumn-"&gt;
&lt;div class="bd-vertical-align-wrapper"&gt;
&lt;?php the_sub_field('friend_name'); ?&gt;
&lt;/div&gt;
&lt;/div&gt;

</div>

</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>

Optional CSS. Columns need some padding, etc.. Dont overcomplicate CSS code. Dont ruin what Bootstrap and Themler give already.

.chronik-alternate {
margin:0 0 10px 0; border-top:1px solid #ccc;
}
.chronik-title {
font-size: 32px;
padding:20px !important;
margin:0;
color:#e73e64;
background:#ddd;
line-height:130%;
}
.chronik-text {
line-height:130%;
background:#fff;
padding:20px !important;
}
.chronik-text p {margin:0; padding:0;}

.chronik-alternate .icon-calendar {font-size:45px; color:#999; margin:10px 0 0 0; padding:0; display:block;}

You guessed by now it is not Friend/Links example. Some "Timeline" function done with custom fields. But principle is the same.

• Few classes are missing numbers and style for those specific classes.

• If you want it max robust and Themler Bootstrap way make one custom Page template (never will be used anywhere), and in this template make dummy row control with columns, both styles as you want for custom fields. Then take code with class numbers from this template and use it for HTML/PHP code (not CSS, it is already in style.css, Themler generates all on Save).

• So can you use same custom Page template for styling of other things, fields, custom shortcodes, etc. Point is letting Themler generate CSS code.

• This example above wont work if you split those 2 custom fields inside real row control with 2 columns. Code doesnt know it has to repeat rows as on Archive list, and will put all content in just one row, and 2 columns. Impossible to style, and impossible to match those 2 custom fields and result is confusing and wrong. Maybe I missed something, will check later if it is possible. With Shortcode Exec PHP plugin if nothing.