Want to show Module content in columns not rows

1

I’m using bootstrap with Grav and would like to display a form next to some introductory text. Essentially I want 2 columns instead of 2 rows. I’ve seen it done in the Delivery Theme/Skeleton but for the life of me can’t get it to work.

2

@bmherard, You could create a new modular template based on ‘modular.html.twig’ and wrap the two modules in a flexbox.

Since I don’t know the theme you are using, I based the following example on Quark.

Folder structure:

/user/pages/
├── 01.home
├── 02.typography
└── 03.contact
    ├── 01._contact
    │   └── form.md
    ├── 02._intro
    │   └── text.md
    └── modular-row.md

The new template ‘modular-row.html.twig’:

{% extends 'modular.html.twig' %}

{% block body %}
    <div id="flex-row">
    {% for module in page.collection() %}
        <div class="flex-item {{ module.menu|hyphenize }}"> 
            {{ module.content|raw }}
        </div>
    {% endfor %}
    </div>
{% endblock %}

And combining that with some css:

#flex-row {
    display: flex
}
.flex-item.intro {
    flex: auto;
}
.flex-item.contact {
    flex: auto;
}

Off course, you need some extra css to fine-tune the layout. And you are doing all of this in your own inherited theme right?

Hope this gives you enough inspiration for creating a solution based on your own theme…

3 Likes
3

Definitely works with Quark. Extending the capabilities of modular.html.twig with modular-row.html.twig is a good option. I should be able to modify for my own theme. Thanks @anon76427325!