{"id":795,"date":"2019-08-21T10:15:22","date_gmt":"2019-08-21T01:15:22","guid":{"rendered":"https:\/\/www.jaga.biz\/?p=795"},"modified":"2019-08-24T21:53:27","modified_gmt":"2019-08-24T12:53:27","slug":"change-bootstrap-color-2","status":"publish","type":"post","link":"https:\/\/www.jaga.biz\/en\/laravel\/change-bootstrap-color-2\/","title":{"rendered":"Change Bootstrap colors in Laravel"},"content":{"rendered":"\n<p>I will explain how to change Bootstrap color in Laravel.<br>However, it is assumed that the environment can compile sass like Laravel Mix.<br>If you can&#8217;t compile sass, you can only fix it with css.<\/p>\n<p>For the Laravel Mix, see the next page.<br><a href=\"https:\/\/readouble.com\/laravel\/5.8\/ja\/mix.html\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/readouble.com\/laravel\/5.8\/ja\/mix.html<\/a><\/p>\n\n\n\n<p> Once Laravel Mix is \u200b\u200bworking, open the file you can set the color. <br> The file to open is resouces \/ sass \/ _variables.scss. <br>The default contents are as follows.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Body\n$body-bg: #f8fafc;\n\n\/\/ Typography\n$font-family-sans-serif: 'Nunito', sans-serif;\n$font-size-base: 0.9rem;\n$line-height-base: 1.6;\n\n\/\/ Colors\n$blue: #3490dc;\n$indigo: #6574cd;\n$purple: #9561e2;\n$pink: #f66d9b;\n$red: #e3342f;\n$orange: #f6993f;\n$yellow: #ffed4a;\n$green: #38c172;\n$teal: #4dc0b5;\n$cyan: #6cb2eb;<\/pre>\n\n\n\n<p>Set the background color to white (#ffffff), the color applied to bg-success, alert-success, etc. to black (# 000000), and the color applied to bg-danger, alert-danger, etc. to blue (# 0000ff) If so, correct it as follows.<br>Lines 2 and 21 and after are the changes.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Body\n$body-bg: #ffffff;\n\n\/\/ Typography\n$font-family-sans-serif: 'Nunito', sans-serif;\n$font-size-base: 0.9rem;\n$line-height-base: 1.6;\n\n\/\/ Colors\n$blue: #3490dc;\n$indigo: #6574cd;\n$purple: #9561e2;\n$pink: #f66d9b;\n$red: #e3342f;\n$orange: #f6993f;\n$yellow: #ffed4a;\n$green: #38c172;\n$teal: #4dc0b5;\n$cyan: #6cb2eb;\n\n$theme-colors: (\n    \"success\": #000000,\n    \"danger\": #0000ff,\n);\n<\/pre>\n\n\n\n<p>If you change it, the compiler will work and it should be reflected in css.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I will explain how to change Bootstrap color in Laravel.However, it is assumed that the environment can compil\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.jaga.biz\/en\/laravel\/change-bootstrap-color-2\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_locale":"en_US","_original_post":"789","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[17],"tags":[],"class_list":["post-795","post","type-post","status-publish","format-standard","hentry","category-laravel","en-US"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/posts\/795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/comments?post=795"}],"version-history":[{"count":4,"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/posts\/795\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/posts\/795\/revisions\/801"}],"wp:attachment":[{"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/media?parent=795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/categories?post=795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jaga.biz\/wp-json\/wp\/v2\/tags?post=795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}