Bootstrapify the form

1 files changed, 12 insertions, 12 deletions

diff --git a/templates/beerpage.jinja2 b/templates/beerpage.jinja2
index f16660c..bc5ed9a 100644
--- a/templates/beerpage.jinja2
+++ b/templates/beerpage.jinja2
@@ -18,23 +18,23 @@
             </tr>
         </table>
     </div>
-    <form action="" method="post">
+    <form action="" method="post" class="form-inline">
       <p>
         Show me beers which are
-        <select name="direction">
-            <option value="3">Much more</option>
-            <option value="2">More</option>
-            <option value="1">Little more</option>
-            <option value="-1">Little less</option>
-            <option value="-2">Less</option>
-            <option value="-3">Much less</option>
+        <select name="direction" class="form-control">
+            <option {% if direction == '3' %}selected{% endif %} value="3">Much more</option>
+            <option {% if direction == '2' %}selected{% endif %} value="2">More</option>
+            <option {% if direction == '1' %}selected{% endif %} value="1">Little more</option>
+            <option {% if direction == '-1' %}selected{% endif %} value="-1">Little less</option>
+            <option {% if direction == '-2' %}selected{% endif %} value="-2">Less</option>
+            <option {% if direction == '-3' %}selected{% endif %} value="-3">Much less</option>
         </select>
-        <select name="attr">
-          {% for attr in attrs %}
-            <option value="{{ attr }}"> {{ attr }}</option>
+        <select name="attr" class="form-control">
+          {% for a in attrs %}
+            <option {% if a == attr %}selected{% endif %} value="{{ a }}">{{ a }}</option>
           {% endfor %}
         </select>
-        <input type="submit" value="Go">
+        <input type="submit" value="Go" class="btn btn-outline-primary">
       </p>
     </form>
     {% if direction and attr %}