-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcolumns.html
More file actions
111 lines (99 loc) · 4.99 KB
/
columns.html
File metadata and controls
111 lines (99 loc) · 4.99 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Layouts</title>
</head>
<body class="bg-dark">
<header id="page-hero" class="site-header d-flex flex-column align-content-between">
<nav class="site-nav family-sans navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<button
type="button"
class="navbar-toggler"
data-toggle="collapse"
data-target="#myTogglerNav"
aria-controls="myTogglerNav"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand text-uppercase" href="#page-hero"><a class="navbar-brand text-uppercase" href="index.html">Layout</a>
<div class="collapse navbar-collapse" id="myTogglerNav">
<div class="navbar-nav ml-auto font-weight-regular text-uppercase">
<a class="nav-item nav-link" href="index.html">home</a>
<a class="nav-item nav-link text-white" href="columns.html">columns</a>
<a class="nav-item nav-link" href="media.html">media</a>
</div>
</div>
</div>
</nav>
<article id="page-multicolumn" class="page-section vertical-padding bg-white">
<header class="container">
<h2 class="display-4 pt-4 text-center">Multi-column</h2>
<p class="lead mx-md-5">
This layout uses multiple column rules so that how many columns each group takes depends on the width of the browser, by also using the
<code>justify-content-center</code> class on the row, using less than 12 columns results in a centered set of columns. The rules used are
<code>col-10</code>
<code>col-md-6</code>
<code>col-lg-4</code>
<code>col-xl-3</code>.
</p>
</header>
<section class="container family-sans text-uppercase text-center py-4">
<div class="row justify-content-center py-2">
<section class="mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=A" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=B" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=C" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=D" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=E" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=F" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=G" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
<section class="text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3">
<img class="img-fluid rounded" src="https://dummyimage.com/800x400/6/f.png&text=H" alt="sample image" />
<h5 class="mt-1">Text Heading</h5>
</section>
</div>
</section>
</article>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
</body>
</html>