title
Bootstrap 4 in 2018 - Free Crash Course of 4.0.0

description
Written tutorial: https://goo.gl/fyuBeQ SUBSCRIBE If you enjoy! Check out https://coursetro.com This is a 100% free crash course on learning Bootstrap 4 here in 2018. Bootstrap 4 just came out of beta and it's finally released to version 4.0.0. I'm going to show you how to integrate it with nodejs into a modern development workflow, as well as how to build a layout while demonstrating the core fundamentals. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Bootstrap 4 in 2018 - Free Crash Course of 4.0.0', 'heatmap': [{'end': 483.479, 'start': 385.473, 'weight': 0.903}, {'end': 570.491, 'start': 534.375, 'weight': 1}, {'end': 806.846, 'start': 737.599, 'weight': 0.971}, {'end': 1460.32, 'start': 1390.22, 'weight': 0.892}, {'end': 2115.792, 'start': 2083.879, 'weight': 0.783}], 'summary': 'Provides a comprehensive tutorial on bootstrap 4.0.0, covering the release, setup using npm and gulp, fundamentals, adding dropdown and hamburger menu, essential features such as grid system, cards, and customization, and customizing theme colors, offering a detailed crash course for a thorough understanding.', 'chapters': [{'end': 392.979, 'segs': [{'end': 70.228, 'src': 'embed', 'start': 3.697, 'weight': 1, 'content': [{'end': 6.279, 'text': 'Hey everyone, Gary Simon of Corsetro.', 'start': 3.697, 'duration': 2.582}, {'end': 11.582, 'text': 'And what do we have here? We have version 4.0.0.', 'start': 7.099, 'duration': 4.483}, {'end': 20.869, 'text': "We're out of alpha, we're out of beta and just four days ago, on the 18th of January, they released the official version.", 'start': 11.583, 'duration': 9.286}, {'end': 26.037, 'text': 'after quite a long time, several years in development, this Bootstrap 4 was in.', 'start': 20.869, 'duration': 5.168}, {'end': 31.965, 'text': "So I already did a Bootstrap 4 course last year and it's free, but that was when it was alpha.", 'start': 26.097, 'duration': 5.868}, {'end': 34.048, 'text': 'So a lot of stuff has changed since then.', 'start': 32.005, 'duration': 2.043}, {'end': 46.041, 'text': 'So I decided I would do a real quick sort of elongated tutorial slash crash course on the basics of getting up and running and using Bootstrap 4 to build a layout,', 'start': 34.189, 'duration': 11.852}, {'end': 48.503, 'text': 'which is exactly what we are going to do.', 'start': 46.041, 'duration': 2.462}, {'end': 55.25, 'text': "So just to preface, before we begin, there's a complete written version of this tutorial at my website, Corsetra.com.", 'start': 49.044, 'duration': 6.206}, {'end': 58.793, 'text': "It's linked in the description, like the first line of description here on YouTube.", 'start': 55.27, 'duration': 3.523}, {'end': 61.156, 'text': 'And this is just for your reference.', 'start': 59.394, 'duration': 1.762}, {'end': 62.318, 'text': "There's going to be code here.", 'start': 61.196, 'duration': 1.122}, {'end': 69.587, 'text': "Everything I do is going to follow the flow of this written tutorial here in this video tour tutorial that you're about to watch.", 'start': 62.738, 'duration': 6.849}, {'end': 70.228, 'text': 'All right.', 'start': 69.968, 'duration': 0.26}], 'summary': 'Bootstrap 4.0.0 was officially released on january 18th after several years in development, prompting a tutorial on building a layout using bootstrap 4.', 'duration': 66.531, 'max_score': 3.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU3697.jpg'}, {'end': 267.029, 'src': 'embed', 'start': 237.368, 'weight': 0, 'content': [{'end': 241.035, 'text': "So once you have that, let's go ahead, make a directory.", 'start': 237.368, 'duration': 3.667}, {'end': 244.902, 'text': "We're going to call this BS for bootstrap, not the other BS4.", 'start': 241.055, 'duration': 3.847}, {'end': 248.107, 'text': "And after it creates it, we're going to CD into BS4.", 'start': 245.683, 'duration': 2.424}, {'end': 257.058, 'text': "Okay, so now we're going to use the npm init command to create a package JSON file, which simply stores our project dependencies.", 'start': 249.409, 'duration': 7.649}, {'end': 262.804, 'text': "So npm init, I'm going to add the Y flag here, and that's just going to give us all the default answers.", 'start': 257.137, 'duration': 5.667}, {'end': 267.029, 'text': "Otherwise, if you omit that, it's going to ask you all these question prompts and such.", 'start': 262.844, 'duration': 4.185}], 'summary': 'Creating a directory named bs4, using npm init command with y flag to create a package json file for project dependencies.', 'duration': 29.661, 'max_score': 237.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU237368.jpg'}], 'start': 3.697, 'title': 'Bootstrap 4.0.0 release and setup', 'summary': 'Covers the release of bootstrap 4.0.0, which transitioned from alpha and beta versions, and provides a tutorial on integrating bootstrap 4 to build a layout. it also discusses the process of setting up bootstrap 4 using npm, highlighting the installation of required packages and dependencies such as gulp, browser sync, gulp sass, bootstrap, jquery, and popper.js.', 'chapters': [{'end': 139.036, 'start': 3.697, 'title': 'Bootstrap 4.0.0 release overview', 'summary': 'Discusses the release of bootstrap 4.0.0, which came out of alpha and beta versions after several years of development, on the 18th of january, and provides a quick tutorial on integrating bootstrap 4 to build a layout.', 'duration': 135.339, 'highlights': ['Bootstrap 4.0.0 released after several years of development and out of alpha and beta versions. The official version of Bootstrap 4.0.0 was released on the 18th of January after several years of development, marking the end of the alpha and beta versions.', 'Offering a quick tutorial on integrating Bootstrap 4 to build a layout. The chapter provides a quick tutorial on integrating Bootstrap 4 to build a layout, focusing on the basics of getting up and running with Bootstrap 4.', 'Reference to a complete written version of the tutorial at Corsetra.com. A complete written version of the tutorial is available at Corsetra.com, providing a reference for the content covered in the video tutorial.']}, {'end': 392.979, 'start': 139.336, 'title': 'Setting up bootstrap 4 with npm', 'summary': 'Discusses the process of setting up bootstrap 4 using node package manager (npm), emphasizing the installation of required packages and dependencies, including gulp, browser sync, gulp sass, bootstrap, jquery, and popper.js.', 'duration': 253.643, 'highlights': ['The chapter explains the process of setting up Bootstrap 4 using Node Package Manager (NPM), highlighting the installation of required packages and dependencies, including Gulp, Browser Sync, Gulp Sass, Bootstrap, jQuery, and Popper.js.', 'The method involving Bootstrap CSS via a CDN in the browser is described, emphasizing its inclusion of everything needed but lacking customization, suitable for prototyping and quick projects.', "The necessity of having Node.js installed for setting up Bootstrap 4 via NPM is emphasized, along with the guidance to check the Node.js installation using 'node -v' in the console or command line.", "The usage of 'npm init' command to create a package JSON file to store project dependencies is explained, highlighting the avoidance of default question prompts by using the 'Y' flag.", 'The installation of Gulp, Browser Sync, and Gulp Sass as development dependencies is detailed, emphasizing the functionalities of each package, with Gulp enabling JavaScript task running, Browser Sync automatically refreshing the browser upon file changes, and Gulp Sass enabling Sass compiling within the project.', "The installation of Bootstrap, jQuery, and Popper.js as regular project dependencies is discussed, emphasizing the necessity of these dependencies for production purposes, with explanations provided for each dependency's usage.", 'The chapter highlights the need for Sass knowledge and recommends seeking tutorials or courses for a better understanding of Sass before proceeding with the setup.']}], 'duration': 389.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU3697.jpg', 'highlights': ['Bootstrap 4.0.0 released after several years of development and out of alpha and beta versions.', 'The chapter explains the process of setting up Bootstrap 4 using Node Package Manager (NPM), highlighting the installation of required packages and dependencies, including Gulp, Browser Sync, Gulp Sass, Bootstrap, jQuery, and Popper.js.', 'The installation of Gulp, Browser Sync, and Gulp Sass as development dependencies is detailed, emphasizing the functionalities of each package, with Gulp enabling JavaScript task running, Browser Sync automatically refreshing the browser upon file changes, and Gulp Sass enabling Sass compiling within the project.', "The installation of Bootstrap, jQuery, and Popper.js as regular project dependencies is discussed, emphasizing the necessity of these dependencies for production purposes, with explanations provided for each dependency's usage.", 'The official version of Bootstrap 4.0.0 was released on the 18th of January after several years of development, marking the end of the alpha and beta versions.', 'The method involving Bootstrap CSS via a CDN in the browser is described, emphasizing its inclusion of everything needed but lacking customization, suitable for prototyping and quick projects.']}, {'end': 806.846, 'segs': [{'end': 503.87, 'src': 'embed', 'start': 476.073, 'weight': 1, 'content': [{'end': 483.479, 'text': "I just realized our particular layout throughout this little crash course, I don't think I actually use this, so we could probably omit that.", 'start': 476.073, 'duration': 7.406}, {'end': 486.282, 'text': "But it's nice to have if you want icons, or a bunch of them at least.", 'start': 483.579, 'duration': 2.703}, {'end': 489.444, 'text': 'And then also we have our main Bootstrap CSS.', 'start': 486.742, 'duration': 2.702}, {'end': 496.707, 'text': 'And this gets compiled or we use SAS to create this file with Gulp.', 'start': 490.445, 'duration': 6.262}, {'end': 498.088, 'text': "And you'll see how that works shortly.", 'start': 496.847, 'duration': 1.241}, {'end': 503.87, 'text': 'And then also a custom styles CSS that gets included after our bootstrap, right.', 'start': 498.388, 'duration': 5.482}], 'summary': 'Discussion on layout, icons, bootstrap css, and custom styles css in web development.', 'duration': 27.797, 'max_score': 476.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU476073.jpg'}, {'end': 572.613, 'src': 'heatmap', 'start': 525.649, 'weight': 2, 'content': [{'end': 530.172, 'text': 'so styles.scss is where our custom scss is going to go.', 'start': 525.649, 'duration': 4.523}, {'end': 533.375, 'text': "so i'm going to put in bg color.", 'start': 530.172, 'duration': 3.203}, {'end': 534.375, 'text': 'this is a variable.', 'start': 533.375, 'duration': 1}, {'end': 540.379, 'text': "we'll just call it red and then body background we'll set to BG color.", 'start': 534.375, 'duration': 6.004}, {'end': 550.002, 'text': "Now, the reason I'm doing this is, you know we're not going to use this, but I wanted to make sure, right when we're done with this, the gulp process,", 'start': 540.419, 'duration': 9.583}, {'end': 556.385, 'text': 'that it is actually, you know, taking our SAS and converting it to regular CSS, just to kind of like a test.', 'start': 550.002, 'duration': 6.383}, {'end': 557.205, 'text': 'All right.', 'start': 556.965, 'duration': 0.24}, {'end': 565.068, 'text': "So now we're going to create, and this is the final process, by the way, of this, this integration process, we're going to create a gulp file.js.", 'start': 557.545, 'duration': 7.523}, {'end': 570.491, 'text': "and we need to name it gulp file.js, and i'm going to paste this in series.", 'start': 565.968, 'duration': 4.523}, {'end': 572.613, 'text': 'and again, all this stuff is at that written tutorial.', 'start': 570.491, 'duration': 2.122}], 'summary': 'Creating custom scss variables and testing gulp process for scss to css conversion.', 'duration': 46.964, 'max_score': 525.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU525649.jpg'}, {'end': 619.835, 'src': 'embed', 'start': 595.106, 'weight': 0, 'content': [{'end': 600.728, 'text': "um, we're going to start kind of at the end of this file, just so i can explain it a little better.", 'start': 595.106, 'duration': 5.622}, {'end': 605.669, 'text': "any gulp task that's name is default, just means we can type in gulp in the command line.", 'start': 600.728, 'duration': 4.941}, {'end': 609.05, 'text': "when we do that and hit enter, it's going to run whatever we specify here.", 'start': 605.669, 'duration': 3.381}, {'end': 613.111, 'text': "so it's going to run two tasks called js for javascript and serve.", 'start': 609.05, 'duration': 4.061}, {'end': 613.812, 'text': 'all right.', 'start': 613.111, 'duration': 0.701}, {'end': 617.913, 'text': 'so the serve task gonna paste right here, alright.', 'start': 613.812, 'duration': 4.101}, {'end': 619.835, 'text': 'so the task here is named serve.', 'start': 617.913, 'duration': 1.922}], 'summary': "Using 'gulp' command runs 'js' and 'serve' tasks.", 'duration': 24.729, 'max_score': 595.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU595106.jpg'}, {'end': 806.846, 'src': 'heatmap', 'start': 737.599, 'weight': 0.971, 'content': [{'end': 745.206, 'text': "And then it's going to take that compiled regular CSS and put it into source CSS under the same names right here.", 'start': 737.599, 'duration': 7.607}, {'end': 747.568, 'text': 'And then this will reload the browser.', 'start': 745.886, 'duration': 1.682}, {'end': 749.414, 'text': 'All right.', 'start': 748.453, 'duration': 0.961}, {'end': 751.235, 'text': "Actually, let's see.", 'start': 750.094, 'duration': 1.141}, {'end': 752.596, 'text': 'Yeah, that was all it was.', 'start': 751.335, 'duration': 1.261}, {'end': 754.557, 'text': "I thought there was another task, but there's not.", 'start': 752.656, 'duration': 1.901}, {'end': 756.258, 'text': 'Sweet All right.', 'start': 755.077, 'duration': 1.181}, {'end': 757.659, 'text': "So let's go ahead and save that.", 'start': 756.318, 'duration': 1.341}, {'end': 760.001, 'text': "And let's go ahead.", 'start': 758.86, 'duration': 1.141}, {'end': 769.527, 'text': 'If everything is set up correctly, then once we run Gulp, then a browser will load up on localhost 3000,', 'start': 760.261, 'duration': 9.266}, {'end': 771.649, 'text': 'and it should have a red background in it better.', 'start': 769.527, 'duration': 2.122}, {'end': 772.189, 'text': "Let's see.", 'start': 771.869, 'duration': 0.32}, {'end': 776.722, 'text': 'Oh, sweet.', 'start': 775.922, 'duration': 0.8}, {'end': 777.363, 'text': 'It worked.', 'start': 776.742, 'duration': 0.621}, {'end': 778.403, 'text': 'All right.', 'start': 778.143, 'duration': 0.26}, {'end': 780.864, 'text': "Cool So I'm going to get this position in here.", 'start': 778.483, 'duration': 2.381}, {'end': 785.486, 'text': 'Okay Awesome.', 'start': 784.066, 'duration': 1.42}, {'end': 786.207, 'text': 'Awesome Awesome.', 'start': 785.627, 'duration': 0.58}, {'end': 794.29, 'text': "Awesome So real quickly, just so I don't forget, let's go ahead and we'll go back to the here.", 'start': 786.267, 'duration': 8.023}, {'end': 795.491, 'text': "Let's go back to styles.", 'start': 794.31, 'duration': 1.181}, {'end': 796.592, 'text': 'Get that out there.', 'start': 795.851, 'duration': 0.741}, {'end': 797.312, 'text': "We don't need that.", 'start': 796.632, 'duration': 0.68}, {'end': 804.035, 'text': 'And so, by the way, if I go back to here, we could see it automatically reloads, which is the power of browser sync.', 'start': 797.792, 'duration': 6.243}, {'end': 806.846, 'text': "Okay, so let's go ahead.", 'start': 804.645, 'duration': 2.201}], 'summary': 'Using gulp, the task successfully compiles css and reloads the browser, displaying a red background on localhost 3000.', 'duration': 69.247, 'max_score': 737.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU737599.jpg'}], 'start': 392.979, 'title': 'Setting up project structure and bootstrap with gulp', 'summary': 'Discusses setting up project structure in visual studio code, including creating folders for assets, css, js, and scss, and setting up bootstrap with gulp, which involves creating scss files, a gulp file, and running gulp to load a browser on localhost 3000 with a red background.', 'chapters': [{'end': 475.592, 'start': 392.979, 'title': 'Setting up project structure in visual studio code', 'summary': 'Discusses setting up project structure in visual studio code, including creating folders for assets, css, js, and scss, and adding an index.html file with basic html and external font and icon dependencies.', 'duration': 82.613, 'highlights': ['Creating folders for assets, CSS, JS, and SCSS within the source folder.', 'Adding an index.html file with basic HTML structure and external font and icon dependencies from Google web fonts and Font Awesome.', 'Launching Visual Studio Code editor automatically by typing code in a period.']}, {'end': 806.846, 'start': 476.073, 'title': 'Setting up bootstrap with gulp', 'summary': 'Explains setting up bootstrap with gulp, including the process of creating scss files, creating a gulp file, and running gulp to load a browser on localhost 3000 with a red background.', 'duration': 330.773, 'highlights': ['The chapter explains the process of creating a SCSS file called styles.scss, setting a red background, and testing the Gulp process for converting SAS to regular CSS.', 'It demonstrates the creation of a gulp file.js, the inclusion of necessary packages, and the definition of tasks for serving and watching files.', 'It describes the tasks for serving a localhost server on port 3000, watching specific files, and reloading HTML on change.', 'The chapter demonstrates the task for injecting JavaScript files from the node modules folder into the source.js folder and the process of compiling SAS into CSS and auto-injecting it into the browser using Gulp.']}], 'duration': 413.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU392979.jpg', 'highlights': ['Setting up project structure in Visual Studio Code with folders for assets, CSS, JS, and SCSS', "Creating SCSS file 'styles.scss' with red background and testing Gulp process for converting SCSS to CSS", 'Creating gulp file.js, including necessary packages, and defining tasks for serving and watching files', 'Demonstrating tasks for serving localhost server on port 3000, watching specific files, and auto-reloading HTML on change', 'Injecting JavaScript files from node modules folder into source.js folder and compiling SCSS into CSS with auto-injection into the browser using Gulp']}, {'end': 1194.511, 'segs': [{'end': 881.472, 'src': 'embed', 'start': 856.963, 'weight': 1, 'content': [{'end': 864.711, 'text': 'You could see that our container is just a fixed width sort of container for our content.', 'start': 856.963, 'duration': 7.748}, {'end': 874.103, 'text': 'Alright. so in the case or the scenario in which you wanted 100% fluid layout, you would use instead of the container class,', 'start': 865.191, 'duration': 8.912}, {'end': 878.348, 'text': 'you would use container-fluid right here.', 'start': 874.103, 'duration': 4.245}, {'end': 880.371, 'text': "Okay? We're not going to do that.", 'start': 878.929, 'duration': 1.442}, {'end': 881.472, 'text': "We're going to have a fixed width.", 'start': 880.391, 'duration': 1.081}], 'summary': 'Using fixed width container for content layout, not 100% fluid layout.', 'duration': 24.509, 'max_score': 856.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU856963.jpg'}, {'end': 953.235, 'src': 'embed', 'start': 925.287, 'weight': 0, 'content': [{'end': 932.789, 'text': 'But my goal with this crash course is going to be reverting back and forth with this documentation, just to show you how it works.', 'start': 925.287, 'duration': 7.502}, {'end': 939.231, 'text': 'that way you can have more power going forward, understanding how to use all these things yourself, based on the few that we do use.', 'start': 932.789, 'duration': 6.442}, {'end': 946.233, 'text': 'so the nav bar is going to be one that we use right here, and the way the document by and large, the documentation by and large,', 'start': 939.231, 'duration': 7.002}, {'end': 953.235, 'text': 'is set up is you have all your different sections here and then, on the right hand side,', 'start': 946.233, 'duration': 7.002}], 'summary': 'Demonstrating reverting between documentation for more power and understanding.', 'duration': 27.948, 'max_score': 925.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU925287.jpg'}, {'end': 1046.017, 'src': 'embed', 'start': 1019.605, 'weight': 5, 'content': [{'end': 1027.769, 'text': "i mean this is going to show you the full thing in terms of what it's capable of producing, And this is the example that they show.", 'start': 1019.605, 'duration': 8.164}, {'end': 1036.553, 'text': "If you go down beyond that, it's going to start at the absolute bare bones basics like navbar, which is the class that we just created,", 'start': 1028.569, 'duration': 7.984}, {'end': 1039.253, 'text': 'navbar-light and bg-light, all that stuff.', 'start': 1036.553, 'duration': 2.7}, {'end': 1046.017, 'text': "So this is where you're going to find information on the specific classes that we just use.", 'start': 1040.733, 'duration': 5.284}], 'summary': 'The transcript demonstrates the capabilities of producing a full example, starting with basic classes like navbar, navbar-light, and bg-light.', 'duration': 26.412, 'max_score': 1019.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1019605.jpg'}], 'start': 806.926, 'title': 'Bootstrap 4 fundamentals', 'summary': 'Covers bootstrap 4 basics, including the container class for layout centering, container-fluid for fluid layout, and navigation bar inclusion. it also offers a crash course on using the navbar component with specific classes and attributes for a thorough understanding.', 'chapters': [{'end': 903.742, 'start': 806.926, 'title': 'Bootstrap 4 project basics', 'summary': 'Introduces the basics of bootstrap 4, emphasizing the use of the container class for horizontal layout centering and the option for a 100% fluid layout using container-fluid, while also mentioning the inclusion of a navigation bar.', 'duration': 96.816, 'highlights': ['The container class allows you to horizontally center your layout, providing a fixed width for the content.', 'The option for a 100% fluid layout is available using container-fluid instead of the container class.', 'The inclusion of a navigation bar is highlighted as the next element after defining the container.']}, {'end': 1194.511, 'start': 903.742, 'title': 'Bootstrap 4 crash course', 'summary': 'Explores a crash course on bootstrap 4, demonstrating the usage of the navbar component with specific classes and attributes, providing a thorough understanding of the documentation and its application.', 'duration': 290.769, 'highlights': ['The documentation by and large is set up with different sections and quick links, providing examples and descriptions of HTML and classes. The documentation is thorough, offering different sections and quick links that provide examples and descriptions of HTML and classes, facilitating understanding.', 'Explaining the classes used for the navbar, such as navbar, navbar-dark, navbar-brand, and their functions for color, background, and logo placement. The explanation covers essential classes for the navbar like navbar, navbar-dark, and navbar-brand, detailing their functions for color, background, and logo placement.', 'Demonstrating the construction of a navigation menu using div and ul classes, with specific attributes like margin left auto for alignment. The demonstration showcases the construction of a navigation menu using div and ul classes, emphasizing attributes like margin left auto for alignment.']}], 'duration': 387.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU806926.jpg', 'highlights': ['The inclusion of a navigation bar is highlighted as the next element after defining the container.', 'The option for a 100% fluid layout is available using container-fluid instead of the container class.', 'The container class allows you to horizontally center your layout, providing a fixed width for the content.', 'Explaining the classes used for the navbar, such as navbar, navbar-dark, navbar-brand, and their functions for color, background, and logo placement.', 'Demonstrating the construction of a navigation menu using div and ul classes, with specific attributes like margin left auto for alignment.', 'The documentation by and large is set up with different sections and quick links, providing examples and descriptions of HTML and classes.']}, {'end': 1437.976, 'segs': [{'end': 1303.395, 'src': 'embed', 'start': 1223.963, 'weight': 0, 'content': [{'end': 1224.543, 'text': 'But there we go.', 'start': 1223.963, 'duration': 0.58}, {'end': 1229.465, 'text': 'We have our home about products and contact showing up real nice and neat right there.', 'start': 1224.583, 'duration': 4.882}, {'end': 1234.126, 'text': "Awesome. Okay, so now what's it like?", 'start': 1229.925, 'duration': 4.201}, {'end': 1236.167, 'text': 'it takes, for instance, to add a dropdown?', 'start': 1234.126, 'duration': 2.041}, {'end': 1242.489, 'text': 'Once again, all of that stuff will be found in the documentation that I just showed you a little bit ago for navbar.', 'start': 1236.707, 'duration': 5.782}, {'end': 1251.633, 'text': "But just to show you real quickly what the dropdown or how to do a dropdown, we change, let's say we want our products to be a dropdown.", 'start': 1243.21, 'duration': 8.423}, {'end': 1258.055, 'text': 'So the first thing we do is we take navitem, we add a dropdown class, all right?', 'start': 1251.753, 'duration': 6.302}, {'end': 1264.479, 'text': 'and then we put in a class of nav link and then we put drop down toggle.', 'start': 1258.675, 'duration': 5.804}, {'end': 1270.564, 'text': 'so we add those two classes of drop down and then drop down toggle on the actual link.', 'start': 1264.479, 'duration': 6.085}, {'end': 1272.866, 'text': 'we have to give this an id as well.', 'start': 1270.564, 'duration': 2.302}, {'end': 1275.408, 'text': "so i'm going to shrink this a little bit.", 'start': 1272.866, 'duration': 2.542}, {'end': 1282.653, 'text': 'id is going to be navbar drop down Alright and then data hyphen toggle.', 'start': 1275.408, 'duration': 7.245}, {'end': 1285.414, 'text': "And then we're going to put drop down.", 'start': 1283.873, 'duration': 1.541}, {'end': 1297.542, 'text': "Alright, so then outside of the actual a but still inside of our list item, we're going to put in a div with a class of drop down menu.", 'start': 1285.434, 'duration': 12.108}, {'end': 1303.395, 'text': "And then inside of here, we're going to put individual anchors.", 'start': 1299.673, 'duration': 3.722}], 'summary': "The transcript demonstrates how to add a dropdown to a website's navigation, using specific classes and ids for functionality.", 'duration': 79.432, 'max_score': 1223.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1223963.jpg'}], 'start': 1195.345, 'title': 'Adding dropdown and hamburger menu', 'summary': 'Demonstrates adding a dropdown menu to the navbar and creating a hamburger menu in bootstrap 4, utilizing classes and attributes to configure the dropdown functionality and structure, addressing a display issue, and achieving successful appearance of the menu.', 'chapters': [{'end': 1324.968, 'start': 1195.345, 'title': 'Adding dropdown menu to navbar', 'summary': 'Demonstrates adding a dropdown menu to the navbar, utilizing classes and attributes to configure the dropdown functionality and structure, with a mention of using visual studio code shortcuts and adding separators as per documentation.', 'duration': 129.623, 'highlights': ['The chapter demonstrates adding a dropdown menu to the navbar, utilizing classes and attributes to configure the dropdown functionality and structure, with a mention of using Visual Studio Code shortcuts and adding separators as per documentation.', "The process involves adding classes like 'dropdown' and 'dropdown-toggle', along with setting an id and data-toggle attribute for the dropdown functionality.", "Instructions on creating the dropdown structure are provided, including the use of 'dropdown-menu' class and individual anchors within a div, with a demonstration of adding a separator as per documentation."]}, {'end': 1437.976, 'start': 1326.425, 'title': 'Bootstrap 4 hamburger menu', 'summary': 'Covers creating a hamburger menu in bootstrap 4, including adding the necessary markup and addressing a display issue, ultimately resulting in the successful appearance of the menu.', 'duration': 111.551, 'highlights': ['The process of creating a hamburger menu in Bootstrap 4 by adding the necessary markup and addressing a display issue resulting in the successful appearance of the menu.', 'Adding the required markup for the hamburger menu in Bootstrap 4, including the button with specific classes and data attributes for toggling and collapsing the menu on smaller viewports.', 'Addressing a display issue related to the appearance of the hamburger menu and rectifying it by correcting a mistake in the markup.']}], 'duration': 242.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1195345.jpg', 'highlights': ['Demonstrates adding a dropdown menu to the navbar using classes and attributes.', 'Creating a hamburger menu in Bootstrap 4 and addressing a display issue.', 'Instructions on creating the dropdown structure and adding separators as per documentation.', "Adding classes like 'dropdown' and 'dropdown-toggle' for dropdown functionality.", 'Addressing a display issue related to the appearance of the hamburger menu.']}, {'end': 2601.051, 'segs': [{'end': 1467.084, 'src': 'embed', 'start': 1438.136, 'weight': 3, 'content': [{'end': 1439.857, 'text': "Awesome And of course, it's responsive.", 'start': 1438.136, 'duration': 1.721}, {'end': 1443.29, 'text': 'Okay All right.', 'start': 1441.949, 'duration': 1.341}, {'end': 1453.736, 'text': "So let's talk about, okay, what would be another common section that would fall underneath kind of a navigation here? Well, usually a hero section.", 'start': 1443.41, 'duration': 10.326}, {'end': 1460.32, 'text': "And when it comes to Bootstrap 4, it's called a jumbotron, okay? Makes it sound more exciting, I guess.", 'start': 1453.856, 'duration': 6.464}, {'end': 1465.263, 'text': 'And so, again, you know, they have a jumbotron section.', 'start': 1460.881, 'duration': 4.382}, {'end': 1467.084, 'text': "It's considered a component.", 'start': 1465.323, 'duration': 1.761}], 'summary': 'Discussion on bootstrap 4 components including responsive design and jumbotron section.', 'duration': 28.948, 'max_score': 1438.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1438136.jpg'}, {'end': 1557.453, 'src': 'embed', 'start': 1529.461, 'weight': 0, 'content': [{'end': 1533.083, 'text': "And again, you're not, you can add whatever you want in this section.", 'start': 1529.461, 'duration': 3.622}, {'end': 1539.326, 'text': "I mean, it's, you know, it's not something that where you're constrained to whatever the documentation shows.", 'start': 1533.263, 'duration': 6.063}, {'end': 1543.668, 'text': "We're going to add another lead section with a call to action button.", 'start': 1539.346, 'duration': 4.322}, {'end': 1546.089, 'text': 'So class equals BTN.', 'start': 1544.228, 'duration': 1.861}, {'end': 1548.25, 'text': 'Of course, this is all coming from Bootstrap.', 'start': 1546.589, 'duration': 1.661}, {'end': 1554.553, 'text': 'You can find this in the button section, BTN primary and BTN large LG rather.', 'start': 1548.77, 'duration': 5.783}, {'end': 1557.453, 'text': 'going nowhere.', 'start': 1556.212, 'duration': 1.241}], 'summary': 'Adding a lead section with a call to action button using bootstrap.', 'duration': 27.992, 'max_score': 1529.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1529461.jpg'}, {'end': 1659.524, 'src': 'embed', 'start': 1632.777, 'weight': 8, 'content': [{'end': 1637.981, 'text': 'so if you look at it real quick, You can see all of these sections.', 'start': 1632.777, 'duration': 5.204}, {'end': 1639.884, 'text': 'I mean, they look at all this.', 'start': 1638.102, 'duration': 1.782}, {'end': 1641.807, 'text': "Yeah, there's there's a lot to take in.", 'start': 1639.904, 'duration': 1.903}, {'end': 1644.03, 'text': 'Of course, I am not going to be covering everything.', 'start': 1641.867, 'duration': 2.163}, {'end': 1650.92, 'text': 'But I will show you and try to demonstrate the core aspects and fundamentals of how it all works.', 'start': 1644.971, 'duration': 5.949}, {'end': 1659.524, 'text': "So let's say, for instance, that we want to have underneath this section, right here, right around here,", 'start': 1651.58, 'duration': 7.944}], 'summary': 'Demonstrating core aspects and fundamentals of sections in the transcript.', 'duration': 26.747, 'max_score': 1632.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1632777.jpg'}, {'end': 1805.898, 'src': 'embed', 'start': 1776.75, 'weight': 9, 'content': [{'end': 1780.231, 'text': 'Again, this is all coming from the card component documentation section.', 'start': 1776.75, 'duration': 3.481}, {'end': 1785.252, 'text': "So we're going to have our card title here, and then we're going to have a description.", 'start': 1780.811, 'duration': 4.441}, {'end': 1798.051, 'text': 'card text and then some quick text to build up on the card title and then finally a button of some sort.', 'start': 1789.042, 'duration': 9.009}, {'end': 1804.597, 'text': 'so ahref, going nowhere and class equals card link, because this is a link.', 'start': 1798.051, 'duration': 6.546}, {'end': 1805.898, 'text': 'so another link All right.', 'start': 1804.597, 'duration': 1.301}], 'summary': 'Documentation section: card component with title, description, text, and button.', 'duration': 29.148, 'max_score': 1776.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1776750.jpg'}, {'end': 2118.475, 'src': 'heatmap', 'start': 2075.034, 'weight': 1, 'content': [{'end': 2083.879, 'text': 'y would be on top and bottom to add margin or padding and then blank and for classes that set margin and padding on all four sides of the element,', 'start': 2075.034, 'duration': 8.845}, {'end': 2092.105, 'text': 'and then after that, On the final step, you put a hyphen and then a size 0 through 5..', 'start': 2083.879, 'duration': 8.226}, {'end': 2094.107, 'text': "So let's go ahead and try that real quickly.", 'start': 2092.105, 'duration': 2.002}, {'end': 2109.679, 'text': "So we would add on our first card container, which is right here, we could add margin because we want it to be outside of it, bottom, and we'll use 4.", 'start': 2095.928, 'duration': 13.751}, {'end': 2115.792, 'text': 'So now if we drag this in, We have our space.', 'start': 2109.679, 'duration': 6.113}, {'end': 2118.475, 'text': 'Awesome All right.', 'start': 2117.173, 'duration': 1.302}], 'summary': 'Adding margin to the top and bottom of the card container by 4 units to create space outside the element.', 'duration': 43.441, 'max_score': 2075.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU2075034.jpg'}, {'end': 2460.467, 'src': 'embed', 'start': 2419.708, 'weight': 2, 'content': [{'end': 2421.908, 'text': 'We can add active just to show what that looks like.', 'start': 2419.708, 'duration': 2.2}, {'end': 2423.989, 'text': 'Href going nowhere.', 'start': 2422.969, 'duration': 1.02}, {'end': 2428.31, 'text': "And then we'll say active.", 'start': 2426.39, 'duration': 1.92}, {'end': 2430.491, 'text': "Let's just copy this.", 'start': 2429.591, 'duration': 0.9}, {'end': 2436.558, 'text': "And then for this, let's remove that.", 'start': 2433.755, 'duration': 2.803}, {'end': 2439.08, 'text': "We'll just put link.", 'start': 2438.259, 'duration': 0.821}, {'end': 2442.243, 'text': 'This is coming pretty much from the documentation.', 'start': 2439.901, 'duration': 2.342}, {'end': 2443.344, 'text': 'Very simple stuff.', 'start': 2442.483, 'duration': 0.861}, {'end': 2449.69, 'text': 'Wow, I hate doing that.', 'start': 2448.749, 'duration': 0.941}, {'end': 2453.233, 'text': "And then we'll have one more.", 'start': 2449.79, 'duration': 3.443}, {'end': 2460.467, 'text': "we'll just say this is what it looks like to be disabled.", 'start': 2458.086, 'duration': 2.381}], 'summary': 'Demonstration of adding active and disabled attributes to links.', 'duration': 40.759, 'max_score': 2419.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU2419708.jpg'}], 'start': 1438.136, 'title': 'Bootstrap 4 essentials', 'summary': 'Covers essential aspects of bootstrap 4, including adding jumbotron section for responsive layout, emphasizing grid system based on flexbox with detailed documentation and cross-browser support, fundamentals such as creating equal width columns, responsive design, custom sizing, working with cards, adding spacing and type to the design, and customization aspects such as topography, utility classes, text alignment, responsive behavior, implementation of a vertical navigation menu, and customization through variable overrides and importing of scss files.', 'chapters': [{'end': 1632.777, 'start': 1438.136, 'title': 'Bootstrap 4 jumbotron and grid system', 'summary': 'Discusses adding a jumbotron section in bootstrap 4 for a responsive layout, then emphasizes the grid system based on flexbox, highlighting its detailed documentation and cross-browser support.', 'duration': 194.641, 'highlights': ['The grid system in Bootstrap 4 is based on Flexbox, with detailed documentation available for reference.', 'Flexbox is preferred over the CSS grid due to its higher browser support, with Flexbox almost at 100% and CSS grid at around 76%.', 'The Jumbotron section in Bootstrap 4, known as a hero section, is demonstrated with simple HTML and class usage, emphasizing its flexibility for customization.', 'The Jumbotron section includes a heading with a class of display four, a subheading with a class of lead, and a call-to-action button with specific Bootstrap classes.']}, {'end': 2254.186, 'start': 1632.777, 'title': 'Bootstrap 4 basics', 'summary': 'Covers the fundamentals of bootstrap 4, including creating equal width columns, responsive design, custom sizing, working with cards, and adding spacing and type to the design.', 'duration': 621.409, 'highlights': ['The chapter demonstrates how to create equal width columns in Bootstrap 4, allowing for three columns of equal width to display content, and introduces the concept of rows and columns in the grid system. Three columns of equal width', 'The chapter explains how to make the design responsive by using Bootstrap 4 classes to specify the column width for different viewports, such as small and medium, ensuring a better user experience across devices. Usage of Bootstrap 4 classes for responsive design', 'The chapter discusses the concept of custom sizing in the grid system, based on 12 columns, and illustrates how to extend the width of a column by specifying the number of columns it should occupy, affecting the adaptability of other columns. Explanation of custom sizing and its impact on column adaptability', 'The chapter introduces the use of cards in Bootstrap 4 to display content in a panel-like format, explaining the components of a card, including padding, text centering, border, and corner radius, to enhance the visual appeal of content. Explanation and demonstration of card components in Bootstrap 4', 'The chapter explains the spacing system in Bootstrap 4, for adding margin and padding to elements, and demonstrates the use of classes to add spacing, ensuring a visually appealing layout. Demonstration of adding margin and padding using Bootstrap 4 classes']}, {'end': 2601.051, 'start': 2254.967, 'title': 'Bootstrap 4 customization', 'summary': 'Discusses the topography and utility classes of bootstrap 4, demonstrating text alignment and responsive behavior. it then covers the implementation of a vertical navigation menu and customization of bootstrap 4 through variable overrides and importing of scss files.', 'duration': 346.084, 'highlights': ['The chapter discusses the topography and utility classes of Bootstrap 4, demonstrating text alignment and responsive behavior. It covers the relevant information about type issues, helper classes for text alignment, and responsiveness.', 'It then covers the implementation of a vertical navigation menu. It demonstrates adding an H3 element, margin bottom style, UL class for vertical navigation, and nav pills for styling.', 'Customization of Bootstrap 4 through variable overrides and importing of SCSS files is explained. It explains adding variable overrides, importing bootstrap SCSS files, and the two methods of customizing Bootstrap 4.']}], 'duration': 1162.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU1438136.jpg', 'highlights': ['The grid system in Bootstrap 4 is based on Flexbox, with detailed documentation available for reference.', 'The Jumbotron section in Bootstrap 4, known as a hero section, is demonstrated with simple HTML and class usage, emphasizing its flexibility for customization.', 'Flexbox is preferred over the CSS grid due to its higher browser support, with Flexbox almost at 100% and CSS grid at around 76%.', 'The chapter demonstrates how to create equal width columns in Bootstrap 4, allowing for three columns of equal width to display content, and introduces the concept of rows and columns in the grid system.', 'The chapter explains how to make the design responsive by using Bootstrap 4 classes to specify the column width for different viewports, such as small and medium, ensuring a better user experience across devices.', 'The chapter introduces the use of cards in Bootstrap 4 to display content in a panel-like format, explaining the components of a card, including padding, text centering, border, and corner radius, to enhance the visual appeal of content.', 'The chapter explains the spacing system in Bootstrap 4, for adding margin and padding to elements, and demonstrates the use of classes to add spacing, ensuring a visually appealing layout.', 'The chapter discusses the topography and utility classes of Bootstrap 4, demonstrating text alignment and responsive behavior.', 'It then covers the implementation of a vertical navigation menu. It demonstrates adding an H3 element, margin bottom style, UL class for vertical navigation, and nav pills for styling.', 'Customization of Bootstrap 4 through variable overrides and importing of SCSS files is explained.']}, {'end': 2975.478, 'segs': [{'end': 2750.243, 'src': 'embed', 'start': 2716.181, 'weight': 3, 'content': [{'end': 2717.262, 'text': 'very, very simple.', 'start': 2716.181, 'duration': 1.081}, {'end': 2725.728, 'text': 'so if you wanted to change more of the default colors based on whatever components that you have here, then again you just go back to the variables,', 'start': 2717.262, 'duration': 8.466}, {'end': 2730.512, 'text': 'you see what you can change for secondary success, info, warning, danger light, dark, blah,', 'start': 2725.728, 'duration': 4.784}, {'end': 2740.119, 'text': 'blah blah and you specify your custom adjustments right here in your styles and you just put a comma right there and add them.', 'start': 2730.512, 'duration': 9.607}, {'end': 2741.54, 'text': 'very simple.', 'start': 2740.119, 'duration': 1.421}, {'end': 2744.282, 'text': "let's say, for instance, we want to change the background color.", 'start': 2741.54, 'duration': 2.742}, {'end': 2750.243, 'text': 'Well, if you just study up enough, we can find it.', 'start': 2745.327, 'duration': 4.916}], 'summary': 'Easily customize default colors using variables for different components in styles.', 'duration': 34.062, 'max_score': 2716.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU2716181.jpg'}, {'end': 2847.287, 'src': 'embed', 'start': 2819.531, 'weight': 4, 'content': [{'end': 2824.035, 'text': 'All right, we see that it says div clash class rather jumbotron.', 'start': 2819.531, 'duration': 4.504}, {'end': 2826.032, 'text': 'And it has a current background color.', 'start': 2824.451, 'duration': 1.581}, {'end': 2831.336, 'text': 'If you want to experiment right here in the browser, you can do that by clicking this.', 'start': 2828.334, 'duration': 3.002}, {'end': 2833.077, 'text': "We'll make it white, for instance.", 'start': 2831.896, 'duration': 1.181}, {'end': 2834.358, 'text': 'I like that.', 'start': 2833.797, 'duration': 0.561}, {'end': 2836.099, 'text': 'I think it looks a lot better.', 'start': 2834.978, 'duration': 1.121}, {'end': 2840.402, 'text': "So we'll just change that div class of jumbotron.", 'start': 2836.559, 'duration': 3.843}, {'end': 2844.325, 'text': "And if it's already defined, you may have to use the important flag.", 'start': 2841.322, 'duration': 3.003}, {'end': 2847.287, 'text': "So it's called jumbotron.", 'start': 2844.765, 'duration': 2.522}], 'summary': 'Experiment with changing the background color of div class jumbotron to white for a better look.', 'duration': 27.756, 'max_score': 2819.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU2819531.jpg'}, {'end': 2895.434, 'src': 'embed', 'start': 2873.443, 'weight': 0, 'content': [{'end': 2881.967, 'text': "And the only reason I'm using that is because I actually, that's what, you know, when you change stuff here, it uses RGB here.", 'start': 2873.443, 'duration': 8.524}, {'end': 2885.829, 'text': "So if we save it now, it's going to be white as it refreshes.", 'start': 2882.047, 'duration': 3.782}, {'end': 2894.113, 'text': "And now we can see, if I get rid of this, we have that very slight, I'm not sure if you can see it, you know, custom adjustment that we have here.", 'start': 2886.169, 'duration': 7.944}, {'end': 2895.434, 'text': 'So now..', 'start': 2895.014, 'duration': 0.42}], 'summary': 'Using rgb for color adjustment and achieving a custom adjustment.', 'duration': 21.991, 'max_score': 2873.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU2873443.jpg'}], 'start': 2601.251, 'title': 'Customizing bootstrap theme colors and crash course', 'summary': 'Discusses customizing bootstrap theme colors by modifying variables in the node_modules bootstrap folder, enabling extensive color customization. it also covers bootstrap crash course, integrating with a cdn, achieving diverse layouts, and theming.', 'chapters': [{'end': 2740.119, 'start': 2601.251, 'title': 'Customizing bootstrap theme colors', 'summary': 'Discusses how to customize bootstrap theme colors by modifying the variables in the node_modules bootstrap folder, specifically the variables.scss file, allowing for easy and extensive color customization based on the color system and theme colors map.', 'duration': 138.868, 'highlights': ['Modifying theme colors in Bootstrap by adjusting variables in the variables.scss file in the node_modules Bootstrap folder allows for extensive color customization based on the color system and theme colors map. extensive color customization, variables.scss file, color system, theme colors map', 'Changing the primary theme color from blue to a fiery orange by re-referencing the theme colors in the variables.scss file demonstrates the simplicity and flexibility of the customization process. changing primary theme color, flexibility, simplicity', 'The chapter emphasizes the ease of customizing default colors for various components by specifying custom adjustments in the variables.scss file, providing a comprehensive approach to color personalization in Bootstrap. customizing default colors, comprehensive approach, variables.scss file, color personalization']}, {'end': 2975.478, 'start': 2740.119, 'title': 'Bootstrap crash course and customization', 'summary': 'Covers customizing the background color and making specific adjustments in bootstrap, providing insights into integrating it with a cdn and utilizing the documentation efficiently, enabling users to achieve diverse layouts and theming while simplifying the learning process.', 'duration': 235.359, 'highlights': ['The chapter covers customizing the background color and making specific adjustments in Bootstrap. The tutorial demonstrates changing the background color and making custom adjustments to elements using Bootstrap, providing practical coding examples.', 'Insights into integrating Bootstrap with a CDN and utilizing the documentation efficiently. The tutorial explains the integration of Bootstrap with a CDN and emphasizes the efficient use of the documentation, enhancing the learning experience.', 'Enabling users to achieve diverse layouts and theming while simplifying the learning process. The tutorial empowers users to create diverse layouts and themes with Bootstrap while simplifying the learning process, enabling them to achieve their design goals.']}], 'duration': 374.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hnCmSXCZEpU/pics/hnCmSXCZEpU2601251.jpg', 'highlights': ['Modifying theme colors in Bootstrap by adjusting variables in the variables.scss file in the node_modules Bootstrap folder allows for extensive color customization based on the color system and theme colors map.', 'The chapter emphasizes the ease of customizing default colors for various components by specifying custom adjustments in the variables.scss file, providing a comprehensive approach to color personalization in Bootstrap.', 'Changing the primary theme color from blue to a fiery orange by re-referencing the theme colors in the variables.scss file demonstrates the simplicity and flexibility of the customization process.', 'The tutorial demonstrates changing the background color and making custom adjustments to elements using Bootstrap, providing practical coding examples.', 'Insights into integrating Bootstrap with a CDN and utilizing the documentation efficiently. The tutorial explains the integration of Bootstrap with a CDN and emphasizes the efficient use of the documentation, enhancing the learning experience.', 'Enabling users to achieve diverse layouts and theming while simplifying the learning process. The tutorial empowers users to create diverse layouts and themes with Bootstrap while simplifying the learning process, enabling them to achieve their design goals.']}], 'highlights': ['Bootstrap 4.0.0 released after several years of development and out of alpha and beta versions.', 'The official version of Bootstrap 4.0.0 was released on the 18th of January after several years of development, marking the end of the alpha and beta versions.', 'The method involving Bootstrap CSS via a CDN in the browser is described, emphasizing its inclusion of everything needed but lacking customization, suitable for prototyping and quick projects.', 'Setting up project structure in Visual Studio Code with folders for assets, CSS, JS, and SCSS', "Creating SCSS file 'styles.scss' with red background and testing Gulp process for converting SCSS to CSS", 'Creating gulp file.js, including necessary packages, and defining tasks for serving and watching files', 'The inclusion of a navigation bar is highlighted as the next element after defining the container.', 'The option for a 100% fluid layout is available using container-fluid instead of the container class.', 'The grid system in Bootstrap 4 is based on Flexbox, with detailed documentation available for reference.', 'The Jumbotron section in Bootstrap 4, known as a hero section, is demonstrated with simple HTML and class usage, emphasizing its flexibility for customization.', 'Flexbox is preferred over the CSS grid due to its higher browser support, with Flexbox almost at 100% and CSS grid at around 76%.', 'The chapter demonstrates how to create equal width columns in Bootstrap 4, allowing for three columns of equal width to display content, and introduces the concept of rows and columns in the grid system.', 'The chapter explains how to make the design responsive by using Bootstrap 4 classes to specify the column width for different viewports, such as small and medium, ensuring a better user experience across devices.', 'The chapter introduces the use of cards in Bootstrap 4 to display content in a panel-like format, explaining the components of a card, including padding, text centering, border, and corner radius, to enhance the visual appeal of content.', 'The chapter explains the spacing system in Bootstrap 4, for adding margin and padding to elements, and demonstrates the use of classes to add spacing, ensuring a visually appealing layout.', 'Modifying theme colors in Bootstrap by adjusting variables in the variables.scss file in the node_modules Bootstrap folder allows for extensive color customization based on the color system and theme colors map.', 'The chapter emphasizes the ease of customizing default colors for various components by specifying custom adjustments in the variables.scss file, providing a comprehensive approach to color personalization in Bootstrap.', 'Changing the primary theme color from blue to a fiery orange by re-referencing the theme colors in the variables.scss file demonstrates the simplicity and flexibility of the customization process.', 'The tutorial demonstrates changing the background color and making custom adjustments to elements using Bootstrap, providing practical coding examples.', 'Insights into integrating Bootstrap with a CDN and utilizing the documentation efficiently. The tutorial explains the integration of Bootstrap with a CDN and emphasizes the efficient use of the documentation, enhancing the learning experience.', 'Enabling users to achieve diverse layouts and theming while simplifying the learning process. The tutorial empowers users to create diverse layouts and themes with Bootstrap while simplifying the learning process, enabling them to achieve their design goals.']}