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.
General
Solved by pamtbaau View solution
@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:
TXT
/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':
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:
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...
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 @pamtbaau!
Log in to reply.
Suggested topics
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 1 | 36 | 21 hours ago | ||
| 0 | 31 | 21 hours ago | ||
| 2 | 154 | 2 days ago | ||
| 1 | 102 | 2 days ago | ||
| 0 | 86 | 3 days ago |