Basic Bootstrap + Matrix Implementation

Question

I've got a project where I'm trying to set up a basic page layout – header, body, footer. But I also want the option for a user to add an image or bit of content (let's call it a "sidebar") that splits the body section into two columns – one for body copy on the left and one for the new content on the right.

For this, I'm using a Matrix field (for the user to create sidebar content on the fly) and Bootstrap (for the grid). When sidebar content is created for the entry, I'm hoping to be able to add a "col-sm-8" class to the body wrapper, as well as add a div with the "col-sm-4" class for the sidebar column for it to reside in.

Now, I have experience with creating static layouts in Bootstrap, but I'm woefully inexperienced at dealing with anything related to coding logic that isn't an if/else statement, and I can't seem to work out the code for Matrix in Twig.

I also need to be able to add different kinds of content (or blocks) in the sidebar, so the logic should also need to check for whether one or more kinds of blocks are populating, but still apply the same effect.

Can anyone provide an example of how to do this?

edit: BTW, I have read the documentation on templating Matrix fields. I just don't know how to check for multiple block types in order to print a class name & create a new column.

Answer 1

It looks like you can check for the total number of blocks within a matrix block. So if you check that the length is greater than 0, you could then apply the classes.

{% if entry.myMatrixField|length > 0 %}
    <div class="col-sm-4">
        // other code
    </div>
{% endif %}

Answer 2

Why not use:

{% if block.sidebar|length %}
    <div class="col-sm-8">
{% else %}
    <div class="col-sm-12">
{% endif %}

This way the column will automatically be smaller IF the side bar exists.