LCS - Advanced Layout Techniques

Developing a UI that is flexible and looks good to the user is key to creating quality applications. This guide will offer some tips on how to use the various options that exist in key components.

Understanding the different layout components in Betty Blocks

    There are three major components when dealing with base layout in Betty Blocks. These are the Column, Row and Box. In legacy page templates you will also see the Grid component and we will talk about that at the end. 

    Column and Row

    The column and row are a matched set, every column has a row, and you cannot drag a row onto the canvas by itself. Together these two components provide your pages with their flexible structure.  

    The Row sets the container's width and can be used to set the height. The Column or columns, as Rows can contain multiple columns, set the boundaries on what and how the components inside the column behave. Here are the key options that can enable more complex and interesting UI designs. 

    Column width

    Columns can have equal or different column widths depending on orientation and screen size (in CSS we call this Media Query break points); this can be set from a value of 1 up to 12 where 12 is the entire width of the parent Row. It is often valuable to set the width of the Desktop differently than mobile or tablet views. The default for mobile is always 12 and it is best practice to leave it at that width unless you have specific reasons not to. Some common widths include: 

    • One column: 12 
    • Two Columns: 6 and 6 or 4 and 8 
    • Three Columns:  4 for each column 
    • Four Columns: 3 for each column 


    The Alignment of a Column infers directly to the CSS properties of flexbox as in essence a Column is just an HTML div. Betty Blocks currently provides the following options for flexing a column: 

    • Horizontal: None, Left, Center, Right 
    • Vertical: None, Top, Center, Right 

    As one would imagine, selecting one of these options will force the components inside the column to align in that manner so “Horizontal Left” will align all the components to the left side of the column.

    image of column align left


    Currently Styling is limited to Inner space (CSS Padding), outer space (CSS Margin), height and background color. Use inner and outer space to give your column the separation or lack of separation that the intended design requires.  


    The Box component is the workhorse of Betty Box UI customization in the current state of UI Styling.  


    It provides in CSS terms the justify-content, align-items, and flex-direction properties. Betty Blocks calls these, Alignment, Vertical Alignment and Content Direction. 

    image of box flex


    As with the Column, Styling is limited to Inner space (css Padding), outer space (CSS Margin), height and width. Use inner and outer space to give your column the separation or lack of separation that the intended design requires. 


    The Positioning options of a Box should not be used without a deep understanding of how CSS position property functions.  This option set works the same as the CSS property so refer to CSS Docs on that:  

    MDN on CSS Position: 


    The background section allows the setting of background color or image of the box. 

    Column and Box in Combination

    Using the Column and box together can result in some advanced layouts and greatly enhances the options available to the developer. An example is creating a sticky footer where the footer will always be at the bottom of the page no matter what the height of the page content is.  

    LCS - Creating a Sticky Footer

    Grid Component

    The grid component in Betty Blocks was an early attempt to offer the flexibility of CSS flexbox with the built-in convenience of limited Data Container functionality in one component. The grid was often used and is still used in some public Betty Blocks page templates, like the header and footer template, to have a sticky footer as described above. With the expansion of the features of the box and column components in combination, the usefulness of a grid in Betty Blocks has dwindled to the point in which we do not recommend using the grid at all.    

    The Data Container functionality of being able to set a model on a grid is getting deprecated soon and will cause your pages to fail so do not use this feature at all, if you do still end up using a grid (though again, we do not recommend you use it as there are better ways to achieve the same effect).  

    KeywordsUI, Flexbox, box, column   Doc ID135743
    OwnerJoel H.GroupLow Code Solutions
    Created2024-02-28 11:04:12Updated2024-02-28 13:33:40
    SitesDoIT Enterprise Business Systems - Low Code Solutions
    Feedback  0   0