1 module source.uim.bootstrap.bs5.demos.layouts.columns; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/layouts/columns", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Columns - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/layouts"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Layouts"], "Columns")), 23 24 BS5Container(["mt-3"]).row( 25 H5Div(["col-12", "col-lg-2"], 26 listLevels("basic"), 27 listAreas("basic", "layouts"), 28 listSections("basic", "layouts", "columns")), 29 H5Div(["col-12", "col-lg-8"], 30 dateInfo(this), 31 H5H2(["display-4"], "Columns"), 32 H5Hr, 33 34 demoBs5Example("vertical", "Vertical Alignment", 35 H5Div( 36 BS5Container( 37 H5H5(["text-muted", "mt-3"], "Row"), 38 H5P("Grid with vertical alignment on .row using flex utilities")), 39 BS5Container(["data-example":"row-height"], 40 BS5Row(["align-items-start"], 41 BS5Col(".col"), 42 BS5Col(".col"), 43 BS5Col(".col")), 44 BS5Row(["align-items-center"], 45 BS5Col(".col"), 46 BS5Col(".col"), 47 BS5Col(".col")), 48 BS5Row(["align-items-end"], 49 BS5Col(".col"), 50 BS5Col(".col"), 51 BS5Col(".col"))), 52 BS5Container( 53 H5H5(["text-muted", "mt-3"], "Column"), 54 H5P("Grid with vertical alignment on .col using flex utilities")), 55 BS5Container(["data-example":"row-height"], 56 BS5Row( 57 BS5Col(["align-self-start"], ".col .align-self-start"), 58 BS5Col(["align-self-center"], ".col .align-self-center"), 59 BS5Col(["align-self-end"], ".col .align-self-end"))) 60 ), ``, ``), 61 62 demoBs5Example("horizontal", "Horizontal AlignmentH5Br,<small>Grid with horizontal alignment on .row using flex utilities</small>", 63 H5Div( 64 BS5Container( 65 BS5Row(["justify-content-start"], 66 BS5Col(["col-3"], ".col-3"), 67 BS5Col(["col-3"], ".col-3"), 68 BS5Col(["col-3"], ".col-3")), 69 BS5Row(["justify-content-center"], 70 BS5Col(["col-3"], ".col-3"), 71 BS5Col(["col-3"], ".col-3"), 72 BS5Col(["col-3"], ".col-3")), 73 BS5Row(["justify-content-end"], 74 BS5Col(["col-3"], ".col-3"), 75 BS5Col(["col-3"], ".col-3"), 76 BS5Col(["col-3"], ".col-3")), 77 BS5Row(["justify-content-around"], 78 BS5Col(["col-3"], ".col-3"), 79 BS5Col(["col-3"], ".col-3"), 80 BS5Col(["col-3"], ".col-3")), 81 BS5Row(["justify-content-between"], 82 BS5Col(["col-3"], ".col-3"), 83 BS5Col(["col-3"], ".col-3"), 84 BS5Col(["col-3"], ".col-3")), 85 BS5Row(["justify-content-evenly"], 86 BS5Col(["col-3"], ".col-3"), 87 BS5Col(["col-3"], ".col-3"), 88 BS5Col(["col-3"], ".col-3"))) 89 ), ``, ``), 90 91 demoBs5Example("wrapping", "Column wrapping", 92 H5Div( 93 BS5Container( 94 BS5Row( 95 BS5Col(["col-8"], ".col-8"), 96 BS5Col(["col-5"], ".col-5"), 97 BS5Col(["col-4"], ".col-4"))) 98 ), ``, ``), 99 100 demoBs5Example("breaks", "Column breaks", 101 H5Div( 102 H5H5(["text-muted", "mt-3", "container"], "All breakpoints"), 103 H5P("Grid with column break using sizing utility class"), 104 BS5Container( 105 BS5Row( 106 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 107 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 108 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 109 H5Div(["w-100"]), 110 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 111 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 112 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"))), 113 H5H5(["text-muted", "mt-3", "container"], "Responsive"), 114 H5P("Grid with responsive column break using sizing and display utility classes"), 115 BS5Container( 116 BS5Row( 117 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 118 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 119 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 120 H5Div(["w-100", "d-none", "d-lg-block"]), 121 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 122 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"), 123 H5Div(["col-6", "col-sm-3"], ".col-6 .col-sm-3"))) 124 ), ``, ``), 125 126 demoBs5Example("reordering", "ReorderingH5Br,<small>Grid reordering with flex utilities: order-first (-1), order-0 to order-5 and order-last (6)</small>", 127 H5Div( 128 BS5Container( 129 BS5Row( 130 BS5Col(["order-last"], "First, but last"), 131 BS5Col(["order-3"], "Second, but number 5"), 132 BS5Col(["order-2"], "Third, but number 4"), 133 BS5Col(["order-1"], "Fourth, but number 3"), 134 BS5Col(["order-first"], "Fifth, but first"), 135 BS5Col("Last, but unordered, so number 2"))) 136 ), ``, ``), 137 138 demoBs5Example("offsetting", "Offsetting", 139 H5Div( 140 H5H5(["text-muted", "mt-3", "container"], "Offset classes"), 141 BS5Container( 142 BS5Row( 143 H5Div(["col-md-5"], ".col-md-52"), 144 H5Div(["col-md-5 offset-md-2"], ".col-md-5 .offset-md-22")), 145 BS5Row( 146 H5Div(["col-lg-4 offset-lg-3"], ".col-lg-4 .offset-lg-32"), 147 H5Div(["col-lg-2 offset-lg-3"], ".col-lg-2 .offset-lg-32")), 148 BS5Row( 149 H5Div(["col-sm-6 col-md-5 col-lg-6"], ".col-sm-6 .col-md-5 .col-lg-62"), 150 H5Div(["col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0"], ".col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-02"))), 151 H5H5(["text-muted", "mt-3", "container"], "Spacing utilities"), 152 BS5Container( 153 BS5Row( 154 H5Div(["col-md-5"], ".col-md-52"), 155 H5Div(["col-md-5 ms-auto"], ".col-md-5 .ms-auto2")), 156 BS5Row( 157 H5Div(["col-lg-4 ms-lg-auto"], ".col-lg-4 .ms-lg-auto2"), 158 H5Div(["col-lg-2 ms-lg-auto"], ".col-lg-2 .ms-lg-auto2")), 159 BS5Row( 160 H5Div(["col-sm-6 me-lg-auto"], ".col-sm-6 .me-lg-auto2"), 161 H5Div(["col-sm-3"], ".col-sm-32"))) 162 ), ``, ``), 163 164 demoBs5Example("standalone", "Standalone column classes", 165 H5Div( 166 H5Div(["col-1"], "8.333333%"), 167 H5Div(["col-2"], "16.666667%"), 168 H5Div(["col-3"], "25%"), 169 H5Div(["col-4"], "33.333333%"), 170 H5Div(["col-5"], "41.666667%"), 171 H5Div(["col-6"], "50%"), 172 H5Div(["col-7"], "58.333333%"), 173 H5Div(["col-8"], "66.666667%"), 174 H5Div(["col-9"], "75%"), 175 H5Div(["col-10"], "83.333333%"), 176 H5Div(["col-11"], "91.666667%"), 177 H5Div(["col-12"], "100%") 178 ), ``, ``), 179 180 ), 181 H5Div(["col-12", "col-lg-2"]))).toString; 182 } 183 }); 184 } 185