Grid System

HtmlForgeX uses a 12-column grid system based on Bootstrap/Tabler.

Basic Grid

page.Row(row => {
    row.Column(TablerColumnNumber.Four, col => {
        col.Card(card => card.Body(body => body.Text("Column 1")));
    });
    row.Column(TablerColumnNumber.Four, col => {
        col.Card(card => card.Body(body => body.Text("Column 2")));
    });
    row.Column(TablerColumnNumber.Four, col => {
        col.Card(card => card.Body(body => body.Text("Column 3")));
    });
});

Column Sizes

Nested Grids

Grids can be nested inside columns:

row.Column(TablerColumnNumber.Eight, outerCol => {
    outerCol.Row(innerRow => {
        innerRow.Column(TablerColumnNumber.Six, col => {
            col.Text("Nested column 1");
        });
        innerRow.Column(TablerColumnNumber.Six, col => {
            col.Text("Nested column 2");
        });
    });
});