-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgridsBootstrap.html
156 lines (139 loc) · 5.39 KB
/
gridsBootstrap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style media="screen">
.boxy{
background: #b3ddff;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- For more information visit https://getbootstrap.com/docs/4.0/layout/grid/ -->
<!-- and https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background -->
<!-- You can use Cmd+Shift+L for multi-line writing -->
<!-- There are five responsive "breakpoints" you can use: (xs),sm,md,lg,xl -->
<!-- Must be inside of a container with a class='row' -->
<!-- Unless specified, elements inside a row take up equal width -->
<!-- Example 1 -->
<div class="container">
<h4>Flexbox Container</h4>
<div class="row">
<div class="col-lg boxy" >A Col-Large</div>
<div class="col-lg boxy" >B Col-Large</div>
<div class="col-lg boxy" >C Col-Large</div>
</div>
<div class="row">
<div class="col-md boxy" >A Col-Medium</div>
<div class="col-md boxy" >B Col-Medium</div>
<div class="col-md boxy" >C Col-Medium</div>
</div>
<div class="row">
<div class="col-sm boxy" >A Col-Small</div>
<div class="col-sm boxy" >B Col-Small</div>
<div class="col-sm boxy" >C Col-Small</div>
</div>
</div>
<hr>
<!-- Fluid containers take up 100% of the screen width -->
<!-- Example 2 -->
<div class="container-fluid">
<h4>Flexbox Container-Fluid</h4>
<div class="row">
<div class="col-lg boxy" >A Col-Large 50%</div>
<div class="col-lg boxy" >B Col-Large 50%</div>
</div>
<div class="row">
<div class="col-md boxy" >A Col-Medium 33%</div>
<div class="col-md boxy" >B Col-Medium 33%</div>
<div class="col-md boxy" >C Col-Medium 33%</div>
</div>
<div class="row">
<div class="col-sm boxy" >A Col-Small 25%</div>
<div class="col-sm boxy" >B Col-Small 25%</div>
<div class="col-sm boxy" >C Col-Small 25%</div>
<div class="col-sm boxy" >D Col-Small 25%</div>
</div>
</div>
<hr>
<!-- Alternatively, there are 12 cols that you can use -->
<!-- Grid class format is col-ScreenSize-colnum -->
<!-- Example 3 -->
<div class="container">
<h4>Grid System Container (12 column)</h4>
<div class="row">
<div class="col-md-6 boxy" >A Col-Medium-6</div>
<div class="col-md-4 boxy" >B Col-Medium-4</div>
<div class="col-md-2 boxy" >C Col-Medium-2</div>
</div>
<div class="row">
<div class="col-sm-6 boxy" >A Col-Small-6</div>
<div class="col-sm-4 boxy" >B Col-Small-4</div>
<div class="col-sm-2 boxy" >C Col-Small-2</div>
</div>
<p>Note that all elements stack as soon as the window reaches its breakpoint.</p>
</div>
<hr>
<!-- You can combine size classes to change the behavior at different breakpoints -->
<!-- Example 4 -->
<div class="container">
<h4>Grid System Container (varied responsiveness)</h4>
<div class="row">
<div class="col-md-3 col-sm-6 boxy" >A Col-Medium-3 and Small-6</div>
<div class="col-md-3 col-sm-6 boxy" >B Col-Medium-3 and Small-6</div>
<div class="col-md-3 col-sm-6 boxy" >C Col-Medium-3 and Small-6</div>
<div class="col-md-3 col-sm-6 boxy" >D Col-Medium-3 and Small-6</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-4 boxy" >A Col-Medium-6 and Small-4</div>
<div class="col-md-4 col-sm-4 boxy" >B Col-Medium-4 and Small-4</div>
<div class="col-md-2 col-sm-4 boxy" >C Col-Medium-2 and Small-4</div>
</div>
<div class="row">
<div class="col-sm-6 boxy" >A Col-Small-6 only</div>
<div class="col-sm-4 boxy" >B Col-Small-4 only</div>
<div class="col-sm-2 boxy" >C Col-Small-2 only</div>
</div>
<p>Note the change in relative sizes at the small breakpoint.</p>
</div>
<hr>
<!-- If you set the grid for just one element, the others automatically adjust -->
<!-- Example 5 -->
<div class="container">
<h4>Auto-layout with Flexbox</h4>
<div class="row">
<div class="col boxy" >A</div>
<div class="col-6 boxy">B (6 columns wide)</div>
<div class="col boxy">C</div>
</div>
<div class="row">
<div class="col boxy" >A</div>
<div class="col-5 boxy">B (5 columns wide)</div>
<div class="col boxy">C</div>
</div>
<p>Since no breakpoint was set, the default "xs" is used, suitable for mobile devices</p>
</div>
<hr>
<!-- Nested Rows allow you to further divide the grid beyond 12 units -->
<!-- Example 6 -->
<div class="container">
<h4>Nesting</h4>
<div class="row">
<div class="col-lg-6 boxy" >TOP LEVEL</div>
<div class="col-lg-6 boxy" >
<div class="row">
<div class="col-md-6 boxy">NEST ONE</div>
<div class="col-md-6 boxy">NEST TWO</div>
</div>
</div>
</div>
<p>NEST ONE and NEST TWO occupy a row <em>inside</em> the TOP LEVEL row.</p>
</div>
<hr>
</body>
</html>