{"id":214,"date":"2019-02-08T12:55:13","date_gmt":"2019-02-08T12:55:13","guid":{"rendered":"https:\/\/bootstrapshuffle.com\/blog\/?p=214"},"modified":"2019-02-08T13:38:26","modified_gmt":"2019-02-08T13:38:26","slug":"how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/","title":{"rendered":"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder)"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"2332\" height=\"620\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/modern_small.png\" alt=\"\" class=\"wp-image-216\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Default Bootstrap styles and the final project created in 10 minutes<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"mb-6 leading-loose\">In this tutorial, we will create a website of a fictional <em>Bold Internet<\/em> company using the <a href=\"https:\/\/bootstrapshuffle.com\" class=\"text-brand-blue underline hover:no-underline\">Bootstrap Shuffle<\/a> tool.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">What you will need:<\/p>\n\n\n\n<ul class=\"list-disc mb-4\"><li class=\"mb-2 ml-8\">An account in Bootstrap Shuffle (all steps <g class=\"gr_ gr_7 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace\" id=\"7\" data-gr-id=\"7\">given<\/g> here can also be recreated in programs such as Visual Studio, using the Sass Bootstrap variables).&nbsp;<\/li><li class=\"mb-2 ml-8\">A pack of free illustrations from <a rel=\"noopener nofollow\" href=\"https:\/\/icons8.com\/ouch\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">Icons8&nbsp;<\/a><\/li><li class=\"mb-2 ml-8\">Logo<\/li><\/ul>\n\n\n\n<p class=\"mb-6 leading-loose\">Before we start, look at what we are building: <a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/demo-10minutes\/index.html\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">index<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/demo-10minutes\/contact.html\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">contact<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/demo-10minutes\/404.html\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">404.<\/a><\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 1. Pages<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Bootstrap Shuffle offers in various categories as many as 230 components ready to be implemented on production. You can create any number of <g class=\"gr_ gr_17 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"17\" data-gr-id=\"17\">pages<\/g> from them, but for the purpose of this <g class=\"gr_ gr_5 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Punctuation only-ins replaceWithoutSep\" id=\"5\" data-gr-id=\"5\">course<\/g> we will focus on three (in the title I promised that the whole thing will take up to 10 minutes!).<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">We add pages: index.html, contact.html and 404.html<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1060\" height=\"241\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step1.png\" alt=\"\" class=\"wp-image-222\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Adding new pages in Bootstrap Shuffle<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 2. Components<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">To each page, add the right components using the drag &amp; drop method. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"470\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step2.gif\" alt=\"\" class=\"wp-image-218\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Bootstrap Shuffle builder<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"mb-6 leading-loose\">I chose components from the categories:<\/p>\n\n\n\n<ul class=\"list-disc mb-4\"><li class=\"mb-2 ml-8\">index.html: navigations (8th on the list), headers (13th), testimonials (5th), content (19th), features (8th), footers (5th)<\/li><li class=\"mb-2 ml-8\">contact.html: navigations (8th), contact (2nd), footers (5th)<\/li><li class=\"mb-2 ml-8\">404.html: navigations (8th), HTTP Codes (4th), footers (5th)<\/li><\/ul>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 3. Typography<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Bootstrap 4 uses system default fonts. We will choose a pro font to distinguish ourselves. A good choice might be Maven Pro as it even has &#8216;pro&#8217; in the name \ud83d\ude09<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Select variant 900, because we will need it in the extra-bold version.<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1519\" height=\"597\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step3.png\" alt=\"\" class=\"wp-image-226\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Google Fonts picker<\/figcaption><\/figure>\n\n\n\n<p class=\"mb-6 leading-loose\">Having selected the font, set the appropriate weight of the usual headers and the headers of the Display class.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"720\" height=\"352\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step3-1.png\" alt=\"\" class=\"wp-image-228\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Example of headings settings in Bootstrap Shuffle<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 4. Colors<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Our Bootstrap builder allows you to easily manage the entire Bootstrap color palette, but we have only 10 minutes, so we will only change the $primary color (choose purple), and leave the rest as the default.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\"><strong>Important:<\/strong> If you create a template that you want to share with other people, always make sure that all key variables are set correctly so that the template is completely consistent.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">To check what components look like in the category of settings you are working on, just change the preview to the predefined page <strong>__boostrap-ui.html<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"519\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step4-1.png\" alt=\"\" class=\"wp-image-296\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Preview of Bootstrap UI for the Colors category<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 5. Buttons<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">We want our template to be different than the default Bootstrap, so we will include shadows ($enable-shadows) and gradients ($enable-gradients).<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\"><strong>Important:&nbsp;<\/strong>From this point, I will use the names of the Bootstrap variables to make this post shorter. If you have a problem locating the variable in the builder, simply use the search engine.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1274\" height=\"408\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step5-3.png\" alt=\"\" class=\"wp-image-248\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Search for Bootstrap variables<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"mb-6 leading-loose\">Our fictional company has a bold in the name, that&#8217;s why we&#8217;ll do everything bigger! We will increase the fonts, paddings and border radius.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Our changes:<\/p>\n\n\n\n<pre class=\"wp-block-code\" class=\"mb-6 leading-loose\"><code># General\/Appearance\n$enable-shadows: true\n$enable-gradients: true\n\n# Buttons\/Buttons\n$btn-font-weight: 900\n$btn-border-radius: 3rem\n$btn-box-shadow: 0.2rem 0.2rem #000\n\n# Forms\/Buttons\n$input-btn-font-size: $font-size-base * 1.2\n$input-btn-padding-y: 1.125rem\n$input-btn-padding-x: 4rem\n\n# Forms\/Inputs\n$input-padding-x: 1rem\n<\/code><\/pre>\n\n\n\n<p class=\"mb-6 leading-loose\">Bootstrap Shuffle builder is basically a UI for a Sass compiler. You don&#8217;t have to know all variables names (as above), because all settings have convenient pickers:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"866\" height=\"664\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step5-2-1.png\" alt=\"\" class=\"wp-image-250\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">CSS shadow builder<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"mb-6 leading-loose\">Final button:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"972\" height=\"244\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step5-3-1.png\" alt=\"\" class=\"wp-image-288\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Button created using Bootstrap builder<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 6. Navigation<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Everyone who worked with Bootstrap will recognize it thanks to its navbar. That&#8217;s why we will add a logo and increase the space between items in the menu right away. We also need to change the colors of the links and the <g class=\"gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace\" id=\"5\" data-gr-id=\"5\">toggler<\/g> that is activated on the mobile.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Our changes:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" class=\"mb-6 leading-loose\"># Navigation\/Navbar (header)<br>$navbar-nav-link-padding-x: 1.75rem<br><br># Navigation\/Navbar (header)\/Navbar - Light version<br>$navbar-light-toggler-border-color: $purple<br>$navbar-light-color: $purple<br>$navbar-light-hover-color: rgba($purple, .7)<br>$navbar-light-active-color: $purple<br><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1073\" height=\"140\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step6-1.png\" alt=\"\" class=\"wp-image-290\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Bootstrap Navbar customization (before and after)<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 7. Content<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">I was not able to come up with new texts within 10 minutes, so we will only change the images, and here and there adjust the text to suit this project better than default one. <\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">I selected illustrations from the Mirage catalog in the Icons8 pack.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1496\" height=\"542\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/step7-1.png\" alt=\"\" class=\"wp-image-300\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Change component&#8217;s content<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"mb-6 leading-loose\">You can check how I&#8217;ve changed text content and illustrations in the live previews: <a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/demo-10minutes\/index.html\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">index<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/demo-10minutes\/contact.html\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">contact<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/demo-10minutes\/404.html\" target=\"_blank\" class=\"text-brand-blue underline hover:no-underline\">404.<\/a><\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Step 8. Export and work on the details<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Here we finish working with the online builder.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Bootstrap Shuffle works with the latest version of Bootstrap 4.2.1, so you even can edit in it the appearance of new components: toasts and spinners. For the purposes of this tutorial, I skipped about half the settings because my goal was to create a template within 10 minutes.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Having a design you are happy with, you can download it to your drive and start working on the details. Bootstrap Shuffle allows for exporting to HTML\/CSS and source files (PUG templates and SCSS files).<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">The purpose of Bootstrap Shuffle is to allow developers to switch from simple to complicated tasks (such as back-end integration) as quickly as possible.<\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">Therefore if you want to speed up your work, try <a href=\"https:\/\/bootstrapshuffle.com\" class=\"text-brand-blue underline hover:no-underline\">Bootstrap Shuffle (builder&nbsp;for&nbsp;busy&nbsp;developers)<\/a>.<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\">Good luck!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"331\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/final-gif.gif\" alt=\"\" class=\"wp-image-312\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">The final version of the index.html<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will create a website of a fictional Bold Internet company using the Bootstrap Shuffle tool. What you will need: An account in Bootstrap Shuffle (all steps given here can also be recreated in programs such as Visual Studio, using the Sass Bootstrap variables).&nbsp; A pack of free illustrations from Icons8&nbsp; Logo [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,2,12],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder) | Shuffle<\/title>\n<meta name=\"description\" content=\"In this tutorial, we will create a website of a fictional company using the Bootstrap Shuffle builder and Bootstrap 4.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder) | Shuffle\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will create a website of a fictional company using the Bootstrap Shuffle builder and Bootstrap 4.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-08T12:55:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-08T13:38:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/modern_small.png\" \/>\n<meta name=\"author\" content=\"Dawid Andrzejewski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dawid Andrzejewski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\"},\"author\":{\"name\":\"Dawid Andrzejewski\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\"},\"headline\":\"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder)\",\"datePublished\":\"2019-02-08T12:55:13+00:00\",\"dateModified\":\"2019-02-08T13:38:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\"},\"wordCount\":791,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Bootstrap\",\"Bootstrap Shuffle\",\"Builder\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\",\"name\":\"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder) | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2019-02-08T12:55:13+00:00\",\"dateModified\":\"2019-02-08T13:38:26+00:00\",\"description\":\"In this tutorial, we will create a website of a fictional company using the Bootstrap Shuffle builder and Bootstrap 4.\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\",\"name\":\"Dawid Andrzejewski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"caption\":\"Dawid Andrzejewski\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder) | Shuffle","description":"In this tutorial, we will create a website of a fictional company using the Bootstrap Shuffle builder and Bootstrap 4.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder) | Shuffle","og_description":"In this tutorial, we will create a website of a fictional company using the Bootstrap Shuffle builder and Bootstrap 4.","og_url":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2019-02-08T12:55:13+00:00","article_modified_time":"2019-02-08T13:38:26+00:00","og_image":[{"url":"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/modern_small.png"}],"author":"Dawid Andrzejewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dawid Andrzejewski","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/"},"author":{"name":"Dawid Andrzejewski","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d"},"headline":"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder)","datePublished":"2019-02-08T12:55:13+00:00","dateModified":"2019-02-08T13:38:26+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/"},"wordCount":791,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Bootstrap","Bootstrap Shuffle","Builder"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/","url":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/","name":"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder) | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2019-02-08T12:55:13+00:00","dateModified":"2019-02-08T13:38:26+00:00","description":"In this tutorial, we will create a website of a fictional company using the Bootstrap Shuffle builder and Bootstrap 4.","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/how-to-create-a-modern-bootstrap-template-in-10-minutes-using-bootstrap-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder)"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d","name":"Dawid Andrzejewski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","caption":"Dawid Andrzejewski"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/214"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":47,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":354,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/214\/revisions\/354"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}