Skip to content

Commit 69d5b31

Browse files
sjefvanleeuwensjefvanleeuwen
committed
More grid variants
1 parent f1c743f commit 69d5b31

File tree

1 file changed

+70
-0
lines changed

1 file changed

+70
-0
lines changed

‎src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,74 @@
6060
</Row>
6161
</Body>
6262
</Card>
63+
<Card>
64+
<Title><CardTitle>Equal-width multi-row</CardTitle></Title>
65+
<Body>
66+
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
67+
<Row>
68+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
69+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
70+
<Column Classes="col.w100"></Column>
71+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
72+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
73+
</Row>
74+
</Body>
75+
</Card>
76+
<h3>Responsive classes</h3>
77+
<p>
78+
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
79+
</p>
80+
<Card>
81+
<Title><CardTitle>All breakpoints</CardTitle></Title>
82+
<Body>
83+
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
84+
<Row>
85+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
86+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
87+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
88+
<Column Classes="col._"><Card><Title>@col._</Title></Card></Column>
89+
</Row>
90+
<Row>
91+
<Column Classes="col._8"><Card><Title>@col._8</Title></Card></Column>
92+
<Column Classes="col._4"><Card><Title>@col._4</Title></Card></Column>
93+
</Row>
94+
</Body>
95+
</Card>
96+
<Card>
97+
<Title><CardTitle>Stacked to horizontal</CardTitle></Title>
98+
<Body>
99+
Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked before becoming horizontal with at the small breakpoint (sm).
100+
<Row>
101+
<Column Classes="col.sm._8"><Card><Title>@col.sm._8</Title></Card></Column>
102+
<Column Classes="col.sm._4"><Card><Title>@col.sm._4</Title></Card></Column>
103+
</Row>
104+
<Row>
105+
<Column Classes="col.sm"><Card><Title>@col.sm</Title></Card></Column>
106+
<Column Classes="col.sm"><Card><Title>@col.sm</Title></Card></Column>
107+
<Column Classes="col.sm"><Card><Title>@col.sm</Title></Card></Column>
108+
</Row>
109+
</Body>
110+
</Card>
111+
<Card>
112+
<Title><CardTitle>Mix and match</CardTitle></Title>
113+
<Body>
114+
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
115+
Stack the columns on mobile by making one full-width and the other half-width
116+
<Row>
117+
<Column Classes="col._12.col.md._8"><Card><Title>@col._12.col.md._8</Title></Card></Column>
118+
<Column Classes="col._6.col.md._4"><Card><Title>@col._6.col.md._4</Title></Card></Column>
119+
</Row>
120+
Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop
121+
<Row>
122+
<Column Classes="col._6.col.md._4"><Card><Title>@col._6.col.md._4</Title></Card></Column>
123+
<Column Classes="col._6.col.md._4"><Card><Title>@col._6.col.md._4</Title></Card></Column>
124+
<Column Classes="col._6.col.md._4"><Card><Title>@col._6.col.md._4</Title></Card></Column>
125+
</Row>
126+
Columns are always 50% wide, on mobile and desktop
127+
<Row>
128+
<Column Classes="col._6"><Card><Title>@col._6</Title></Card></Column>
129+
<Column Classes="col._6"><Card><Title>@col._6</Title></Card></Column>
130+
</Row>
131+
</Body>
132+
</Card>
63133
</ContentMain>

0 commit comments

Comments
 (0)