{"id":380,"date":"2019-02-20T22:33:16","date_gmt":"2019-02-20T22:33:16","guid":{"rendered":"https:\/\/bootstrapshuffle.com\/blog\/?p=380"},"modified":"2019-02-20T22:33:18","modified_gmt":"2019-02-20T22:33:18","slug":"learn-bootstrap-4-by-using-a-bootstrap-builder","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/","title":{"rendered":"Learn Bootstrap 4 by using a Bootstrap builder"},"content":{"rendered":"\n

In this article, I will describe how beginners can acquire a higher level of knowledge of Bootstrap 4 by using our builder.<\/p>\n\n\n\n

1. Get to know all of Bootstrap’s classes.<\/h3>\n\n\n\n

Do you sometimes have to check on the Internet what the correct structure of, for example, Bootstrap’s navigation looks like?<\/p>\n\n\n\n

If so, use our page with the list of all classes available in Bootstrap 4<\/a>. You can browse classes by category, search for them by name, display their source code and implementation examples (ready to be copy-pasted into your project).<\/p>\n\n\n\n

\"\"
All Bootstrap classes
<\/figcaption><\/figure>\n\n\n\n

An example page for the .alert-danger<\/em> class:<\/p>\n\n\n\n

\"\"
Bootstrap .alert-danger class<\/figcaption><\/figure>\n\n\n\n

2. Use the powerful Bootstrap Sass configuration.<\/h3>\n\n\n\n

I use several groups on Facebook and Slack related to front-end development. Often, there are questions about how the styles of Bootstrap’s components should be changed.<\/p>\n\n\n\n

Unfortunately, not all answers are optimal!<\/p>\n\n\n\n

You can load Bootstrap’s CSS from a CDN and then overwrite the given class in your style file (or add your own modifier), but a much better solution is to use Bootstrap Sass variables where possible.<\/p>\n\n\n\n

Using Bootstrap variables and compiling Bootstrap’s CSS from source files will assure that your template is consistent and the resulting CSS file is smaller! Less code means fewer potential errors.<\/p>\n\n\n\n

For example, you would like to change the background of the Jumbotron component. How to quickly check which variable you should use?<\/p>\n\n\n\n

Using our builder you can launch the “Change Styles” section, and then follow these steps:<\/p>\n\n\n\n

  1. Search for “jumbotron<\/em>” in the search engine <\/li>
  2. In the search results<\/g> you will see that Bootstrap provides two variables related to the Jumbotron component <\/li>
  3. By clicking one of the results and going to the appropriate section (Containers\/Jumbotron) you can change the component’s setting.<\/li><\/ol>\n\n\n\n
    \"\"
    Search for Bootstrap settings<\/figcaption><\/figure>\n\n\n\n

    To learn the names of the appropriate settings, you can hover over any label to see what the variable name is. Of course, you don’t have to remember all the variables. Just know where you can look them up!<\/p>\n\n\n\n

    \"\"
    Hover on label
    <\/figcaption><\/figure><\/div>\n\n\n\n

    3. Experiment.<\/h3>\n\n\n\n

    Using our style editor, you can change over 500 of Bootstrap’s settings. We provide them in thematically grouped categories.<\/p>\n\n\n\n

    If you are a beginner, it is worth checking and experimenting with these settings. In the editor you can use two preview modes:<\/p>\n\n\n\n

    a. Preview of the websites that you create.<\/p>\n\n\n\n

    \"\"
    Preview of index.html (your page)<\/figcaption><\/figure>\n\n\n\n

    b. Preview of the Bootstrap components available in the selected category.<\/p>\n\n\n\n

    \"\"
    Previw of Bootstrap UI (Jumbotron component)<\/figcaption><\/figure>\n\n\n\n

    By changing the settings you can see how the component changes live. Bootstrap UI preview has been prepared so that it is possible to inspect even those components that we aren’t currently using in our page.<\/p>\n\n\n\n

    4. Download the source files and adopt the best practices.<\/h3>\n\n\n\n

    We strive to ensure that our code complies with the best practices. We use npm to download dependencies and build the project.<\/p>\n\n\n\n

    The source files use the CSS preprocessor called Sass and Pug templates. After downloading the project, you can preview the already compiled version in the public\/<\/em> directory, but we recommend that you make changes to the source files in the src\/<\/em> directory.<\/p>\n\n\n\n

    To view live changes in the sources, use the npm run watch<\/strong> command.<\/p>\n\n\n\n

    You can compile the production version of the project with the following command: npm run build<\/strong>.<\/p>\n\n\n\n

    5. Learn by building templates.<\/h2>\n\n\n\n

    Read the “How to create a modern Bootstrap template in 10 minutes”<\/a> article or watch a 6-minute video<\/a> in which we show you how to quickly prepare a completely new Bootstrap template using Bootstrap builder.<\/p>\n\n\n\n

    Good luck!<\/p>\n\n\n\n

    PS. You can try demo of Bootstrap Shuffle here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    In this article, I will describe how beginners can acquire a higher level of knowledge of Bootstrap 4 by using our builder. 1. Get to know all of Bootstrap’s classes. Do you sometimes have to check on the Internet what the correct structure of, for example, Bootstrap’s navigation looks like? If so, use our page […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,12,14],"tags":[],"yoast_head":"\nLearn Bootstrap 4 by using a Bootstrap builder | Shuffle<\/title>\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\/learn-bootstrap-4-by-using-a-bootstrap-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn Bootstrap 4 by using a Bootstrap builder | Shuffle\" \/>\n<meta property=\"og:description\" content=\"In this article, I will describe how beginners can acquire a higher level of knowledge of Bootstrap 4 by using our builder. 1. Get to know all of Bootstrap’s classes. Do you sometimes have to check on the Internet what the correct structure of, for example, Bootstrap’s navigation looks like? If so, use our page […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-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-20T22:33:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-20T22:33:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/all_bootstrap_classes-1.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=\"3 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\/learn-bootstrap-4-by-using-a-bootstrap-builder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/\"},\"author\":{\"name\":\"Dawid Andrzejewski\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\"},\"headline\":\"Learn Bootstrap 4 by using a Bootstrap builder\",\"datePublished\":\"2019-02-20T22:33:16+00:00\",\"dateModified\":\"2019-02-20T22:33:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/\"},\"wordCount\":607,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Bootstrap\",\"Builder\",\"Learning\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/\",\"name\":\"Learn Bootstrap 4 by using a Bootstrap builder | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2019-02-20T22:33:16+00:00\",\"dateModified\":\"2019-02-20T22:33:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn Bootstrap 4 by using a 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":"Learn Bootstrap 4 by using a Bootstrap builder | Shuffle","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\/learn-bootstrap-4-by-using-a-bootstrap-builder\/","og_locale":"en_US","og_type":"article","og_title":"Learn Bootstrap 4 by using a Bootstrap builder | Shuffle","og_description":"In this article, I will describe how beginners can acquire a higher level of knowledge of Bootstrap 4 by using our builder. 1. Get to know all of Bootstrap’s classes. Do you sometimes have to check on the Internet what the correct structure of, for example, Bootstrap’s navigation looks like? If so, use our page […]","og_url":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2019-02-20T22:33:16+00:00","article_modified_time":"2019-02-20T22:33:18+00:00","og_image":[{"url":"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/02\/all_bootstrap_classes-1.png"}],"author":"Dawid Andrzejewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dawid Andrzejewski","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/"},"author":{"name":"Dawid Andrzejewski","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d"},"headline":"Learn Bootstrap 4 by using a Bootstrap builder","datePublished":"2019-02-20T22:33:16+00:00","dateModified":"2019-02-20T22:33:18+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/"},"wordCount":607,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Bootstrap","Builder","Learning"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/","url":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/","name":"Learn Bootstrap 4 by using a Bootstrap builder | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2019-02-20T22:33:16+00:00","dateModified":"2019-02-20T22:33:18+00:00","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2019\/02\/learn-bootstrap-4-by-using-a-bootstrap-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Learn Bootstrap 4 by using a 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\/380"}],"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=380"}],"version-history":[{"count":7,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}