diff --git a/{{cookiecutter.app_name}}/assets/js/main.js b/{{cookiecutter.app_name}}/assets/js/main.js
index bb66bea1a85706daa0c0e909ad00377ebe514e83..ed90e69617c404c566beff8c17490d63751617b5 100644
--- a/{{cookiecutter.app_name}}/assets/js/main.js
+++ b/{{cookiecutter.app_name}}/assets/js/main.js
@@ -7,6 +7,7 @@
// JavaScript modules
require('jquery');
require('font-awesome-webpack');
+require('popper.js');
require('bootstrap');
// Your own code
diff --git a/{{cookiecutter.app_name}}/package.json b/{{cookiecutter.app_name}}/package.json
index da1d4d0ae783b37e46154b0de76cc318284d44a2..f1aa713c1616afd73069acc4f9a448ba5159216e 100644
--- a/{{cookiecutter.app_name}}/package.json
+++ b/{{cookiecutter.app_name}}/package.json
@@ -21,9 +21,10 @@
},
"homepage": "https://github.com/{{cookiecutter.github_username}}/{{cookiecutter.app_name}}#readme",
"dependencies": {
- "bootstrap": "^3.3.7",
+ "bootstrap": "^4.1.3",
"font-awesome": "^4.7.0",
- "jquery": "^3.2.1"
+ "jquery": "^3.2.1",
+ "popper.js": "^1.14.3"
},
"devDependencies": {
"babel-core": "^6.25.0",
@@ -45,6 +46,7 @@
"style-loader": "^0.23.0",
"url-loader": "^1.0.1",
"webpack": "^2.6.1",
- "webpack-dev-server": "^3.1.5"
+ "webpack-dev-server": "^3.1.5",
+ "sync-exec": "^0.6.2"
}
}
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html
index 725edb443f2d17a99529a8fa7e5ff64a806fc4f9..b0a83de9c39816fff792f966ed1ba31b5d6bbd6a 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html
@@ -32,28 +32,26 @@
{% endwith %}
<header>{% block header %}{% endblock %}</header>
-<div class="{% block content_class %}container{% endblock content_class %}">
- <div role="main">
- {% with messages = get_flashed_messages(with_categories=true) %}
- {% if messages %}
- <div class="row">
- <div class="col-md-12">
- {% for category, message in messages %}
- <div class="alert alert-{{ category }}">
- <a class="close" title="Close" href="#" data-dismiss="alert">×</a>
- {{message}}
- </div><!-- end .alert -->
- {% endfor %}
- </div><!-- end col-md -->
- </div><!-- end row -->
- {% endif %}
- {% endwith %}
+<main role="main">
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+ <div class="row">
+ <div class="col-md-12">
+ {% for category, message in messages %}
+ <div class="alert alert-{{ category }}">
+ <a class="close" title="Close" href="#" data-dismiss="alert">×</a>
+ {{message}}
+ </div><!-- end .alert -->
+ {% endfor %}
+ </div><!-- end col-md -->
+ </div><!-- end row -->
+{% endif %}
+{% endwith %}
- {% block content %}{% endblock %}
- </div>
+{% block content %}{% endblock %}
+</main>
-</div><!-- end container -->
{% include "footer.html" %}
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
index faeec2d1abfe6ef04edf369d633ea3c10aada47a..29deea0352c42d86acf6f1b883c909b48e23a386 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
@@ -1,49 +1,50 @@
{% raw %}
-<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
- <div class="container">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+ <a class="navbar-brand" href="{{ url_for('public.home') }}">
+ {% endraw %} {{cookiecutter.project_name}} {% raw %}
+ </a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="{{ url_for('public.home') }}">
-{% endraw %}
- {{cookiecutter.project_name}}
-{% raw %}
- </a>
- </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse navbar-ex1-collapse">
- <ul class="nav navbar-nav">
- <li><a href="{{ url_for('public.home') }}">Home</a></li>
- <li><a href="{{ url_for('public.about') }}">About</a></li>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="{{ url_for('public.home') }}">Home
+ <span class="sr-only">(current)</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('public.about') }}">About</a>
+ </li>
</ul>
{% if current_user and current_user.is_authenticated %}
- <ul class="nav navbar-nav navbar-right">
- <li>
- <p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
- </li>
- <li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>
-
+ <ul class="navbar-nav my-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('public.logout') }}">
+ <i class="fa fa-sign-out"></i>
+ </a>
+ </li>
</ul>
{% elif form %}
- <ul class="nav navbar-nav navbar-right">
- <li><a href="{{ url_for('public.register') }}">Create account</a></li>
- </ul>
- <form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
- <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
- <div class="form-group">
- {{ form.username(placeholder="Username", class_="form-control") }}
- {{ form.password(placeholder="Password", class_="form-control") }}
+ <form class="form-inline" id="loginForm" method="POST" action="/" role="login">
+ <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+ <div class="input-group mb-2 mr-sm-2">
+ {{ form.username(placeholder="Username", class_="form-control mr-sm-1 my-auto") }} {{ form.password(placeholder="Password",
+ class_="form-control mr-sm-1 my-auto") }}
+ <button class="btn btn-light btn-primary m-auto" type="submit">Login</button>
</div>
- <button type="submit" class="btn btn-default">Log in</button>
</form>
+ <ul class="navbar-nav my-auto">
+ <li class="nav-item">
+ <a class="nav-link navbar-text" href="{{ url_for('public.register') }}">Create account</a>
+ </li>
+ </ul>
{% endif %}
</div><!-- /.navbar-collapse -->
- </div><!-- /.container -->
</nav>
-{% endraw %}
+{% endraw %}
\ No newline at end of file
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
index 1d31fad28b202ca73140b3ccdd0423d39fe40068..4dcb7c1da5cc6d6339d94292dac9ccb7fab53a60 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
@@ -2,10 +2,10 @@
{% extends "layout.html" %}
{% block content %}
-<div class="body-content">
+<div class="container">
+ <h1 class="mt-5">About</h1>
<div class="row">
- <h1>About</h1>
- <p>This template was created by <a href="http://github.com/sloria/">Steven Loria</a> for use with the <a href="http://github.com/audreyr/cookiecutter/">cookiecutter</a> package by <a href="http://github.com/audreyr/">Audrey Roy</a>.</p>
+ <p class="lead">This template was created by <a href="http://github.com/sloria/">Steven Loria</a> for use with the <a href="http://github.com/audreyr/cookiecutter/">cookiecutter</a> package by <a href="http://github.com/audreyr/">Audrey Roy</a>.</p>
</div>
</div>
{% endblock %}
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
index 3485a6da722d7097202acbd3aead74d4e22980c1..0a9cd83e88a90c0f769e85c09ca85ea82e60ddba 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
@@ -3,29 +3,31 @@
{% block content %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
-{% endraw %}
- <h1>Welcome to {{ cookiecutter.project_name }}</h1>
-{% raw %}
- <p>This is a starter Flask template. It includes Bootstrap 3, jQuery 2, Flask-SQLAlchemy, WTForms, and various testing utilities out of the box.</p>
- <p><a href="https://github.com/sloria/cookiecutter-flask" class="btn btn-primary btn-large">Learn more »</a></p>
+ <div class="container">
+ {% endraw %}
+ <h1 class="display-3">Welcome to {{ cookiecutter.project_name }}</h1>
+ {% raw %}
+ <p>This is a starter Flask template. It includes Bootstrap 4, jQuery 3, Flask-SQLAlchemy, WTForms, and various testing utilities out of the box.</p>
+ <p><a href="https://github.com/sloria/cookiecutter-flask" class="btn btn-primary btn-large">Learn more »</a></p>
+ </div>
</div><!-- /.jumbotron -->
-<div class="body-content">
+<div class="container">
<div class="row">
<div class="col-lg-4">
- <h2><i class="fa fa-code"></i> Bootstrap 3</h2>
+ <h2><i class="fa fa-code"></i> Bootstrap 4</h2>
<p>Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
- <p><a class="btn btn-default" href="http://getbootstrap.com/">Official website »</a></p>
+ <p><a class="btn btn-outline-secondary" href="http://getbootstrap.com/">Official website »</a></p>
</div>
<div class="col-lg-4">
<h2><i class="fa fa-flask"></i> SQLAlchemy</h2>
<p>SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.</p>
- <p><a href="http://www.sqlalchemy.org/" class="btn btn-default">Official website »</a></p>
+ <p><a href="http://www.sqlalchemy.org/" class="btn btn-outline-secondary">Official website »</a></p>
</div>
<div class="col-lg-4">
<h2><i class="fa fa-edit"></i> WTForms</h2>
<p>WTForms is a flexible forms validation and rendering library for python web development.</p>
- <p><a href="http://wtforms.simplecodes.com/" class="btn btn-default">Official website »</a></p>
+ <p><a href="http://wtforms.simplecodes.com/" class="btn btn-outline-secondary">Official website »</a></p>
</div>
</div><!-- /.row -->
</div>
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
index 7a970350d123f681f2546c3160cb52f2d619b9a5..d36caa5d2308ece72b6979694b694f22eaee53e6 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
@@ -2,7 +2,7 @@
{% extends "layout.html" %}
{% block content %}
<div class="container-narrow">
- <h1>Register</h1>
+ <h1 class="mt-5">Register</h1>
<br/>
<form id="registerForm" class="form form-register" method="POST" action="" role="form">
{{ form.csrf_token }}
@@ -13,6 +13,7 @@
<div class="form-group">
{{form.email.label}}
{{form.email(placeholder="Email", class_="form-control")}}
+ <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
{{form.password.label}}
@@ -22,7 +23,7 @@
{{form.confirm.label}}
{{form.confirm(placeholder="Password (again)", class_="form-control")}}
</div>
- <p><input class="btn btn-default btn-submit" type="submit" value="Register"></p>
+ <p><input class="btn btn-primary" type="submit" value="Register"></p>
</form>
<p><em>Already registered?</em> Click <a href="/">here</a> to login.</p>
</div>
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html
index 5179bfb62b6ac2f9bf6eb22677d51f9d14c7157b..6bd2c266834d9875501a8c6adf810574c75614a6 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html
@@ -1,7 +1,9 @@
{% raw %}
{% extends "layout.html" %}
{% block content %}
- <h1>Welcome {{ current_user.username }}</h1>
- <h3>This is the members-only page.</h3>
+ <div class="container">
+ <h1>Welcome {{ current_user.username }}</h1>
+ <h3>This is the members-only page.</h3>
+ </div>
{% endblock %}
{% endraw%}