Skip to content

Commit 0749f8b

Browse files
Eric RobyEric Roby
Eric Roby
authored and
Eric Roby
committed
adding bootstrap training material
1 parent b701e7a commit 0749f8b

File tree

17 files changed

+541
-0
lines changed

17 files changed

+541
-0
lines changed

‎source-code/bootstrap-training/1. Containers/home.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Hello, worldasd!</h1>
13+
test
14+
</div>
15+
16+
<!-- JavaScript Bundle with Popper -->
17+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
18+
</body>

‎source-code/bootstrap-training/10 accordions/home.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="accordion">
13+
<div class="accordion-item">
14+
<h2 class="accordion-header">
15+
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
16+
Learn more here
17+
</button>
18+
</h2>
19+
<div id="collapseOne" class="accordion-collapse collapse show">
20+
<div class="accordion-body">
21+
Here is what you can learn
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<!-- JavaScript Bundle with Popper -->
29+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
30+
</body>

‎source-code/bootstrap-training/11. Columns in rows/home.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="row">
13+
<div class="col">
14+
This is a col
15+
</div>
16+
<div class="col-lg-10 col-2">
17+
asd
18+
</div>
19+
<!-- <div class="col">
20+
This is a col
21+
</div>
22+
<div class="col">
23+
This is a col
24+
</div>
25+
<div class="col">
26+
This is a col
27+
</div> -->
28+
</div>
29+
</div>
30+
31+
<!-- JavaScript Bundle with Popper -->
32+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
33+
</body>

‎source-code/bootstrap-training/12. Rows and columns/home.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="row">
13+
<div class="col">
14+
<div class="row">
15+
<div class="col">inside row</div>
16+
<div class="col">inside row</div>
17+
</div>
18+
</div>
19+
<div class="col">
20+
This is a col
21+
</div>
22+
</div>
23+
</div>
24+
25+
<!-- JavaScript Bundle with Popper -->
26+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
27+
</body>

‎source-code/bootstrap-training/13. Tables/home.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<!--
13+
table table-striped
14+
table table-hover
15+
table table-striped table-hover
16+
-->
17+
<table class="table">
18+
<thead>
19+
<tr>
20+
<th scope="col">#</th>
21+
<th scope="col">First</th>
22+
<th scope="col">Last</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
<tr>
27+
<th scope="row">1</th>
28+
<td>Eric</td>
29+
<td>Chad</td>
30+
</tr>
31+
<tr>
32+
<th scope="row">2</th>
33+
<td>Roby</td>
34+
<td>Darby</td>
35+
</tr>
36+
</tbody>
37+
</table>
38+
</div>
39+
40+
<!-- JavaScript Bundle with Popper -->
41+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
42+
</body>

‎source-code/bootstrap-training/14. Forms Basic/home.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container mt-3">
12+
<form>
13+
<div class="mb-3">
14+
<label for="inputControl" class="form-label">Email address</label>
15+
<input type="email" class="form-control" id="inputControl" placeholder="[email protected]">
16+
</div>
17+
<div class="mb-3">
18+
<label for="textControl" class="form-label">Example textarea</label>
19+
<textarea class="form-control" id="textControl" rows="3"></textarea>
20+
</div>
21+
<!-- <div class="form-check">
22+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
23+
<label class="form-check-label" for="flexCheckDefault">
24+
Default checkbox
25+
</label>
26+
</div>
27+
<div class="form-check">
28+
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
29+
<label class="form-check-label" for="flexRadioDefault1">
30+
Default radio
31+
</label>
32+
</div>
33+
<div class="form-check">
34+
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
35+
<label class="form-check-label" for="flexRadioDefault2">
36+
Default checked radio
37+
</label>
38+
</div> -->
39+
<button class="btn btn-primary" type="submit">Submit form</button>
40+
</form>
41+
</div>
42+
43+
<!-- JavaScript Bundle with Popper -->
44+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
45+
</body>

‎source-code/bootstrap-training/15. Forms/home.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container mt-3">
12+
<form>
13+
<div class="mb-3">
14+
<label for="inputControl" class="form-label">Email address</label>
15+
<input type="email" class="form-control" id="inputControl" placeholder="[email protected]">
16+
</div>
17+
<div class="mb-3">
18+
<label for="textControl" class="form-label">Example textarea</label>
19+
<textarea class="form-control" id="textControl" rows="3"></textarea>
20+
</div>
21+
<div class="input-group">
22+
<div class="form-check">
23+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
24+
<label class="form-check-label" for="flexCheckDefault">
25+
Default checkbox
26+
</label>
27+
</div>
28+
<div class="form-check">
29+
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
30+
<label class="form-check-label" for="flexRadioDefault1">
31+
Default radio
32+
</label>
33+
</div>
34+
<div class="form-check">
35+
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
36+
<label class="form-check-label" for="flexRadioDefault2">
37+
Default checked radio
38+
</label>
39+
</div>
40+
</div>
41+
<button class="btn btn-primary" type="submit">Submit form</button>
42+
</form>
43+
</div>
44+
45+
<!-- JavaScript Bundle with Popper -->
46+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
47+
</body>

‎source-code/bootstrap-training/16. Modals/home.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container mt-3">
12+
<!-- Button trigger modal -->
13+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#openmodel">
14+
Launch modal
15+
</button>
16+
17+
<!-- Modal -->
18+
<div class="modal fade" id="openmodel">
19+
<div class="modal-dialog">
20+
<div class="modal-content">
21+
<div class="modal-header">
22+
<h1 class="modal-title">Hello!</h1>
23+
<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
24+
</div>
25+
<div class="modal-body">
26+
Welcome to this course!
27+
</div>
28+
<div class="modal-footer">
29+
<button type="button" class="btn btn-primary">Save changes</button>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
36+
<!-- JavaScript Bundle with Popper -->
37+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
38+
</body>

‎source-code/bootstrap-training/17. Hide/home.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container mt-3">
12+
<div class="d-none d-md-block">This text is hidden on small screens and visible on medium screens and up.</div>
13+
<div class="d-block d-md-none">Blah blah blah.</div>
14+
</div>
15+
16+
<!-- JavaScript Bundle with Popper -->
17+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
18+
</body>

‎source-code/bootstrap-training/2. Buttons/home.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="btn-group-sm">
13+
<button type="button" class="btn btn-primary ">Primary</button>
14+
<button type="button" class="btn btn-primary btn-sm">Primary</button>
15+
<button type="button" class="btn btn-primary btn-lg">Primary</button>
16+
<button type="button" class="btn btn-primary" disabled>
17+
Primary button
18+
</button>
19+
<button type="button" class="btn btn-secondary">Secondary</button>
20+
<button type="button" class="btn btn-success">Success</button>
21+
<button type="button" class="btn btn-danger">Danger</button>
22+
<button type="button" class="btn btn-warning">Warning</button>
23+
<button type="button" class="btn btn-info">Info</button>
24+
<button type="button" class="btn btn-light">Light</button>
25+
<button type="button" class="btn btn-dark">Dark</button>
26+
<button type="button" class="btn btn-link">Link</button>
27+
</div>
28+
<div class="btn-group-sm">
29+
<button type="button" class="btn btn-outline-primary">Primary</button>
30+
<button type="button" class="btn btn-outline-secondary">Secondary</button>
31+
<button type="button" class="btn btn-outline-success">Success</button>
32+
<button type="button" class="btn btn-outline-danger">Danger</button>
33+
<button type="button" class="btn btn-outline-warning">Warning</button>
34+
<button type="button" class="btn btn-outline-info">Info</button>
35+
<button type="button" class="btn btn-outline-light">Light</button>
36+
<button type="button" class="btn btn-outline-dark">Dark</button>
37+
<button type="button" class="btn btn-outline-link">Link</button>
38+
</div>
39+
</div>
40+
41+
<!-- JavaScript Bundle with Popper -->
42+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
43+
</body>

‎source-code/bootstrap-training/3. Dropdowns/home.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap 5 Example</title>
7+
<!-- CSS only -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<div class="container mt-3">
12+
<div class="dropdown">
13+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
14+
Dropdown button
15+
</button>
16+
<ul class="dropdown-menu">
17+
<li><a class="dropdown-item" href="#">Do something</a></li>
18+
<li><a class="dropdown-item" href="#">Do something else</a></li>
19+
<li><a class="dropdown-item" href="#">Do something else else</a></li>
20+
</ul>
21+
</div>
22+
</div>
23+
24+
<!-- JavaScript Bundle with Popper -->
25+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
26+
</body>

0 commit comments

Comments
 (0)