Grid: Single Header Right Side starter block

Start a responsive page structure with the selected arrangement of rows and columns.

Before you begin

• A page with Bootstrap 5 included. Load its JavaScript for collapse, dropdown, tab or dismiss interactions.

Use this as a layout starting point

Start a responsive page structure with the selected arrangement of rows and columns. This reference describes the inserted template. It contains static sample content and no App Connect data bindings or application event handlers.

Edit the inserted parts

Insert the block into a Bootstrap 5 page, then expand it in App Structure. Select the child whose content or styling you want to change; there is no separate block configuration form.

Part	How to adapt it
Responsive columns	The template uses `col-12`, `col-md-8`, `col-xl-9`, `col-md-4`, `col-xl-3`. A numeric span is a fraction of the 12-column row; a breakpoint-qualified span applies from that breakpoint upward. Change the column, then check both narrower and wider views.

Complete the intended behavior

Replace the sample content with the message, images and destinations for this page. The layout supplies structure and Bootstrap styling; add a data source or application actions only where the intended workflow requires them.

Make one change and check the result

Insert this layout into a Bootstrap 5 page, expand it in App Structure and replace the first visible label or content placeholder with “Project sections”. Preview at narrow and wide widths; verify the chosen layout still leaves room for the main page content. Test every retained navigation/control with the keyboard.

Continue with starter blocks

Use the starter-block guide for insertion and adaptation. For live records or user actions, connect the matching App Connect workflow after the static layout is readable.

Check your result

You can identify the inserted parts, replace sample content and distinguish supplied Bootstrap behavior from application work still to implement.