-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (40 loc) · 1.84 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Initialize</title>
<!-- Load Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!--Content-->
<div class="container-fluid mt-3">
<h1>Auto Layout Columns</h1>
<p>In Bootstrap 5, there is an easy way to create equal width columns: just use the <code>.col-size</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
<p>Two columns: 50% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 2</div>
<div class="col-sm bg-dark text-white p-3">2 of 2</div>
</div>
</div>
<br>
<p>Four columns: 25% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 4</div>
<div class="col-sm bg-dark text-white p-3">2 of 4</div>
<div class="col-sm bg-primary text-white p-3">3 of 4</div>
<div class="col-sm bg-dark text-white p-3">4 of 4</div>
</div>
</div>
</div>
<!--End Content-->
<!-- Load jQuery and Popper.js -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<!-- Load Bootstrap JS -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Include your custom JavaScript here -->
<script src="/renderer/index.js"></script>
</body>
</html>