Merge pull request #359 from Hiyorimi/bootstrap4

Bootstrap4

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

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

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

@@ -32,9 +32,8 @@
 {% 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) %}
 {% if messages %}
         <div class="row">
@@ -51,9 +50,8 @@
 {% endwith %}
 
 {% block content %}{% endblock %}
-  </div>
+</main>
 
-</div><!-- end container -->
 
 {% include "footer.html" %}
 

{{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">
-
-  <!-- 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>
+<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 %}
+    {% 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>
+  <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>
+
+  <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>
+    <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>
-        <li><a class="navbar-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">
+    <form class="form-inline" id="loginForm" method="POST" 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") }}
+      <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 %}

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

{{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">
+    <div class="container">
     {% endraw %}
-  <h1>Welcome to {{ cookiecutter.project_name }}</h1>
+      <h1 class="display-3">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>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 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 &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-default">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-default">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 }}
@@ -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>

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html

@@ -1,7 +1,9 @@
 {% raw %}
 {% extends "layout.html" %}
 {% block content %}
+    <div class="container">
         <h1>Welcome {{ current_user.username }}</h1>
         <h3>This is the members-only page.</h3>
+    </div>
 {% endblock %}
 {% endraw%}