{"id":2293,"date":"2019-07-14T22:30:22","date_gmt":"2019-07-14T20:30:22","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=2293"},"modified":"2019-09-20T18:24:31","modified_gmt":"2019-09-20T16:24:31","slug":"flask-11-bootstrap","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/flask-11-bootstrap\/","title":{"rendered":"Flask 11 &#8211; Bootstrap"},"content":{"rendered":"<p>Welcom back to our serie of posts about flask: how to create a blog with python and flask&#8230;<\/p>\n<p>Now we are going to add bootstrap to our blog, to make it <strong>responsive<\/strong>. This is great to make our site usable on every device of every size.<\/p>\n<p><iframe loading=\"lazy\" title=\"Flask 11 - Add bootstrap to our blog made with Python\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/93VpsSYmk7k?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<script>\r\n\tif (typeof title != \"undefined\")\r\n\t{\r\n\t\tlet title = \"Flask\";\r\n\t\tlet links = []\r\n\t}\r\n\telse \r\n\t{\r\n\t\ttitle = \"Flask\";\r\n\t}\r\n\r\nlinks = [\r\n\t\t\t\/\/ -------------------20.9.2019 ---------------------------------\r\n[\"https:\/\/pythonprogramming.altervista.org\/how-to-render-html-into-flask-variables-passed-to-the-pages\/\",\r\n \"Render HTML in Flask\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-12-add-a-navigation-bar-to-the-blog\/\",\"Add a menu (11)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-flask-on-glitch-edited-with-visual-studio-code\/\",\"Visual Studio Code on Glitch (with flask)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-11-bootstrap\/\",\"Bootstrap with Flask(10)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/put-our-flask-blog-on-glitch-com-for-free\/\",\"Free blog with Flask and Glitch.me\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-9-use-css-in-the-template\/\",\"Css on Flask (9)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-8-templates\/\",\"Templates in Flask (8)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-7-the-if-condition\/\",\"The if condition - Flask 7\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-6-jinga2-and-code-into-html-pages\/\",\"jinga2 and code in Html page in Flask (6)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-and-flask-blog-part-5\/\",\"Python and flask 5\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/setting-up-flask-to-make-our-blog\/\",\"Setting up Flask 5\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-p-3-lets-make-the-first-web-pages\/\",\"Flask 1st web page 4\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-2-use-visual-studio-code-in-the-environment\/\",\"Visual code and Flask 3\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/install-flask-in-a-brand-new-environment\/\",\"Flask in a new Python environment 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/on-the-web-with-python-and-flask-1\/\",\"Web with flask 1\"]\r\n];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"Add bootstrap to our blog\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/flask-11-bootstrap\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":2294,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[420],"tags":[435,442,346,4],"class_list":["post-2293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flask","tag-blog","tag-bootstrap","tag-flask","tag-python"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=2293"}],"version-history":[{"count":3,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2293\/revisions"}],"predecessor-version":[{"id":3710,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2293\/revisions\/3710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/2294"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=2293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=2293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=2293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}