Adding Bootstrap

Subscribe to Tech with Tim

YouTube

What is Bootstrap?

Bootstrap is a web framework built to help you design responsive websites faster. It contains a ton of custom css/javascript and jquery code that you can use to style and layout your website.

Adding Bootstrap

The full instructions on how to add bootstrap can be seen here.

To add Bootstrap you need to a few things into your base template.

First ensure you have "<!doctype html>" at the very top of your base template.

Next, In the head tags of your base template add the following code:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">

Finally add the following code at the END of your body tags:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

And that's it for adding bootstrap!

Using Bootstrap

To see a full list of bootstrap classes and a more in depth tutorial of bootstrap click here.

I am simply going to use bootstrap to style my site. Feel free to mess around with different classes and make your site look different.

Here are the my updated files after styling.

<!-- base.html -->
<!doctype html>
<html>
<head>
	<style type="text/css">
		.sidenav {
			height:100%;
			width:160px;
			position: fixed;
			z-index:1;
			top:0;
			left:0;
			background-color:#111;
			overflow-x: :hidden;
			padding-top:20px;
		}    

                .sidenav a {
			padding:6px 8px 6px 16px;
			text-decoration: none;
			font-size:25px;
			color: #818181;
			display:block;
		}  
  
                .sidenav a:hover{
			color:#f1f1f1;
		}     

                .main{
			margin-left:160px;
			padding: 0px 10px;
		}   
    </style>
 
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
	<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">
 
	<title>{% block title %}Tim's Site{% endblock %}</title>
</head>
 
<body>
	<div class="sidenav">
		<a href="/">Home</a>
		<a href="/create">Create</a>
		<a href="/2">View</a>
	</div>
 
	<div id="content" name="content" class="main">
		<div class="row justify-content-center">
			<div class="col-8">
				<h1 class="mt-2">My Site</h1>
				<hr class="mt-0 mb-4">
				{% block content %}
				{% endblock %}
			</div>
		</div>
	</div>
 
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

{% extends 'main/base.html' %}
{% block title %} Create New List {% endblock %}
{% block content %}
     <h3>Create Page</h3>
     <form method="post" action="/create/" class="form-group">
         {% csrf_token %}
         <div class="input-group mb-3">
             <div class="input-group-prepend">
                 <button type="submit" name="save" class="btn btn-success">Create New</button>
             </div>{{form.name}}
         </div>
    </form>
{% endblock %}

<!-- list.html -->
{% extends "main/base.html" %}
{% block title %}View List{% endblock %}
 
{% block content %}
	<h1>{{ls.name}}</h1>
	<form method="post" action="#">
		{% csrf_token %}
		{% for item in ls.item_set.all %}
		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<div class="input-group-text">
					{% if item.complete == True %}
						<input type="checkbox" value="clicked" name="c{{item.id}}" checked>
					{% else %}
						<input type="checkbox" value="clicked" name="c{{item.id}}">
					{% endif %}
				</div>
			</div>
			<input type="text" value="{{item.text}}" class="form-control">
		</div>
		{% endfor %}
 
		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<button type="submit" name="newItem" value="newItem" class="btn btn-success">Add Item</button>
			</div>
			<input type="text" name="new">
		</div>
 
		<button type="submit" name="save" value="save" class="btn btn-success">Save</button>
	</form>
{% endblock %}

Note: I did not edit home.html

Setup, Installation & Page Navigation

SQLite3 Database Setup

User Registration & Sign Up

User Specific Pages & Data

Next lessonUser Registration & Sign Up

Design & Development by