title
Bootstrap 4 Theme Customization (with Sass) | BOOTSTRAP 4 TUTORIAL

description
Bootstrap 4 makes the customization of themes, colors and sizes easy! Use SASS to adjust the look of your Bootstrap 4 project! You prefer CSS? Join the Full CSS course: https://acad.link/css Check out all our other courses: https://academind.com/learn/our-courses ---------- Source Code for the Video: https://academind.com/learn/css/bootstrap-4-tutorial/customization-themes-sass/ Full Playlist: https://academind.com/learn/css/bootstrap-4-tutorial/ Official Theming Docs: http://getbootstrap.com/docs/4.0/getting-started/theming/ ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'Bootstrap 4 Theme Customization (with Sass) | BOOTSTRAP 4 TUTORIAL', 'heatmap': [{'end': 218.559, 'start': 195.823, 'weight': 0.749}, {'end': 449.775, 'start': 412.428, 'weight': 0.804}], 'summary': 'Tutorial series on bootstrap 4 customization with sas and scss covers modifying default settings, managing dependencies with npm, customizing workflow, and improving performance, resulting in a larger main.css file and specific component imports.', 'chapters': [{'end': 375.763, 'segs': [{'end': 78.495, 'src': 'embed', 'start': 47.974, 'weight': 0, 'content': [{'end': 52.118, 'text': 'There, if you click on documentation, you can click on theming.', 'start': 47.974, 'duration': 4.144}, {'end': 54.14, 'text': 'Here on the main page, theming.', 'start': 52.638, 'duration': 1.502}, {'end': 62.365, 'text': 'Here you find instructions on how you may adjust the theme or the general look of Bootstrap, so to say.', 'start': 54.8, 'duration': 7.565}, {'end': 66.387, 'text': 'Because Bootstrap 4 uses SASS behind the scenes.', 'start': 62.585, 'duration': 3.802}, {'end': 72.431, 'text': "Now, SASS, in case you don't know, is basically like a superset to CSS.", 'start': 66.788, 'duration': 5.643}, {'end': 78.495, 'text': "It's a language building up on CSS, which offers you some extra features.", 'start': 72.831, 'duration': 5.664}], 'summary': 'Bootstrap 4 documentation provides instructions on theming and using sass for extra features.', 'duration': 30.521, 'max_score': 47.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp4447974.jpg'}, {'end': 159.139, 'src': 'embed', 'start': 105.061, 'weight': 1, 'content': [{'end': 111.59, 'text': 'However, behind the scenes, it uses SAS during the build process, and this is exactly where we need to hook in.', 'start': 105.061, 'duration': 6.529}, {'end': 120.903, 'text': "If we want to adjust the colors, let's say, or the default sizes, margins and so on assumed by Bootstrap,", 'start': 112.231, 'duration': 8.672}, {'end': 131.85, 'text': 'then we have to overwrite some defaults which are set up in that SAS code and basically recompile the bootstrap package to CSS again.', 'start': 121.543, 'duration': 10.307}, {'end': 136.093, 'text': "This is what we'll do and this is what you find instructions on on this page.", 'start': 132.15, 'duration': 3.943}, {'end': 147.226, 'text': 'So here you basically find an example structure how this might look like in your project, how you can overwrite the SAS code or using SCSS,', 'start': 136.873, 'duration': 10.353}, {'end': 151.371, 'text': 'which is a variant of SAS, so to say, and this is exactly what we will do.', 'start': 147.226, 'duration': 4.145}, {'end': 159.139, 'text': 'Now one thing you can already see here is that it kind of needs Bootstrap locally to do that.', 'start': 151.852, 'duration': 7.287}], 'summary': 'To customize bootstrap, overwrite sas defaults and recompile to css locally.', 'duration': 54.078, 'max_score': 105.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44105061.jpg'}, {'end': 224.643, 'src': 'heatmap', 'start': 195.823, 'weight': 0.749, 'content': [{'end': 201.067, 'text': 'the one integrated into your IDE and navigate into that project folder in that terminal.', 'start': 195.823, 'duration': 5.244}, {'end': 209.212, 'text': 'Now you can run npm init using that node package manager tool, which will basically put this project under control of npm.', 'start': 201.867, 'duration': 7.345}, {'end': 211.554, 'text': "You're then asked a couple of questions.", 'start': 209.793, 'duration': 1.761}, {'end': 213.535, 'text': 'You have to assign a project name and so on.', 'start': 211.574, 'duration': 1.961}, {'end': 215.877, 'text': 'And you can basically always accept the default.', 'start': 213.815, 'duration': 2.062}, {'end': 218.559, 'text': 'Of course, you can also fine-tune it to your needs.', 'start': 216.817, 'duration': 1.742}, {'end': 224.643, 'text': 'And once you did all that and confirmed, you should see that there is a package.json file in your project.', 'start': 218.999, 'duration': 5.644}], 'summary': 'Use npm init in ide to control project, create package.json file.', 'duration': 28.82, 'max_score': 195.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44195823.jpg'}, {'end': 255.82, 'src': 'embed', 'start': 231.208, 'weight': 3, 'content': [{'end': 237.132, 'text': 'Now, with that added, you can now run another command, npm install, to install a new dependency.', 'start': 231.208, 'duration': 5.924}, {'end': 239.114, 'text': 'And that dependency is bootstrap.', 'start': 237.532, 'duration': 1.582}, {'end': 240.655, 'text': 'So, enter bootstrap here.', 'start': 239.354, 'duration': 1.301}, {'end': 247.177, 'text': "and i'll add dash, dash save to also store an entry in the package.json file.", 'start': 241.195, 'duration': 5.982}, {'end': 249.438, 'text': 'this basically makes sharing the project easier.', 'start': 247.177, 'duration': 2.261}, {'end': 255.82, 'text': 'thereafter. it will now also give you that package lock.json file which stores the exact version which was installed.', 'start': 249.438, 'duration': 6.382}], 'summary': "Run 'npm install' to add 'bootstrap' as a dependency and ensure easier project sharing with package.json and package-lock.json files.", 'duration': 24.612, 'max_score': 231.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44231208.jpg'}, {'end': 331.625, 'src': 'embed', 'start': 307.412, 'weight': 4, 'content': [{'end': 317.037, 'text': "we'll create our own main.scss file, a file where we will write our own css code and also override the bootstrap defaults.", 'start': 307.412, 'duration': 9.625}, {'end': 328.624, 'text': "now, in order to be able to write saas code or scss code, we need a saas compiler and in many projects you'll have webpack with saas loader in there.", 'start': 317.037, 'duration': 11.587}, {'end': 331.625, 'text': "we could do that here too, but we don't really need webpack.", 'start': 328.624, 'duration': 3.001}], 'summary': 'Create main.scss file to write own css, override bootstrap defaults, no need for webpack', 'duration': 24.213, 'max_score': 307.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44307412.jpg'}, {'end': 380.765, 'src': 'embed', 'start': 353.493, 'weight': 5, 'content': [{'end': 357.575, 'text': 'it uses the ruby package manager basically to install sas.', 'start': 353.493, 'duration': 4.082}, {'end': 364.858, 'text': 'So you should just run this gem install SAS command with Ruby installed to install SAS on your machine.', 'start': 358.355, 'duration': 6.503}, {'end': 372.782, 'text': 'And once you got that, you can run it as a tool from your command line to compile SAS or SCSS files to normal CSS files.', 'start': 365.398, 'duration': 7.384}, {'end': 375.763, 'text': 'Now, this is not a SAS course or video.', 'start': 373.182, 'duration': 2.581}, {'end': 380.765, 'text': 'So if you want to learn more about that, definitely check out tutorials dedicated to SAS.', 'start': 375.783, 'duration': 4.982}], 'summary': 'Use gem install sas command with ruby to install sas for compiling sas or scss files to normal css.', 'duration': 27.272, 'max_score': 353.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44353493.jpg'}], 'start': 2.404, 'title': 'Customizing and managing bootstrap 4 with sas and npm', 'summary': 'Covers customizing bootstrap 4 using sas for modifying default settings and utilizing official bootstrap documentation for theming, and managing bootstrap dependency with npm, including installation as a local dependency, setting up a sass compiler, and initializing the project with npm init.', 'chapters': [{'end': 159.139, 'start': 2.404, 'title': 'Customizing bootstrap 4 with sas', 'summary': 'Introduces how to customize bootstrap 4 using sas, a superset of css, to modify default settings such as border radius and primary color, and how to utilize the official bootstrap documentation for theming.', 'duration': 156.735, 'highlights': ['SAS allows changing default settings for Bootstrap. SAS enables the modification of default settings for Bootstrap, such as border radius and primary color.', 'Utilizing the official Bootstrap documentation for theming. The chapter emphasizes the use of the official Bootstrap documentation for instructions on adjusting the theme and general look of Bootstrap, as it uses SAS behind the scenes.', 'Using SCSS as a variant of SAS for overwriting SAS code. The chapter mentions the use of SCSS, a variant of SAS, for overwriting SAS code to customize the Bootstrap package locally.']}, {'end': 375.763, 'start': 159.479, 'title': 'Managing bootstrap dependency with npm', 'summary': 'Explains how to manage bootstrap dependency with npm, including installing it as a local dependency, initializing the project with npm init, and setting up a sass compiler without using webpack.', 'duration': 216.284, 'highlights': ['By using npm install command, Bootstrap can be installed as a dependency with the --save flag, which stores an entry in the package.json file, making project sharing easier.', 'Creating a main.scss file to write custom CSS code and override Bootstrap defaults, without affecting the compiled and finished CSS code.', 'Setting up a Sass compiler by installing Sass using gem install SAS command, which allows for compiling Sass or SCSS files to normal CSS files.']}], 'duration': 373.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp442404.jpg', 'highlights': ['Utilizing the official Bootstrap documentation for theming. The chapter emphasizes the use of the official Bootstrap documentation for instructions on adjusting the theme and general look of Bootstrap, as it uses SAS behind the scenes.', 'SAS allows changing default settings for Bootstrap. SAS enables the modification of default settings for Bootstrap, such as border radius and primary color.', 'Using SCSS as a variant of SAS for overwriting SAS code. The chapter mentions the use of SCSS, a variant of SAS, for overwriting SAS code to customize the Bootstrap package locally.', 'By using npm install command, Bootstrap can be installed as a dependency with the --save flag, which stores an entry in the package.json file, making project sharing easier.', 'Creating a main.scss file to write custom CSS code and override Bootstrap defaults, without affecting the compiled and finished CSS code.', 'Setting up a Sass compiler by installing Sass using gem install SAS command, which allows for compiling Sass or SCSS files to normal CSS files.']}, {'end': 811.578, 'segs': [{'end': 449.775, 'src': 'heatmap', 'start': 412.428, 'weight': 0.804, 'content': [{'end': 415.35, 'text': 'And then you add this import in your main.scss file.', 'start': 412.428, 'duration': 2.922}, {'end': 427.536, 'text': 'With this, you can now from the terminal in your project folder run sass main.scss main.css and this will overwrite the main.css file.', 'start': 416.23, 'duration': 11.306}, {'end': 430.618, 'text': 'So let me quickly also grab the styles we have set up there.', 'start': 427.556, 'duration': 3.062}, {'end': 432.919, 'text': 'Let me add them after this import.', 'start': 430.978, 'duration': 1.941}, {'end': 434.46, 'text': 'And now hit enter.', 'start': 433.579, 'duration': 0.881}, {'end': 443.868, 'text': 'And this now gives you your main.css file, which is way bigger now, because now it includes the entire Bootstrap package.', 'start': 435.458, 'duration': 8.41}, {'end': 449.775, 'text': "It's also not minified, so that would be something you have to do with some extra build step.", 'start': 444.489, 'duration': 5.286}], 'summary': 'Adding import in main.scss generates main.css, now includes entire bootstrap package', 'duration': 37.347, 'max_score': 412.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44412428.jpg'}, {'end': 443.868, 'src': 'embed', 'start': 416.23, 'weight': 5, 'content': [{'end': 427.536, 'text': 'With this, you can now from the terminal in your project folder run sass main.scss main.css and this will overwrite the main.css file.', 'start': 416.23, 'duration': 11.306}, {'end': 430.618, 'text': 'So let me quickly also grab the styles we have set up there.', 'start': 427.556, 'duration': 3.062}, {'end': 432.919, 'text': 'Let me add them after this import.', 'start': 430.978, 'duration': 1.941}, {'end': 434.46, 'text': 'And now hit enter.', 'start': 433.579, 'duration': 0.881}, {'end': 443.868, 'text': 'And this now gives you your main.css file, which is way bigger now, because now it includes the entire Bootstrap package.', 'start': 435.458, 'duration': 8.41}], 'summary': 'Compile main.scss to main.css, including entire bootstrap package.', 'duration': 27.638, 'max_score': 416.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44416230.jpg'}, {'end': 537.188, 'src': 'embed', 'start': 514.054, 'weight': 1, 'content': [{'end': 521.339, 'text': 'However, we will override the sass variables, and we do that in our main.scss file where we import Bootstrap.', 'start': 514.054, 'duration': 7.285}, {'end': 528.444, 'text': 'There, we now have to make sure that we override any colors or whatever we want to change Bootstrap uses.', 'start': 521.859, 'duration': 6.585}, {'end': 533.446, 'text': 'so again back in the official docs we find more information on that.', 'start': 529.224, 'duration': 4.222}, {'end': 537.188, 'text': 'we find how we can set some default colors.', 'start': 533.446, 'duration': 3.742}], 'summary': 'Override bootstrap variables in main.scss to customize colors and styles.', 'duration': 23.134, 'max_score': 514.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44514054.jpg'}, {'end': 589.982, 'src': 'embed', 'start': 560.359, 'weight': 4, 'content': [{'end': 564.161, 'text': "we also got that theme colors map, and why don't we just give it a try?", 'start': 560.359, 'duration': 3.802}, {'end': 566.382, 'text': "so let's copy that theme colors map.", 'start': 564.161, 'duration': 2.221}, {'end': 573.126, 'text': "it's basically a bit like a javascript object you could say, and let's import it or add it in front of that bootstrap import.", 'start': 566.382, 'duration': 6.744}, {'end': 584.153, 'text': "now there let's set primary, maybe to a purple and danger to maybe a different red, simply like a dark red.", 'start': 573.126, 'duration': 11.027}, {'end': 589.982, 'text': 'And now keep in mind, primary is a color we are using in our project.', 'start': 585.441, 'duration': 4.541}], 'summary': 'Import and apply theme colors map to set primary to purple and danger to dark red.', 'duration': 29.623, 'max_score': 560.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44560359.jpg'}, {'end': 793.461, 'src': 'embed', 'start': 746.446, 'weight': 0, 'content': [{'end': 753.713, 'text': 'this is actually good because it allows you to shrink the size of css code your users have to download right now.', 'start': 746.446, 'duration': 7.267}, {'end': 758.518, 'text': 'we use that approach where your users download everything, everything, all the times.', 'start': 753.713, 'duration': 4.805}, {'end': 769.905, 'text': 'Now, if you know you only use the grid and you only use form inputs and buttons, then you can actually just import these parts of Bootstrap.', 'start': 759.502, 'duration': 10.403}, {'end': 779.129, 'text': "Because if you have a look at the Bootstrap SCSS folder, you see it's actually split up into buttons, into forms and into grid, for example.", 'start': 770.246, 'duration': 8.883}, {'end': 780.529, 'text': "So let's do that.", 'start': 779.709, 'duration': 0.82}, {'end': 782.63, 'text': "Let's import what we need.", 'start': 781.129, 'duration': 1.501}, {'end': 786.113, 'text': 'We got three required imports, which we always need.', 'start': 783.53, 'duration': 2.583}, {'end': 789.737, 'text': "You can see them here in the docs, so let's grab these and insert them here.", 'start': 786.613, 'duration': 3.124}, {'end': 793.461, 'text': 'These are the default functions, variables, and mixins used by Bootstrap.', 'start': 790.277, 'duration': 3.184}], 'summary': 'Import specific parts of bootstrap to reduce css code download size for users.', 'duration': 47.015, 'max_score': 746.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44746446.jpg'}], 'start': 375.783, 'title': 'Customizing bootstrap with sas and scss', 'summary': 'Details customizing bootstrap using sas and scss, covering importing, overriding variables, experimenting with theme colors map, and reducing css code size, resulting in a larger main.css file and specific component imports.', 'chapters': [{'end': 612.789, 'start': 375.783, 'title': 'Customizing bootstrap with sas', 'summary': 'Explains how to customize bootstrap styles using sas, including importing the entire bootstrap package, overriding sas variables, and experimenting with theme colors map, resulting in a larger main.css file and a seamless transition from cdn to local bootstrap import.', 'duration': 237.006, 'highlights': ['The key method of overwriting bootstrap is by importing everything from the bootstrap folder, resulting in a larger main.css file. By importing everything from the bootstrap folder, the main.css file becomes larger as it includes the entire Bootstrap package.', 'The process involves overriding SAS variables in the main.scss file before importing Bootstrap, ensuring that the declared styles take precedence over the default Bootstrap styles. Overriding SAS variables in the main.scss file allows the declared styles to take precedence over the default Bootstrap styles, ensuring customization.', 'Experimenting with the theme colors map allows for easy customization of colors in the project, resulting in a seamless transition from CDN to local Bootstrap import. By experimenting with the theme colors map, it enables easy customization of colors in the project and leads to a smooth transition from CDN to local Bootstrap import.']}, {'end': 811.578, 'start': 612.789, 'title': 'Customizing bootstrap with scss', 'summary': 'Explains how to customize bootstrap using scss, including overriding colors, dimensions, and sizes, as well as importing only the necessary parts to reduce css code size, with examples of overriding default border radius and importing specific components.', 'duration': 198.789, 'highlights': ['You can override colors, dimensions, and sizes used by Bootstrap by editing the variables.scss file, which contains all the variables and their default flags to prevent overwriting, allowing for customizations such as changing the default border radius from 0.25rem to 10rem. The variables.scss file in the Bootstrap SCSS folder contains all the variables with default flags, allowing for overrides of colors, dimensions, and sizes. For example, changing the default border radius from 0.25rem to 10rem.', 'Importing only the necessary parts of Bootstrap, such as grid, forms, and buttons, can reduce the size of the CSS code that users have to download, leading to improved performance and faster loading times. By importing only the required parts of Bootstrap, like grid, forms, and buttons, the size of the CSS code that users have to download can be reduced, resulting in improved performance and faster loading times.', 'Default functions, variables, and mixins used by Bootstrap should be imported to ensure that the necessary defaults are available, even when overriding specific parts, ensuring the required defaults are imported. Importing the default functions, variables, and mixins used by Bootstrap is essential to ensure that necessary defaults are available, even when overriding specific parts, thus requiring the import of required defaults.']}], 'duration': 435.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44375783.jpg', 'highlights': ['Importing only the necessary parts of Bootstrap, such as grid, forms, and buttons, can reduce the size of the CSS code that users have to download, leading to improved performance and faster loading times.', 'The process involves overriding SAS variables in the main.scss file before importing Bootstrap, ensuring that the declared styles take precedence over the default Bootstrap styles.', 'Default functions, variables, and mixins used by Bootstrap should be imported to ensure that the necessary defaults are available, even when overriding specific parts, ensuring the required defaults are imported.', 'You can override colors, dimensions, and sizes used by Bootstrap by editing the variables.scss file, which contains all the variables and their default flags to prevent overwriting, allowing for customizations such as changing the default border radius from 0.25rem to 10rem.', 'Experimenting with the theme colors map allows for easy customization of colors in the project, resulting in a seamless transition from CDN to local Bootstrap import.', 'The key method of overwriting bootstrap is by importing everything from the bootstrap folder, resulting in a larger main.css file.']}, {'end': 1028.671, 'segs': [{'end': 854.614, 'src': 'embed', 'start': 812.199, 'weight': 0, 'content': [{'end': 816.942, 'text': 'But then we, in our case, also need the buttons and we need the forms.', 'start': 812.199, 'duration': 4.743}, {'end': 822.227, 'text': 'And as a side note, you might notice that we omit that underscore, which is part of the file name.', 'start': 817.383, 'duration': 4.844}, {'end': 828.492, 'text': 'This is simply automatically added by SAS, so to say, so you have the import without the underscore.', 'start': 822.707, 'duration': 5.785}, {'end': 832.711, 'text': 'Now with that all added, we can recompile again.', 'start': 829.83, 'duration': 2.881}, {'end': 835.511, 'text': "Now it's also faster if you saw that.", 'start': 833.371, 'duration': 2.14}, {'end': 838.952, 'text': "And in our main.css file, it's leaner now.", 'start': 836.411, 'duration': 2.541}, {'end': 845.733, 'text': 'It still has a lot of code in there, but actually it only has the grid-related code, the forms, and the button-related code.', 'start': 839.292, 'duration': 6.441}, {'end': 852.014, 'text': "If you, for example, search for alert in there, you won't find any alert classes because we didn't include alerts.", 'start': 846.293, 'duration': 5.721}, {'end': 854.614, 'text': 'This also has one other implication.', 'start': 853.014, 'duration': 1.6}], 'summary': 'The main.css file now only contains grid, forms, and button-related code, making it leaner and faster.', 'duration': 42.415, 'max_score': 812.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44812199.jpg'}, {'end': 923.131, 'src': 'embed', 'start': 877.871, 'weight': 3, 'content': [{'end': 878.892, 'text': "so let's go back.", 'start': 877.871, 'duration': 1.021}, {'end': 882.508, 'text': "let's also include the navbar.", 'start': 878.892, 'duration': 3.616}, {'end': 893.292, 'text': 'and regarding the default styles or the default text style, that actually is the reboot package, which sets some default styles for the browser.', 'start': 882.508, 'duration': 10.784}, {'end': 898.655, 'text': 'with that we can recompile everything, reload and the text is fixed.', 'start': 893.292, 'duration': 5.363}, {'end': 901.236, 'text': "the navbar is kind of fixed, i'd say.", 'start': 898.655, 'duration': 2.581}, {'end': 911.626, 'text': "Now the reason for the invisible navbar is that we also need to include utilities here, because we're using some utility features in the navbar.", 'start': 902.702, 'duration': 8.924}, {'end': 915.368, 'text': 'That if we go back, here it is again.', 'start': 912.406, 'duration': 2.962}, {'end': 919.029, 'text': 'Our responsive nature is only kind of working though.', 'start': 915.948, 'duration': 3.081}, {'end': 923.131, 'text': 'For example, right here, you see this is not really working as it should.', 'start': 919.049, 'duration': 4.082}], 'summary': 'Recompiling with reboot package fixed default text style. navbar requires inclusion of utilities. responsive nature partly working.', 'duration': 45.26, 'max_score': 877.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44877871.jpg'}, {'end': 995.066, 'src': 'embed', 'start': 967.826, 'weight': 1, 'content': [{'end': 971.408, 'text': 'so we might also want to import that after reboot maybe.', 'start': 967.826, 'duration': 3.582}, {'end': 979.774, 'text': 'so reboot sets browser defaults in general, but the type package here then set some general typography related settings for bootstrap.', 'start': 971.408, 'duration': 8.366}, {'end': 984.257, 'text': "so that is also something we might want to import, even though i don't see a direct difference here.", 'start': 979.774, 'duration': 4.483}, {'end': 987.779, 'text': 'but you can always look into these files.', 'start': 985.097, 'duration': 2.682}, {'end': 995.066, 'text': 'you can find out which variables, the different features they use, and you can look into the variables files in general, as explained,', 'start': 987.779, 'duration': 7.287}], 'summary': 'Import browser defaults after reboot to set typography settings for bootstrap.', 'duration': 27.24, 'max_score': 967.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44967826.jpg'}], 'start': 812.199, 'title': 'Customizing bootstrap 4 workflow', 'summary': 'Delves into customizing bootstrap 4 workflow, covering additions and omissions of components, file size optimization, and bundle performance improvement. it includes examples such as omitting underscores in file names and incorporating features like navigation bars, utilities, and typography, and discusses the impact of these customizations on project performance.', 'chapters': [{'end': 1028.671, 'start': 812.199, 'title': 'Customizing bootstrap 4 workflow', 'summary': "Explains customizing bootstrap 4 workflow, including adding and omitting specific components, optimizing file size, and improving bundle performance through examples such as omitting the underscore in file names, including specific features like navigation bar, utilities, and typography, and the implications of these customizations on the project's performance.", 'duration': 216.472, 'highlights': ['By omitting the underscore in file names, SAS automatically adds it, resulting in faster compilation. The omission of underscore in file names automatically added by SAS leads to faster compilation.', 'The main.css file has leaner code with grid-related code, forms, and button-related code, omitting alert classes. The main.css file contains leaner code with specific components, omitting alert classes and focusing on grid, forms, and buttons.', 'Excluding the navigation bar leads to broken default styles and navigation bar, which can be fixed by including the navbar and reboot package for default styles. Excluding the navigation bar leads to broken default styles and navigation bar, which can be fixed by including the navbar and reboot package.', 'Including utilities and transition is necessary for features like responsive nature and animations in the navbar. Including utilities and transition is necessary for features like responsive nature and animations in the navbar.', 'Importing specific features like typography-related settings for Bootstrap allows customization and optimization of file size. Importing typography-related settings for Bootstrap allows customization and optimization of file size.']}], 'duration': 216.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ovw43Dkp44/pics/6Ovw43Dkp44812199.jpg', 'highlights': ['By omitting the underscore in file names, SAS automatically adds it, resulting in faster compilation.', 'Importing typography-related settings for Bootstrap allows customization and optimization of file size.', 'The main.css file has leaner code with grid-related code, forms, and button-related code, omitting alert classes.', 'Excluding the navigation bar leads to broken default styles and navigation bar, which can be fixed by including the navbar and reboot package.', 'Including utilities and transition is necessary for features like responsive nature and animations in the navbar.']}], 'highlights': ['Utilizing the official Bootstrap documentation for theming. The chapter emphasizes the use of the official Bootstrap documentation for instructions on adjusting the theme and general look of Bootstrap, as it uses SAS behind the scenes.', 'SAS allows changing default settings for Bootstrap. SAS enables the modification of default settings for Bootstrap, such as border radius and primary color.', 'Using SCSS as a variant of SAS for overwriting SAS code. The chapter mentions the use of SCSS, a variant of SAS, for overwriting SAS code to customize the Bootstrap package locally.', 'By using npm install command, Bootstrap can be installed as a dependency with the --save flag, which stores an entry in the package.json file, making project sharing easier.', 'Creating a main.scss file to write custom CSS code and override Bootstrap defaults, without affecting the compiled and finished CSS code.', 'Setting up a Sass compiler by installing Sass using gem install SAS command, which allows for compiling Sass or SCSS files to normal CSS files.', 'Importing only the necessary parts of Bootstrap, such as grid, forms, and buttons, can reduce the size of the CSS code that users have to download, leading to improved performance and faster loading times.', 'The process involves overriding SAS variables in the main.scss file before importing Bootstrap, ensuring that the declared styles take precedence over the default Bootstrap styles.', 'Default functions, variables, and mixins used by Bootstrap should be imported to ensure that the necessary defaults are available, even when overriding specific parts, ensuring the required defaults are imported.', 'You can override colors, dimensions, and sizes used by Bootstrap by editing the variables.scss file, which contains all the variables and their default flags to prevent overwriting, allowing for customizations such as changing the default border radius from 0.25rem to 10rem.', 'Experimenting with the theme colors map allows for easy customization of colors in the project, resulting in a seamless transition from CDN to local Bootstrap import.', 'The key method of overwriting bootstrap is by importing everything from the bootstrap folder, resulting in a larger main.css file.', 'By omitting the underscore in file names, SAS automatically adds it, resulting in faster compilation.', 'Importing typography-related settings for Bootstrap allows customization and optimization of file size.', 'The main.css file has leaner code with grid-related code, forms, and button-related code, omitting alert classes.', 'Excluding the navigation bar leads to broken default styles and navigation bar, which can be fixed by including the navbar and reboot package.', 'Including utilities and transition is necessary for features like responsive nature and animations in the navbar.']}