-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid1.html
96 lines (91 loc) · 5.7 KB
/
grid1.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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Bootstrap and grids</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bgColor.css">
<link rel="stylesheet" href="css/site.css">
</head>
<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bootstrap Grids</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="grid1.html">Grid 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid2.html">Grid 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid3.html">Grid 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid4.html">Grid 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid5.html">Grid 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid6.html">Grid 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid7.html">Grid 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid8.html">Grid 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="grid9.html">Grid 9</a>
</li>
</ul>
</div>
</div>
</nav>
<!--row-cols-md-2 controls how many columns we have when are dealing with a medium sized screen, such anything>= the size of an iPad Pro Screen-->
<main class="flex-shrink-0">
<div class="container h-100 minHeight">
<!--gutter classes are mainly applied to things such as the row, can be written as g-(number)-->
<!--Everything in bootstrap is made based upon the grid system, the grid system contains rows and columns, a row has 12 unites it can split upon columns so there can only be 12 columns inside of a single row-->
<div class="row row-cols-1 row-cols-md-2 gx-2 h-100"> <!--columns must be inside of a parent element with a row--> <!--row-cols-1 will make it so that there is only ever 1 column for that row-->
<div class="col"> <!--Neither of the columns in this grid have any number attached to it so the columns in this row will take up space evenly, since the maxmimum space is 12 unites and we have 2 columns each column gets 6 units fo width.-->
<div class="bg-dark text-light h-100 p-3"> <!--To use padding you can do p-(1-5) this will put padding at the top, left, right, bottom can do (pt=padding-top, pb=padding-bottom, pl=padding-left, pr=padding-right)-->
<h1>Col One</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut enim consequuntur iste sit, totam quibusdam dolorem ullam ipsum deleniti expedita obcaecati nulla consectetur repudiandae, perspiciatis eaque excepturi. Doloribus ex aut ab, odit delectus soluta voluptatibus adipisci modi quos quo? Alias, architecto dolorem magni consequatur expedita deleniti quasi dignissimos? Quos corrupti id sit hic fugiat nemo magnam rem rerum perspiciatis tempore, sunt officiis soluta, aspernatur animi quasi quod qui ipsa earum vel labore expedita architecto mollitia aliquid? Corrupti, odio pariatur unde, exercitationem mollitia culpa laboriosam illum, obcaecati enim voluptate quos tempore corporis rerum eius ratione sint incidunt impedit fuga libero magni?</p>
</div>
</div>
<div class="col">
<div class="bg-secondary text-light h-100 p-3"> <!--Change background color, text color and take up all available row space, in this case the available row space is 100-->
<h1>Col Two</h1>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-dark">
<div class="container-fluid text-center">
<span class="text-white">Bootstrap And The Grids By Matthew Snyder</span>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
</body>
</html>