- Bootstrap 4 Cookbook
- Ajdin Imsirovic
- 378字
- 2021-07-02 21:07:57
How to do it...
- Stop the running Jekyll server by clicking inside the Bash console tab and using Ctrl + C.
- Navigate to the scss folder and open the _variables.scss file:
cd && cd workspace/scss && c9 _variables.scss
In Windows, the path is ../bootstrap/scss/.
- Find the Sass variable $enable-rounded, and uncomment the line it is on, so that it looks like this:
// $enable-rounded: true !default;
- On the very next line, paste in the following code:
$enable-rounded: false !default;
In Sass, using !default is like adding an unless this is already assigned qualifier to a variable. Thus, if you are overriding variables in some other file, make sure that there is no !default after the changed value of false and save the file.
- Still in console, change directory into the scss folder by running cd scss command. Then, run the following command:
sass bootstrap.scss ../dist/css/bootstrap.css
This command will recompile SCSS into CSS for Bootstrap docs.
In Windows, make sure that you run the preceding command from the ../bootstrap/ folder, that is the root, as cloned earlier using git. On c9.io, you can utilize multiple Bash console tabs, so there is no need to renavigate to root.
- Go back out from the scss folder, by running cd ... Back in the console tab, run the following command:
bundle exec jekyll serve --watch --host $IP --port $PORT --
baseurl ''
When you refresh the webpage, it will now show the homepage with the Download Bootstrap button with sharp edges, instead of rounded ones, as seen in the following screenshot:

- Back in the _variables.scss file, override the default values by adding more changes:
$white: #ddd;
$enable-rounded: false;
$spacer: 8rem;
$font-size-base: 2rem;
You should probably make use of your code editor's search and replace function to complete this step. Once you have completed the step, make sure that you save the file.
- Recompile SCSS again by pointing your console to the scss folder with cd scss, then running the command from step 6 once again:
sass bootstrap.scss ../dist/css/bootstrap.css
- Rebuild Jekyll by running:
bundle exec jekyll build;
- Go into _gh_pages and run Jekyll server:
jekyll serve --watch --host $IP --port $PORT --baseurl ''
This should result in the following changes on the docs website:

推薦閱讀
- 劍指Offer(專項突破版):數據結構與算法名企面試題精講
- 單片機應用技術
- PHP+MySQL+Dreamweaver動態網站開發實例教程
- Mastering Python Networking
- C++新經典
- 低代碼平臺開發實踐:基于React
- Java程序設計入門
- Mobile Device Exploitation Cookbook
- Windows Embedded CE 6.0程序設計實戰
- Julia for Data Science
- Instant Zurb Foundation 4
- 現代C:概念剖析和編程實踐
- Web開發的平民英雄:PHP+MySQL
- C語言程序設計教程
- 例解Python:Python編程快速入門踐行指南