Skip to content

Commit 4bd632c

Browse files
mitchtabianmitchtabian
committed
Bootstrap Installation and Example
1 parent b4723ee commit 4bd632c

File tree

4 files changed

+95
-18
lines changed

4 files changed

+95
-18
lines changed

‎src/personal/templates/personal/home.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@
33

44
{% block content %}
55

6-
7-
<h1>Registered users:</h1>
8-
{% for user in accounts %}
9-
{{user}}<br>
10-
{% endfor %}
6+
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
7+
<h1 class="display-4">CodingWithMitch Blog</h1>
8+
<p class="lead">In this course you'll learn how to build a simple blog with user registration and blog CRUD functionality. Django is a powerful
9+
framework and you'll see why in this course.</p>
10+
</div>
11+
<hr>
12+
13+
<div class="container">
14+
<div class="d-flex flex-column">
15+
<div class="">
16+
<h4>Registered users:</h1>
17+
{% for user in accounts %}
18+
<p>{{user}}</p>
19+
{% endfor %}
20+
</div>
21+
</div>
22+
</div>
1123

1224

1325

‎src/templates/base.html‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,34 @@
22
<html lang=en>
33

44
<head>
5-
{% if request.user.is_authenticated %}
6-
<p><a href="{% url 'home' %}">Home</a> | <a href="{% url 'account' %}">Account</a> | <a href="{% url 'logout' %}">Logout</a></p>
7-
<p>Hello, {{request.user.username}}</p>
8-
{% else %}
9-
<p><a href="{% url 'home' %}">Home</a> | <a href="{% url 'register' %}">Register</a> | <a href="{% url 'login' %}">Login</a></p>
10-
{% endif %}
11-
<hr>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
129

1310
</head>
1411

1512
<body>
1613

17-
{% block content %}
14+
{% include 'snippets/header.html' %}
1815

19-
{% endblock content %}
16+
<!-- Body -->
17+
<style type="text/css">
18+
.main{
19+
min-height: 100vh;
20+
height: 100%;
21+
}
22+
</style>
23+
<div class="main">
24+
{% block content %}
25+
26+
{% endblock content %}
27+
</div>
28+
<!-- End Body -->
29+
30+
{% include 'snippets/footer.html' %}
2031

2132
</body>
2233

23-
<footer>
24-
<hr>
25-
<p>CodingWithMitch Blog Course | 2019</p>
26-
</footer>
2734

2835
</html>

‎src/templates/snippets/footer.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<style type="text/css">
2+
.footer{
3+
min-height: 100px;
4+
}
5+
</style>
6+
7+
<!-- Footer -->
8+
<hr>
9+
<div class="d-flex flex-row align-items-center footer">
10+
<p class="m-auto">CodingWithMitch Blog Course | 2019</p>
11+
</div>
12+
<!-- End Footer -->
13+
14+
15+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
17+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
18+

‎src/templates/snippets/header.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<style type="text/css">
2+
@media (min-width: 768px) {
3+
html {
4+
font-size: 16px;
5+
}
6+
}
7+
8+
.pricing-header {
9+
max-width: 700px;
10+
}
11+
12+
.card-deck .card {
13+
min-width: 220px;
14+
}
15+
16+
</style>
17+
18+
<!-- Header -->
19+
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
20+
<h5 class="my-0 mr-md-auto font-weight-normal">
21+
{% if request.user.is_authenticated %}
22+
<p>Hello, {{request.user.username}}</p>
23+
{% endif %}
24+
</h5>
25+
<nav class="my-2 my-md-0 mr-md-3">
26+
{% if request.user.is_authenticated %}
27+
<a class="p-2 text-dark" href="{% url 'home' %}">Home</a>
28+
<a class="p-2 text-dark" href="{% url 'account' %}">Account</a>
29+
<a class="p-2 text-dark" href="{% url 'logout' %}">Logout</a>
30+
{% else %}
31+
<a class="p-2 text-dark" href="{% url 'home' %}">Home</a>
32+
<a class="p-2 text-dark" href="{% url 'login' %}">Login</a>
33+
<a class="btn btn-outline-primary" href="{% url 'register' %}">Register</a>
34+
{% endif %}
35+
36+
</nav>
37+
</div>
38+
39+
40+
<!-- End Header -->

0 commit comments

Comments
 (0)