{"id":1454,"date":"2020-02-11T21:24:04","date_gmt":"2020-02-12T02:24:04","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1454"},"modified":"2026-02-10T15:49:52","modified_gmt":"2026-02-10T15:49:52","slug":"bootstrap-playground","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/bootstrap-playground\/","title":{"rendered":"Bootstrap Playground"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2022\/01\/Playground.jpeg\" alt=\"Aerial view of a playground.\" style=\"width:664px;height:992px\" \/><figcaption class=\"wp-element-caption\">Photo by <a href=\"https:\/\/unsplash.com\/@gaddafirusli\">Gaddafi Rusli<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>Now that you&#8217;ve learned why <a href=\"https:\/\/nmi.cool\/webdev\/bootstrap\/\">Bootstrap<\/a> is the best thing since sliced bread, it&#8217;s your turn to slide headfirst into this framework. Leave no stone unturned! <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a new HTML file (bootstrap-playground.html), and save it in your playground folder (same place where we saved all of out HTML &amp; CSS exercises!)<\/li>\n\n\n\n<li>Add the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\" data-type=\"link\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\">Bootstrap starter template<\/a>.<\/li>\n\n\n\n<li>Try on for size all the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/accordion\/\" data-type=\"link\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/accordion\/\">Bootstrap components<\/a>\u2014okay, maybe not all of them, but enough to build a pretty cool website template. Hey, you found an Easter egg! Send me a picture of a boot in Slack so I know you saw this! <\/li>\n\n\n\n<li>Add some images! Rearrange things! Think about how quickly you could have created Project One with this awesome resource. You won&#8217;t immediately know how all the components operate, and that&#8217;s okay. This is your chance to experiment, modify, and make mistakes. Maybe even throw in the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap grid<\/a>, if you&#8217;re feeling bold.<\/li>\n\n\n\n<li>Once you feel semi-proud of your website, upload it to the server or make sure it is saved on your drive.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Now that you&#8217;ve learned why Bootstrap is the best thing since sliced bread, it&#8217;s your turn to slide headfirst into this framework. Leave no stone unturned!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=1454"}],"version-history":[{"count":2,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1454\/revisions"}],"predecessor-version":[{"id":6408,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1454\/revisions\/6408"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}