Create Four/ Five column sections

(0) Share

Report

Posted on by Community Power Pla...

Hello,

I am trying to create the Four/Five columns section in the Power app portal but I don't find any way.

Does anybody know how can I do that?

Categories:

Power Apps portals

I have the same question (0)

All responses (4)

Answers (1)

OOlashyn 3,496 Most Valuable Professional on at

Like (0)

Report

Hi @Anonymous ,

There is no drag and drop component in Portal Studio for more than 3 columns as of now. To have 4/5 column section you would need to customize the code of the web template.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Do you know how can I customize the web template?

Was this reply helpful? Yes No
OOlashyn 3,496 Most Valuable Professional on at

Like (0)

Report

You need to go to Portal Management app > Web Templates, find the necessary template and modify it. You can learn more about web templates in this official docs.

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like (2)

Report
Hi @Anonymous ,

If it is for re use as @OOlashyn mentioned please either create your new web template and inject it in web pages where it is needed or modify the existing template. If it is for one page, you can also simply change the div structure in portal studio like below

<p>This website uses sample data for illustration purposes. You can build pages using multiple templates available.</p> <div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;"> <div class="container" style="display: flex; flex-wrap: wrap;"> <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div> <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div> <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div> <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div> </div> </div>

And the output look like below:

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No