Finished transition to BS4. Fixes #313 and #266

{{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">
+<main role="main">
-    {% with messages = get_flashed_messages(with_categories=true) %}
+{% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
+{% if messages %}
-    <div class="row">
+<div class="row">
-      <div class="col-md-12">
+  <div class="col-md-12">
-        {% for category, message in messages %}
+    {% for category, message in messages %}
-        <div class="alert alert-{{ category }}">
+    <div class="alert alert-{{ category }}">
-          <a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
+      <a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
-         {{message}}
+     {{message}}
-        </div><!-- end .alert -->
+    </div><!-- end .alert -->
-        {% endfor %}
+    {% endfor %}
-      </div><!-- end col-md -->
+  </div><!-- end col-md -->
-    </div><!-- end row -->
+</div><!-- end row -->
-        {% endif %}
+    {% endif %}
-    {% endwith %}
+{% endwith %}
 
-    {% block content %}{% endblock %}
+{% block content %}{% endblock %}
-  </div>
+</main>
 
-</div><!-- end container -->
 
 {% include "footer.html" %}
 

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html

@@ -31,7 +31,7 @@
       </li>
     </ul>
     {% elif form %}
-    <form class="form" id="loginForm" method="POST" action="/" role="login">
+    <form class="form-inline my-2" 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",

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html

@@ -3,9 +3,9 @@
 
 {% block content %}
 <div class="container">
-    <h1>About</h1>
+    <h1 class="mt-5">About</h1>
     <div class="row">
-      <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 %}

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html

@@ -2,30 +2,32 @@
 {% extends "layout.html" %}
 {% block content %}
 <!-- Main jumbotron for a primary marketing message or call to action -->
-<div class="jumbotron my-2">
+<div class="jumbotron">
-{% endraw %}
+    <div class="container">
-  <h1>Welcome to {{ cookiecutter.project_name }}</h1>
+    {% endraw %}
-{% raw %}
+      <h1 class="display-3">Welcome to {{ cookiecutter.project_name }}</h1>
-  <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>
+    {% raw %}
-  <p><a href="https://github.com/sloria/cookiecutter-flask" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+      <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 &raquo;</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 4</h2>
       <p>Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
-      <p><a class="btn btn-primary" href="http://getbootstrap.com/">Official website &raquo;</a></p>
+      <p><a class="btn btn-outline-secondary" href="http://getbootstrap.com/">Official website &raquo;</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-primary">Official website &raquo;</a></p>
+      <p><a href="http://www.sqlalchemy.org/" class="btn btn-outline-secondary">Official website &raquo;</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-primary">Official website &raquo;</a></p>
+      <p><a href="http://wtforms.simplecodes.com/" class="btn btn-outline-secondary">Official website &raquo;</a></p>
     </div>
   </div><!-- /.row -->
 </div>

{{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 }}