title
Bootstrap Beginner Crash Course

description
Want to learn Twitter Bootstrap? In this video we will cover the Twitter Bootstrap framework in depth from installation to all of the HTML/CSS components and features. Grid System Navbars & Dropdowns Jumbotron List Group Alerts & Progress bars Typography Labels & Badges Much More... CODE - http://www.traversymedia.com/downloads/bootstrap_cheatsheet.zip 9 HOUR BOOTSTRAP 4 COURSE W/5 PROJECTS: https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/?couponCode=YOU_TUBE BUILD AN ADMIN THEME VIDEO https://www.youtube.com/watch?v=pXbEcGUtHgo 10 PROJECT BOOTSTRAP COURSE: https://www.eduonix.com/affiliates/id/16-10061 SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH: http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia

detail
{'title': 'Bootstrap Beginner Crash Course', 'heatmap': [{'end': 1545.929, 'start': 1493.55, 'weight': 1}], 'summary': "This beginner crash course on twitter bootstrap covers the framework's advantages, bootstrap 4 features, setup, web development documentation, styling buttons, contextual classes, forms, tables, panels, wells, alerts, ui elements, and the bootstrap grid system. it also introduces the use of bootstrap for ui development, including adding a navbar and jumbotron, and hints at future tutorials on javascript and cms admin theme ui.", 'chapters': [{'end': 459.131, 'segs': [{'end': 131.292, 'src': 'embed', 'start': 89.957, 'weight': 0, 'content': [{'end': 94.761, 'text': 'Bootstrap is used for building responsive mobile-first web applications and websites.', 'start': 89.957, 'duration': 4.804}, {'end': 102.488, 'text': 'And what mobile-first means is it refers to designing for smaller screens first and then working up to the larger screens.', 'start': 95.482, 'duration': 7.006}, {'end': 105.531, 'text': "So it's great for mobile apps and mobile websites.", 'start': 102.929, 'duration': 2.602}, {'end': 109.615, 'text': "It's also the most popular framework of its type by far.", 'start': 106.712, 'duration': 2.903}, {'end': 116.441, 'text': 'Foundation is pretty popular as well, but nowhere as near as popular as Bootstrap is.', 'start': 110.375, 'duration': 6.066}, {'end': 120.849, 'text': 'So why use Bootstrap or any framework at all?', 'start': 118.268, 'duration': 2.581}, {'end': 123.63, 'text': 'Why not just build the HTML and CSS outright?', 'start': 120.889, 'duration': 2.741}, {'end': 128.89, 'text': "In many cases that may be a good idea, but let's look at what Bootstrap can offer you.", 'start': 124.33, 'duration': 4.56}, {'end': 131.292, 'text': 'So increased development speed.', 'start': 129.751, 'duration': 1.541}], 'summary': 'Bootstrap is the most popular framework for building responsive web applications, offering increased development speed.', 'duration': 41.335, 'max_score': 89.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy889957.jpg'}, {'end': 269.406, 'src': 'embed', 'start': 243.876, 'weight': 2, 'content': [{'end': 248.423, 'text': 'It allows you to create layouts without having to use floats or any of that.', 'start': 243.876, 'duration': 4.547}, {'end': 254.047, 'text': "Alright, we'll also create what we're going to be working on is a bootstrap cheat sheet.", 'start': 249.321, 'duration': 4.726}, {'end': 257.19, 'text': "So it's not going to be a theme, an organized theme.", 'start': 254.067, 'duration': 3.123}, {'end': 269.406, 'text': "We're just going to look at some of the classes and syntax and put together a single index HTML file that you can refer to to figure out what you need to do to create alerts or progress bars,", 'start': 257.231, 'duration': 12.175}], 'summary': 'Creating a bootstrap cheat sheet for easy reference, including classes and syntax, to build alerts or progress bars.', 'duration': 25.53, 'max_score': 243.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8243876.jpg'}, {'end': 300.013, 'src': 'embed', 'start': 274.711, 'weight': 3, 'content': [{'end': 279.935, 'text': "but we're going to go through it step by step and you'll have something to refer to on a single page.", 'start': 274.711, 'duration': 5.224}, {'end': 287.885, 'text': 'Now, as far as what Bootstrap gives you for components and helpers and things like that, this is just some of them.', 'start': 281.221, 'duration': 6.664}, {'end': 294.569, 'text': 'Navbar, dropdowns, Jumbotron which is like a showcase area, alerts, progress bars.', 'start': 288.526, 'duration': 6.043}, {'end': 300.013, 'text': "I'm not going to go through the whole list but these are some of the things that you can implement very very easily.", 'start': 294.589, 'duration': 5.424}], 'summary': 'Bootstrap provides components like navbar, dropdowns, jumbotron, alerts, and progress bars for easy implementation.', 'duration': 25.302, 'max_score': 274.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8274711.jpg'}, {'end': 339.213, 'src': 'embed', 'start': 314.406, 'weight': 4, 'content': [{'end': 322.148, 'text': "so as far as setting up bootstrap there's a few different ways to do it and there's more than what i have listed here uh..", 'start': 314.406, 'duration': 7.742}, {'end': 327.95, 'text': "the the way that we're going to do it is just download the files now you get all the source files uh..", 'start': 322.148, 'duration': 5.802}, {'end': 330.811, 'text': 'including sasson lesson all that stuff uh..', 'start': 327.95, 'duration': 2.861}, {'end': 333.371, 'text': "but what we're going to do is just take the uh..", 'start': 330.811, 'duration': 2.56}, {'end': 339.213, 'text': 'distributed css and javascript, the compiled code and just included in our template k, really easy.', 'start': 333.371, 'duration': 5.842}], 'summary': 'Setting up bootstrap involves downloading source files, including sass, and integrating distributed css and javascript into the template.', 'duration': 24.807, 'max_score': 314.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8314406.jpg'}], 'start': 0.85, 'title': 'Introduction to twitter bootstrap', 'summary': 'Introduces twitter bootstrap, a front-end framework for building responsive mobile-first web applications and websites. it emphasizes advantages like increased development speed, responsiveness, consistency, and support, and outlines the topics to be covered in the course.', 'chapters': [{'end': 459.131, 'start': 0.85, 'title': 'Introduction to twitter bootstrap', 'summary': 'Introduces twitter bootstrap, a front-end framework, emphasizing its use for building responsive mobile-first web applications and websites, its advantages like increased development speed, responsiveness, consistency, and support, and outlines the topics to be covered in the course.', 'duration': 458.281, 'highlights': ['Bootstrap is a front-end framework, used for building responsive mobile-first web applications and websites. Bootstrap is used for building responsive mobile-first web applications and websites, and it refers to designing for smaller screens first and then working up to the larger screens.', 'Increased development speed is the number one reason to use a framework like Bootstrap. Using Bootstrap allows for increased development speed as it provides helper classes for alignment, style, and positioning, reducing the need to build HTML and CSS from scratch.', 'Bootstrap provides a grid system that allows creating layouts without using floats or any complex techniques. The grid system in Bootstrap allows for the creation of layouts without using floats or complex techniques, simplifying the process of creating responsive designs.', 'Bootstrap offers components and helpers such as Navbar, dropdowns, Jumbotron, alerts, progress bars, JavaScript widgets, transitions, modals, drop-downs, tabs, and sliders. Bootstrap provides components and helpers like Navbar, dropdowns, Jumbotron, alerts, progress bars, and JavaScript widgets such as transitions, modals, drop-downs, tabs, and sliders, which can be easily implemented.', 'Different ways to set up Bootstrap include downloading the source files, using a content delivery network (CDN), or using package managers like Bower and NPM. Bootstrap can be set up by downloading the source files, using a content delivery network (CDN), or using package managers like Bower and NPM for easy installation and management.']}], 'duration': 458.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8850.jpg', 'highlights': ['Bootstrap is a front-end framework for building responsive mobile-first web applications and websites.', 'Increased development speed is the number one reason to use a framework like Bootstrap.', 'Bootstrap provides a grid system that allows creating layouts without using floats or any complex techniques.', 'Bootstrap offers components and helpers such as Navbar, dropdowns, Jumbotron, alerts, progress bars, JavaScript widgets, transitions, modals, drop-downs, tabs, and sliders.', 'Different ways to set up Bootstrap include downloading the source files, using a content delivery network (CDN), or using package managers like Bower and NPM.']}, {'end': 799.353, 'segs': [{'end': 487.528, 'src': 'embed', 'start': 459.131, 'weight': 0, 'content': [{'end': 464.973, 'text': "what we're going to do is go to get bootstrap dot com that's the official website for bootstrap uh..", 'start': 459.131, 'duration': 5.842}, {'end': 469.475, 'text': "and you'll see up here bootstrap four is coming this has been here for ages uh..", 'start': 464.973, 'duration': 4.502}, {'end': 474.657, 'text': 'bootstrap four if we open this up is actually still in alpha uh..', 'start': 469.475, 'duration': 5.182}, {'end': 479.421, 'text': "alpha five And I have no idea when the hell it's going to be stable.", 'start': 474.657, 'duration': 4.764}, {'end': 487.528, 'text': 'I debated on doing Bootstrap 4 for this video, but I wanted to do what is stable and available at this time.', 'start': 479.941, 'duration': 7.587}], 'summary': 'Bootstrap four is still in alpha, not stable yet.', 'duration': 28.397, 'max_score': 459.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8459131.jpg'}, {'end': 529.563, 'src': 'embed', 'start': 502.175, 'weight': 1, 'content': [{'end': 507.462, 'text': "We can get the compiled CSS and JavaScript, which is what we're going to use.", 'start': 502.175, 'duration': 5.287}, {'end': 509.324, 'text': 'You can get the entire source code.', 'start': 507.502, 'duration': 1.822}, {'end': 514.831, 'text': 'You can use SAS and LESS, which are CSS precompilers.', 'start': 510.485, 'duration': 4.346}, {'end': 522.577, 'text': 'gives us the CDNs we can use, gives us the commands for Bower and NPM, things like that, Composer.', 'start': 515.451, 'duration': 7.126}, {'end': 525.419, 'text': "Let's see if we could go down here.", 'start': 522.597, 'duration': 2.822}, {'end': 529.563, 'text': 'This gives us basically the structure of the Bootstrap source code.', 'start': 525.479, 'duration': 4.084}], 'summary': 'Transcript covers accessing css/js, source code, precompilers, cdns, and bootstrap structure.', 'duration': 27.388, 'max_score': 502.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8502175.jpg'}, {'end': 694.183, 'src': 'embed', 'start': 623.032, 'weight': 3, 'content': [{'end': 632.135, 'text': "Okay, now if you don't know what minified means, it's basically you take the CSS file and you get rid of all the white space, all the comments.", 'start': 623.032, 'duration': 9.103}, {'end': 638.898, 'text': 'You make it as small as possible, okay, and give it a really small file size by taking that stuff out.', 'start': 632.275, 'duration': 6.623}, {'end': 645.184, 'text': 'you can also use bootstrap.css, which is not the minified, which has all the comments and all that stuff.', 'start': 639.478, 'duration': 5.706}, {'end': 647.487, 'text': "all right, but usually you don't need that.", 'start': 645.184, 'duration': 2.303}, {'end': 648.688, 'text': "now i'm going to get rid of all this.", 'start': 647.487, 'duration': 1.201}, {'end': 652.753, 'text': 'we do not need that, okay.', 'start': 648.688, 'duration': 4.065}, {'end': 654.154, 'text': 'and then we have our body.', 'start': 652.753, 'duration': 1.401}, {'end': 661.216, 'text': "we have an h1 hello world, And right here it's loading jQuery using the Google CDN.", 'start': 654.154, 'duration': 7.062}, {'end': 663.578, 'text': "We're using this AJAX Google APIs.", 'start': 661.376, 'duration': 2.202}, {'end': 670.685, 'text': "Now, you could download jQuery and just include it in your files if you want, but we're just going to keep this.", 'start': 663.959, 'duration': 6.726}, {'end': 677.712, 'text': "And then we're just pointing to a JS folder with Bootstrap, again, the minified JavaScript.", 'start': 672.267, 'duration': 5.445}, {'end': 679.794, 'text': "So let's go ahead and save that.", 'start': 678.793, 'duration': 1.001}, {'end': 686.811, 'text': "And if we were to reload, we're not going to see any style changes or anything because Bootstrap isn't being loaded.", 'start': 680.842, 'duration': 5.969}, {'end': 692.039, 'text': "In fact, if I open up my console, it's going to tell us that it's not finding these files.", 'start': 687.212, 'duration': 4.827}, {'end': 694.183, 'text': "So let's go ahead and download Bootstrap.", 'start': 692.58, 'duration': 1.603}], 'summary': 'The transcript discusses optimizing css and js files by minifying, using bootstrap, and troubleshooting file loading.', 'duration': 71.151, 'max_score': 623.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8623032.jpg'}], 'start': 459.131, 'title': 'Bootstrap 4 features and setup', 'summary': 'Discusses the features of bootstrap 4, including its current status and availability, and covers setting up bootstrap by downloading and including the minified css and javascript files, while also explaining the concept of minification and using google cdn for jquery.', 'chapters': [{'end': 602.371, 'start': 459.131, 'title': 'Bootstrap 4 features and getting started', 'summary': 'Discusses the features of bootstrap 4, including its current status, availability, and how to get started, while highlighting the key points of using compiled css and javascript, cdns, and the structure of the bootstrap source code.', 'duration': 143.24, 'highlights': ['The chapter highlights that Bootstrap 4 is still in alpha version (alpha 5) and its stability is uncertain, delaying its immediate implementation.', 'It emphasizes the availability of compiled CSS and JavaScript for download, along with options for using SAS and LESS as CSS precompilers.', 'The chapter also mentions the provision of CDNs and the structure of the Bootstrap source code, offering various options for implementation.', 'It briefly touches upon more advanced installation methods using task runners like Grunt, but states that it will not be covered in the current discussion.']}, {'end': 799.353, 'start': 602.391, 'title': 'Setting up bootstrap cheat sheet', 'summary': 'Covers setting up bootstrap by downloading and including the minified css and javascript files, while also explaining the concept of minification and using google cdn for jquery.', 'duration': 196.962, 'highlights': ['Explaining minified CSS and JavaScript The concept of minification is explained, which involves removing white space and comments to reduce file size.', 'Using Google CDN for jQuery The usage of Google CDN for jQuery is mentioned as an alternative to downloading jQuery and including it in the files.', "Downloading and including Bootstrap files The process of downloading Bootstrap files and including the minified CSS and JavaScript is described, resulting in changes to the webpage's appearance."]}], 'duration': 340.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8459131.jpg', 'highlights': ['Bootstrap 4 is still in alpha version (alpha 5) and its stability is uncertain, delaying its immediate implementation.', 'The availability of compiled CSS and JavaScript for download, along with options for using SAS and LESS as CSS precompilers.', 'The provision of CDNs and the structure of the Bootstrap source code, offering various options for implementation.', 'Explaining minified CSS and JavaScript The concept of minification is explained, which involves removing white space and comments to reduce file size.', 'Using Google CDN for jQuery The usage of Google CDN for jQuery is mentioned as an alternative to downloading jQuery and including it in the files.', "Downloading and including Bootstrap files The process of downloading Bootstrap files and including the minified CSS and JavaScript is described, resulting in changes to the webpage's appearance."]}, {'end': 1678.015, 'segs': [{'end': 824.418, 'src': 'embed', 'start': 799.353, 'weight': 0, 'content': [{'end': 807.901, 'text': "alright. so let's go back to the documentation and if we continue on the get started and we go to examples,", 'start': 799.353, 'duration': 8.548}, {'end': 813.907, 'text': "you'll see that there's actually a bunch of premade templates that you can use the starter template with the navbar,", 'start': 807.901, 'duration': 6.006}, {'end': 818.192, 'text': 'this one has the jumbotron and some button examples, the grid system.', 'start': 813.907, 'duration': 4.285}, {'end': 824.418, 'text': 'If we go down here, you have one that implements the carousel, which is a JavaScript widget.', 'start': 819.673, 'duration': 4.745}], 'summary': 'Documentation includes premade templates with navbar, jumbotron, buttons, and carousel widget.', 'duration': 25.065, 'max_score': 799.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8799353.jpg'}, {'end': 887.209, 'src': 'embed', 'start': 861.171, 'weight': 1, 'content': [{'end': 870.958, 'text': "Typography this is actually what we're going to start with just basic Heading classes things like that paragraph classes Let's see tables.", 'start': 861.171, 'duration': 9.787}, {'end': 873.279, 'text': 'Okay, See the different tables.', 'start': 870.978, 'duration': 2.301}, {'end': 877.582, 'text': 'you can style them with striped and bordered Forms.', 'start': 873.279, 'duration': 4.303}, {'end': 880.524, 'text': 'okay, so forms look pretty nice.', 'start': 877.582, 'duration': 2.942}, {'end': 884.987, 'text': 'inline forms buttons different colors and sizes.', 'start': 880.524, 'duration': 4.463}, {'end': 887.209, 'text': "Let's see images.", 'start': 884.987, 'duration': 2.222}], 'summary': 'Introduction to basic typography, tables, forms, and images.', 'duration': 26.038, 'max_score': 861.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8861171.jpg'}, {'end': 1018.823, 'src': 'embed', 'start': 992.814, 'weight': 2, 'content': [{'end': 997.356, 'text': "So if we go ahead and save that, now you'll see that it just gets pushed over in the middle here.", 'start': 992.814, 'duration': 4.542}, {'end': 1001.238, 'text': "And it's set to be responsive.", 'start': 999.497, 'duration': 1.741}, {'end': 1005.98, 'text': 'You can see that changes as you make the browser bigger and smaller.', 'start': 1001.278, 'duration': 4.702}, {'end': 1008.561, 'text': 'So container is a really important class.', 'start': 1006.54, 'duration': 2.021}, {'end': 1016.68, 'text': 'Alright, so now what I want to do is look at headings and paragraphs and things we can do to style those.', 'start': 1009.71, 'duration': 6.97}, {'end': 1018.823, 'text': "Alright, let's see.", 'start': 1017.321, 'duration': 1.502}], 'summary': 'Demonstrating responsive design with container class and styling headings and paragraphs.', 'duration': 26.009, 'max_score': 992.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8992814.jpg'}, {'end': 1197.53, 'src': 'embed', 'start': 1162.348, 'weight': 4, 'content': [{'end': 1165.509, 'text': 'If we want to cross out some text, we can do that.', 'start': 1162.348, 'duration': 3.161}, {'end': 1167.97, 'text': 'We can do that with the Del tag.', 'start': 1166.15, 'duration': 1.82}, {'end': 1175.712, 'text': 'Okay, so now you can see that this text is now crossed out.', 'start': 1167.99, 'duration': 7.722}, {'end': 1178.593, 'text': "Let's see what else we can do.", 'start': 1177.253, 'duration': 1.34}, {'end': 1180.774, 'text': 'We can obviously do underlines.', 'start': 1178.733, 'duration': 2.041}, {'end': 1191.146, 'text': "Some of this stuff isn't, you know, unique to bootstrap, but it does format it nice and neatly bold.", 'start': 1181.874, 'duration': 9.272}, {'end': 1193.107, 'text': 'obviously you can do strong and all that.', 'start': 1191.146, 'duration': 1.961}, {'end': 1197.53, 'text': "so nice text formatting, let's see.", 'start': 1193.107, 'duration': 4.423}], 'summary': 'Demonstrates text formatting options like crossing out with del tag, underlines, bold, and strong.', 'duration': 35.182, 'max_score': 1162.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy81162348.jpg'}, {'end': 1271.795, 'src': 'embed', 'start': 1240.313, 'weight': 3, 'content': [{'end': 1243.895, 'text': 'so for alignment we have different classes we can use.', 'start': 1240.313, 'duration': 3.582}, {'end': 1249.86, 'text': "what I'm gonna do is paste in just some very short paragraphs.", 'start': 1243.895, 'duration': 5.965}, {'end': 1251.221, 'text': "okay, so we'll save that.", 'start': 1249.86, 'duration': 1.361}, {'end': 1255.143, 'text': "and obviously these aren't aligned yet because we haven't added any classes.", 'start': 1251.221, 'duration': 3.922}, {'end': 1261.308, 'text': "but let's say we want to align to the left, we can use a class called text left.", 'start': 1255.143, 'duration': 6.165}, {'end': 1271.795, 'text': 'okay, so if I save that, Well, it is to the left.', 'start': 1261.308, 'duration': 10.487}], 'summary': 'Demonstrating alignment using classes, text aligned to the left.', 'duration': 31.482, 'max_score': 1240.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy81240313.jpg'}, {'end': 1545.929, 'src': 'heatmap', 'start': 1493.55, 'weight': 1, 'content': [{'end': 1498.393, 'text': "I'm going to do a little bit of copying and pasting just to speed things up a little bit.", 'start': 1493.55, 'duration': 4.843}, {'end': 1505.197, 'text': 'So we have this wrapped in a footer tag and we have the name wrapped in a site tag with the title.', 'start': 1499.014, 'duration': 6.183}, {'end': 1508.96, 'text': "So if we save that, you'll see that that's formatted nicely.", 'start': 1506.038, 'duration': 2.922}, {'end': 1516.845, 'text': 'Now if we want to reverse this and put this on this side, we can just use the class blockquote-reverse.', 'start': 1509.679, 'duration': 7.166}, {'end': 1520.008, 'text': "And now you'll notice that it's reversed.", 'start': 1518.227, 'duration': 1.781}, {'end': 1521.329, 'text': 'The text is aligned different.', 'start': 1520.048, 'duration': 1.281}, {'end': 1522.671, 'text': 'We have the bar on that side.', 'start': 1521.389, 'duration': 1.282}, {'end': 1524.792, 'text': "Alright, so that's a blockquote.", 'start': 1522.691, 'duration': 2.101}, {'end': 1529.136, 'text': "Okay, next thing we're going to look at is lists.", 'start': 1524.812, 'duration': 4.324}, {'end': 1536.729, 'text': 'Now Bootstrap has a component called a list group.', 'start': 1533.861, 'duration': 2.868}, {'end': 1538.294, 'text': "We're not going to look at that just yet.", 'start': 1536.789, 'duration': 1.505}, {'end': 1540.299, 'text': 'This is just regular lists.', 'start': 1538.454, 'duration': 1.845}, {'end': 1545.929, 'text': "So let's first look at what just a standard list looks like with no classes.", 'start': 1541.647, 'duration': 4.282}], 'summary': 'Transcript covers copying, pasting, formatting, reversing, and regular lists with bootstrap.', 'duration': 52.379, 'max_score': 1493.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy81493550.jpg'}], 'start': 799.353, 'title': 'Web development documentation and bootstrap styling', 'summary': 'Covers exploring web development documentation with pre-made templates, grid system, typography, forms, images, components, and javascript widgets. it also explains bootstrap styling and alignment using classes like container, page header, text alignment, inline text elements, transformation classes, block quotes, lists, and code formatting.', 'chapters': [{'end': 959.117, 'start': 799.353, 'title': 'Exploring documentation for web development', 'summary': 'Explains the various pre-made templates, grid system, typography, forms, images, components, and javascript widgets available in the documentation for web development, emphasizing the need to start from scratch and explore different coding options.', 'duration': 159.764, 'highlights': ['The documentation provides pre-made templates, including starter templates with navbar, jumbotron, button examples, grid system, and carousel implementation. Emphasizes the availability of pre-made templates for quick development.', 'The documentation also covers typography, tables, forms, images, components, and JavaScript widgets, offering various classes and functionalities. Highlights the comprehensive coverage of different components and functionalities in the documentation.', 'The chapter stresses the importance of starting from scratch and custom coding instead of using the pre-made templates. Emphasizes the need to start fresh and explore custom coding options.', 'The documentation includes CSS and JavaScript links, providing comprehensive code examples and demos for modal and other functionalities. Emphasizes the availability of code examples and demos for different functionalities in the documentation.']}, {'end': 1678.015, 'start': 959.917, 'title': 'Bootstrap: styling and alignment', 'summary': 'Covers the usage of bootstrap classes such as container, page header, and text alignment to style and format content, including examples of inline text elements and transformation classes, while also demonstrating the use of block quotes, lists, and code formatting.', 'duration': 718.098, 'highlights': ["The chapter emphasizes the usage of Bootstrap classes like container and page header to easily style and format content, making it responsive and visually appealing. Bootstrap's container class simplifies content alignment and responsiveness.", 'It explains the usage of various text alignment classes in Bootstrap like text left, text center, text right, text justify, and text-norap for aligning and formatting text as per the requirement. Demonstrates the application of different text alignment classes in Bootstrap.', 'The chapter provides examples of inline text elements like mark for highlighting text, Del for striking through text, and usage of transformation classes like text-lowercase, text-uppercase, and text-capitalize for text formatting. Illustrates the usage of inline text elements and transformation classes for text formatting.', 'It demonstrates the styling of block quotes using the blockquote class and the addition of a footer to the block quote, along with the use of blockquote-reverse class for reversing the alignment of the block quote. Shows the application of blockquote classes for styling quotes and changing alignment.', 'The chapter also showcases the use of Bootstrap classes for lists, including list-unstyled to remove default list styling and list-inline to create inline lists. Demonstrates the application of list classes in Bootstrap for styling and formatting lists.']}], 'duration': 878.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy8799353.jpg', 'highlights': ['The documentation provides pre-made templates, including starter templates with navbar, jumbotron, button examples, grid system, and carousel implementation. Emphasizes the availability of pre-made templates for quick development.', 'The documentation also covers typography, tables, forms, images, components, and JavaScript widgets, offering various classes and functionalities. Highlights the comprehensive coverage of different components and functionalities in the documentation.', "The chapter emphasizes the usage of Bootstrap classes like container and page header to easily style and format content, making it responsive and visually appealing. Bootstrap's container class simplifies content alignment and responsiveness.", 'It explains the usage of various text alignment classes in Bootstrap like text left, text center, text right, text justify, and text-norap for aligning and formatting text as per the requirement. Demonstrates the application of different text alignment classes in Bootstrap.', 'The chapter provides examples of inline text elements like mark for highlighting text, Del for striking through text, and usage of transformation classes like text-lowercase, text-uppercase, and text-capitalize for text formatting. Illustrates the usage of inline text elements and transformation classes for text formatting.']}, {'end': 2150.24, 'segs': [{'end': 1705.822, 'src': 'embed', 'start': 1678.435, 'weight': 0, 'content': [{'end': 1681.856, 'text': 'If you want to tell somebody which keys they have to press or something like that.', 'start': 1678.435, 'duration': 3.421}, {'end': 1690.71, 'text': "All right, so now what we're going to do is put in another HR here, and we're going to take a look at contextual classes.", 'start': 1683.584, 'duration': 7.126}, {'end': 1696.975, 'text': 'Now, Bootstrap has a set of contextual classes to use for different colors and styles.', 'start': 1690.81, 'duration': 6.165}, {'end': 1700.638, 'text': 'For instance, primary gives you a blue color.', 'start': 1697.475, 'duration': 3.163}, {'end': 1702.559, 'text': 'Success gives you a green color.', 'start': 1700.738, 'duration': 1.821}, {'end': 1705.822, 'text': 'Info, I believe, is light blue.', 'start': 1703.841, 'duration': 1.981}], 'summary': 'Introduces bootstrap contextual classes for different colors and styles.', 'duration': 27.387, 'max_score': 1678.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy81678435.jpg'}, {'end': 2056.141, 'src': 'embed', 'start': 2017.532, 'weight': 2, 'content': [{'end': 2021.414, 'text': 'Okay, we can give it the same class.', 'start': 2017.532, 'duration': 3.882}, {'end': 2028.338, 'text': 'And this would have a value as well.', 'start': 2025.897, 'duration': 2.441}, {'end': 2031.966, 'text': 'So this would be a submit.', 'start': 2029.764, 'duration': 2.202}, {'end': 2033.787, 'text': 'Save that.', 'start': 2033.126, 'duration': 0.661}, {'end': 2040.411, 'text': "And now you can see that each one is formatted the same way, even though it's a button, a link, and an input.", 'start': 2035.128, 'duration': 5.283}, {'end': 2047.076, 'text': "Okay, so now let's look at the different contextual styles of the buttons, just like we have with the text.", 'start': 2040.431, 'duration': 6.645}, {'end': 2056.141, 'text': "So we'll go right here and say contextual buttons.", 'start': 2048.176, 'duration': 7.965}], 'summary': 'Styling buttons consistently across different types of elements is demonstrated in the transcript.', 'duration': 38.609, 'max_score': 2017.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82017532.jpg'}, {'end': 2124.488, 'src': 'embed', 'start': 2093.67, 'weight': 1, 'content': [{'end': 2098.511, 'text': "Is that a word, Hiroshous? Okay, so after primary, we'll do success.", 'start': 2093.67, 'duration': 4.841}, {'end': 2105.814, 'text': "Okay, and then we'll do info.", 'start': 2098.531, 'duration': 7.283}, {'end': 2113.821, 'text': "Obviously different situations you're going to want to use different colors and context.", 'start': 2108.977, 'duration': 4.844}, {'end': 2116.403, 'text': 'We have warning.', 'start': 2115.582, 'duration': 0.821}, {'end': 2124.488, 'text': 'So an example would be the success is a green one.', 'start': 2119.965, 'duration': 4.523}], 'summary': 'Discussion on different color codes for various situations like success, info, and warning.', 'duration': 30.818, 'max_score': 2093.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82093670.jpg'}], 'start': 1678.435, 'title': 'Using contextual classes and styling in bootstrap and html', 'summary': 'Covers the usage of contextual classes in bootstrap to apply different colors and styles, such as primary, success, and info, and discusses styling text and buttons in html, with examples like using success for a post created message and danger for delete actions.', 'chapters': [{'end': 1773.541, 'start': 1678.435, 'title': 'Bootstrap contextual color classes', 'summary': 'Demonstrates the usage of contextual classes in bootstrap to apply different colors and styles, such as primary (blue), success (green), and info (light blue) to various elements like paragraphs, alerts, and panel headings.', 'duration': 95.106, 'highlights': ['Bootstrap provides contextual classes for different colors and styles, such as primary (blue), success (green), and info (light blue), which can be applied to various elements.', 'These contextual classes can be used on paragraphs, alerts, panel headings, and other elements to apply specific colors and styles.', 'The usage of contextual classes in Bootstrap allows for easy application of predefined color and style schemes to different elements.']}, {'end': 2150.24, 'start': 1773.541, 'title': 'Styling text and buttons in html', 'summary': 'Discusses styling text and buttons in html, covering different contextual colors for text and buttons, and providing examples of use cases for each color, such as success for a post created message and danger for delete actions.', 'duration': 376.699, 'highlights': ["The chapter discusses different contextual colors for text and buttons, such as success for a green color and danger for a red color, providing examples of use cases for each color. The chapter explains how different contextual colors can be used for text and buttons, such as using success for positive messages like 'post created' and using danger for actions with potential consequences, like delete operations.", 'The chapter demonstrates formatting links as buttons, buttons with different contextual styles, and input tags with the same formatting. It explains the process of formatting links as buttons, showcasing buttons with different contextual styles like primary, success, info, and warning, and also illustrates formatting input tags with the same styling as buttons.', 'The chapter covers the process of adding padding to elements and demonstrates how background colors can be applied to text and buttons, providing a comprehensive overview of styling options in HTML. It provides guidance on adding padding to elements to improve visual presentation and showcases the application of background colors to text and buttons, offering a comprehensive understanding of styling options available in HTML.']}], 'duration': 471.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy81678435.jpg', 'highlights': ['Bootstrap provides contextual classes for different colors and styles, such as primary (blue), success (green), and info (light blue), which can be applied to various elements.', 'The chapter discusses different contextual colors for text and buttons, such as success for a green color and danger for a red color, providing examples of use cases for each color.', 'The chapter demonstrates formatting links as buttons, buttons with different contextual styles, and input tags with the same formatting.']}, {'end': 2676.338, 'segs': [{'end': 2183.147, 'src': 'embed', 'start': 2150.26, 'weight': 0, 'content': [{'end': 2153.381, 'text': "Okay, so let's take a look at these.", 'start': 2150.26, 'duration': 3.121}, {'end': 2157.742, 'text': "And there's our contextual buttons.", 'start': 2155.441, 'duration': 2.301}, {'end': 2163.523, 'text': "You can also format a button as a link if you don't want the background and all that.", 'start': 2159.502, 'duration': 4.021}, {'end': 2173.182, 'text': 'So if we were to say btn-link and say link, save that.', 'start': 2165.057, 'duration': 8.125}, {'end': 2175.863, 'text': 'Now you can see the button is just like a link.', 'start': 2174.042, 'duration': 1.821}, {'end': 2177.224, 'text': "There's no border or anything.", 'start': 2175.883, 'duration': 1.341}, {'end': 2180.346, 'text': 'Now we also have different sizes for the buttons.', 'start': 2178.144, 'duration': 2.202}, {'end': 2183.147, 'text': "So let's say button sizes.", 'start': 2181.606, 'duration': 1.541}], 'summary': 'Demonstrated formatting buttons as contextual buttons and links, showcasing different sizes.', 'duration': 32.887, 'max_score': 2150.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82150260.jpg'}, {'end': 2278.402, 'src': 'embed', 'start': 2252.634, 'weight': 1, 'content': [{'end': 2258.457, 'text': 'For instance, if we want the small one to be blue, we can do button primary, and now we have a small blue one.', 'start': 2252.634, 'duration': 5.823}, {'end': 2263.179, 'text': 'All right, we also can add a disabled attribute.', 'start': 2258.477, 'duration': 4.702}, {'end': 2266.041, 'text': "So let's say this little one here, we want that to be disabled.", 'start': 2263.239, 'duration': 2.802}, {'end': 2272.498, 'text': 'We can say disabled equals Disabled.', 'start': 2266.821, 'duration': 5.677}, {'end': 2276.321, 'text': "And now if I hover over it, you'll see the little X.", 'start': 2273.579, 'duration': 2.742}, {'end': 2277.521, 'text': "I can't do anything with it.", 'start': 2276.321, 'duration': 1.2}, {'end': 2278.402, 'text': "It's disabled.", 'start': 2277.601, 'duration': 0.801}], 'summary': 'Demoed how to create a small blue button with disabled attribute.', 'duration': 25.768, 'max_score': 2252.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82252634.jpg'}, {'end': 2594.484, 'src': 'embed', 'start': 2544.708, 'weight': 2, 'content': [{'end': 2545.449, 'text': 'Paste that in.', 'start': 2544.708, 'duration': 0.741}, {'end': 2547.631, 'text': 'We just have a button with the type of submit.', 'start': 2545.469, 'duration': 2.162}, {'end': 2550.013, 'text': 'Set it to the button default class.', 'start': 2548.151, 'duration': 1.862}, {'end': 2551.966, 'text': 'And there we go.', 'start': 2551.306, 'duration': 0.66}, {'end': 2554.988, 'text': "So that's a very simple form using Twitter Bootstrap.", 'start': 2552.026, 'duration': 2.962}, {'end': 2557.87, 'text': 'Now we also have inline forms.', 'start': 2555.749, 'duration': 2.121}, {'end': 2563.753, 'text': "What I'm going to do is just copy and paste this in in the same container.", 'start': 2558.63, 'duration': 5.123}, {'end': 2565.554, 'text': "Let's just put in HR here.", 'start': 2563.773, 'duration': 1.781}, {'end': 2567.836, 'text': "Okay, we'll paste that in.", 'start': 2566.795, 'duration': 1.041}, {'end': 2570.659, 'text': 'Now we have form with the class of form inline.', 'start': 2567.896, 'duration': 2.763}, {'end': 2572.502, 'text': 'Same thing we have our form groups.', 'start': 2570.74, 'duration': 1.762}, {'end': 2574.384, 'text': "Okay, it's an email.", 'start': 2572.522, 'duration': 1.862}, {'end': 2580.09, 'text': 'This one is a password and then we have a checkbox with remember me and then a button.', 'start': 2574.984, 'duration': 5.106}, {'end': 2583.974, 'text': 'So what makes it inline basically is this class right here.', 'start': 2580.811, 'duration': 3.163}, {'end': 2585.076, 'text': "So let's save that.", 'start': 2584.055, 'duration': 1.021}, {'end': 2590.881, 'text': "and let's see, maybe this is too small to be in.", 'start': 2586.978, 'duration': 3.903}, {'end': 2591.862, 'text': 'yeah, there we go.', 'start': 2590.881, 'duration': 0.981}, {'end': 2594.484, 'text': 'so when you get to a certain point it stops being in line.', 'start': 2591.862, 'duration': 2.622}], 'summary': 'Demonstrating simple and inline forms using twitter bootstrap.', 'duration': 49.776, 'max_score': 2544.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82544708.jpg'}, {'end': 2676.338, 'src': 'embed', 'start': 2629.643, 'weight': 4, 'content': [{'end': 2636.046, 'text': 'did I do that anywhere else?', 'start': 2629.643, 'duration': 6.403}, {'end': 2639.208, 'text': 'no, alright, you guys probably caught that a while ago.', 'start': 2636.046, 'duration': 3.162}, {'end': 2645.376, 'text': "Okay, so let's see.", 'start': 2644.215, 'duration': 1.161}, {'end': 2646.737, 'text': 'Form, that ends there.', 'start': 2645.496, 'duration': 1.241}, {'end': 2648.078, 'text': 'Container ends here.', 'start': 2647.017, 'duration': 1.061}, {'end': 2649.699, 'text': 'Let me just make sure that matches up.', 'start': 2648.098, 'duration': 1.601}, {'end': 2652.741, 'text': "Yep So we're going to create a new container.", 'start': 2649.959, 'duration': 2.782}, {'end': 2673.216, 'text': "Okay All right, so for tables, I'm just going to paste in just a standard table.", 'start': 2652.761, 'duration': 20.455}, {'end': 2676.338, 'text': "Okay, we'll paste that in.", 'start': 2675.037, 'duration': 1.301}], 'summary': 'Reviewing and updating code for a new container and standard table.', 'duration': 46.695, 'max_score': 2629.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82629643.jpg'}], 'start': 2150.26, 'title': 'Styling buttons and forms in bootstrap', 'summary': 'Demonstrates how to style buttons with different sizes and contexts, and how to create forms including various fields and an inline form using twitter bootstrap.', 'chapters': [{'end': 2278.402, 'start': 2150.26, 'title': 'Styling buttons and button sizes', 'summary': 'Demonstrates how to style buttons by formatting them as links and adjusting their sizes, including large, regular, small, and extra small, and also showcases the ability to assign different contexts and add a disabled attribute to buttons.', 'duration': 128.142, 'highlights': ['The chapter demonstrates how to style buttons by formatting them as links and adjusting their sizes, including large, regular, small, and extra small. The chapter illustrates the process of formatting buttons as links and adjusting their sizes to include large, regular, small, and extra small.', 'The chapter showcases the ability to assign different contexts and add a disabled attribute to buttons. The chapter highlights the feature of assigning different contexts and adding a disabled attribute to buttons, providing versatility in button customization.']}, {'end': 2676.338, 'start': 2279.663, 'title': 'Forms and tables in bootstrap', 'summary': 'Covers creating a simple form using twitter bootstrap, including fields for name, email, message, select list, file upload, checkbox, and submit button, along with an inline form, and then moves on to tables.', 'duration': 396.675, 'highlights': ['Creating a simple form using Twitter Bootstrap with fields for name, email, message, select list, file upload, checkbox, and submit button. The tutorial covers creating a simple form using Twitter Bootstrap, including fields for name, email, message, select list, file upload, checkbox, and submit button, along with an inline form.', 'Including an inline form with fields for email, password, checkbox, and a button, demonstrating the behavior of inline forms. The tutorial demonstrates creating an inline form with fields for email, password, checkbox, and a button, and explains the behavior of inline forms.', 'Moving on to tables and pasting in a standard table to cover the topic. The chapter moves on to tables and covers the topic by pasting in a standard table.']}], 'duration': 526.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82150260.jpg', 'highlights': ['The chapter demonstrates how to style buttons by formatting them as links and adjusting their sizes, including large, regular, small, and extra small.', 'The chapter showcases the ability to assign different contexts and add a disabled attribute to buttons, providing versatility in button customization.', 'Creating a simple form using Twitter Bootstrap with fields for name, email, message, select list, file upload, checkbox, and submit button.', 'Including an inline form with fields for email, password, checkbox, and a button, demonstrating the behavior of inline forms.', 'Moving on to tables and pasting in a standard table to cover the topic.']}, {'end': 2983.328, 'segs': [{'end': 2705.891, 'src': 'embed', 'start': 2676.738, 'weight': 1, 'content': [{'end': 2679.56, 'text': "It's just a table with first name, last name, and age.", 'start': 2676.738, 'duration': 2.822}, {'end': 2681.001, 'text': 'Save it.', 'start': 2680.48, 'duration': 0.521}, {'end': 2685.464, 'text': "And that's what it looks like by default, which is pretty ugly.", 'start': 2682.682, 'duration': 2.782}, {'end': 2689.146, 'text': "Okay, I'm just going to put an HR right here, separate it.", 'start': 2685.484, 'duration': 3.662}, {'end': 2699.81, 'text': "So that's pretty ugly and we can fix that very easily if we go and we add class to the table tag of table and save it.", 'start': 2690.988, 'duration': 8.822}, {'end': 2701.13, 'text': 'Look at that.', 'start': 2700.61, 'duration': 0.52}, {'end': 2703.631, 'text': 'Look how drastic that changes.', 'start': 2701.23, 'duration': 2.401}, {'end': 2705.891, 'text': 'It actually looks nice and clean.', 'start': 2704.391, 'duration': 1.5}], 'summary': 'A table was improved by adding a class, resulting in a drastic and noticeable change in appearance.', 'duration': 29.153, 'max_score': 2676.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82676738.jpg'}, {'end': 2797.766, 'src': 'embed', 'start': 2731.855, 'weight': 0, 'content': [{'end': 2738.478, 'text': 'What else? We can make it so that when we hover over a table row here, it will highlight.', 'start': 2731.855, 'duration': 6.623}, {'end': 2741.6, 'text': 'So we can do that with table dash hover.', 'start': 2739.179, 'duration': 2.421}, {'end': 2746.085, 'text': 'Notice when I hover over it, it changes.', 'start': 2744.322, 'duration': 1.763}, {'end': 2749.489, 'text': 'And we can also do table condensed.', 'start': 2747.566, 'duration': 1.923}, {'end': 2756.578, 'text': 'And that will just make it kind of smaller.', 'start': 2753.995, 'duration': 2.583}, {'end': 2758.62, 'text': 'You can see it condensed the padding a little bit.', 'start': 2756.638, 'duration': 1.982}, {'end': 2763.186, 'text': 'And we can also use contextual classes here.', 'start': 2759.904, 'duration': 3.282}, {'end': 2767.709, 'text': "So for instance, let's say Jill, we want her row to be red.", 'start': 2763.366, 'duration': 4.343}, {'end': 2773.132, 'text': "We could say class, make sure it's on the TR, and we could say danger.", 'start': 2767.969, 'duration': 5.163}, {'end': 2776.114, 'text': 'Okay, now her row is now red.', 'start': 2773.152, 'duration': 2.962}, {'end': 2786.06, 'text': 'If we wanted John to be success or to be green, we could say success, and that turns his row green.', 'start': 2776.434, 'duration': 9.626}, {'end': 2792.824, 'text': 'Okay, so very easy, very minimal code to make this look pretty good.', 'start': 2787.722, 'duration': 5.102}, {'end': 2797.766, 'text': "All right, so moving along, now we're going to go to list groups.", 'start': 2792.844, 'duration': 4.922}], 'summary': 'Demonstrating table row highlighting, condensing, and contextual classes with minimal code for a visually appealing result.', 'duration': 65.911, 'max_score': 2731.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82731855.jpg'}, {'end': 2880.009, 'src': 'embed', 'start': 2849.149, 'weight': 3, 'content': [{'end': 2852.369, 'text': "so I'm gonna paste in just a regular list.", 'start': 2849.149, 'duration': 3.22}, {'end': 2861.791, 'text': 'okay, save that your standard list.', 'start': 2852.369, 'duration': 9.422}, {'end': 2868.892, 'text': "let's turn it into a list group by going to the UL and saying class equals list group.", 'start': 2861.791, 'duration': 7.101}, {'end': 2872.173, 'text': "okay, now, if we just do that, it doesn't really do anything.", 'start': 2868.892, 'duration': 3.281}, {'end': 2874.153, 'text': 'we need to also add classes.', 'start': 2872.173, 'duration': 1.98}, {'end': 2876.847, 'text': 'whoops, Save that.', 'start': 2874.153, 'duration': 2.694}, {'end': 2880.009, 'text': 'We need to also add classes to the list items.', 'start': 2877.547, 'duration': 2.462}], 'summary': "Converting a regular list into a list group by adding 'class=list group' to the ul and adding classes to the list items.", 'duration': 30.86, 'max_score': 2849.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82849149.jpg'}, {'end': 2983.328, 'src': 'embed', 'start': 2912.417, 'weight': 4, 'content': [{'end': 2917.699, 'text': "Okay, so notice we're not using allies, we're using A tags with the list group item.", 'start': 2912.417, 'duration': 5.282}, {'end': 2918.94, 'text': 'Save that.', 'start': 2918.299, 'duration': 0.641}, {'end': 2923.662, 'text': "Okay, whoops, I don't want to put that within the container.", 'start': 2918.96, 'duration': 4.702}, {'end': 2933.49, 'text': 'Okay, and notice that we can hover over them and they have links.', 'start': 2929.787, 'duration': 3.703}, {'end': 2940.074, 'text': "Okay, now if I click on that one, you'll see that that's now active.", 'start': 2934.35, 'duration': 5.724}, {'end': 2942.536, 'text': 'Okay, it adds a class called active.', 'start': 2940.094, 'duration': 2.442}, {'end': 2948.561, 'text': 'If we want an active by default, then we can just go and add in right here.', 'start': 2942.977, 'duration': 5.584}, {'end': 2952.584, 'text': "We'll say active, save it, and now it's active.", 'start': 2948.961, 'duration': 3.623}, {'end': 2960.234, 'text': 'Okay And when you label it active, it gives you the primary context, which is blue.', 'start': 2953.284, 'duration': 6.95}, {'end': 2964.255, 'text': "Now, let's say we want this one to be success or green.", 'start': 2961.034, 'duration': 3.221}, {'end': 2973.637, 'text': 'We could say list group item.', 'start': 2964.815, 'duration': 8.822}, {'end': 2975.038, 'text': "Jesus, I can't type.", 'start': 2973.938, 'duration': 1.1}, {'end': 2981.687, 'text': 'Item-success Okay, that makes it green.', 'start': 2975.518, 'duration': 6.169}, {'end': 2983.328, 'text': 'We can also disable them.', 'start': 2981.987, 'duration': 1.341}], 'summary': 'Demonstrating usage of a tags with list group items to create interactive and styled elements.', 'duration': 70.911, 'max_score': 2912.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82912417.jpg'}], 'start': 2676.738, 'title': 'Table and list styling', 'summary': 'Demonstrates styling tables in html with classes like table, table-striped, table-bordered, table-hover, table-condensed, and contextual classes, and explains how to style lists using bootstrap, including creating list groups and menu items with active and disabled states, and customizing their appearance with context classes.', 'chapters': [{'end': 2849.149, 'start': 2676.738, 'title': 'Table styling in html', 'summary': 'Demonstrates how to style a table in html by adding classes such as table, table-striped, table-bordered, table-hover, table-condensed, and contextual classes to enhance its appearance with minimal code.', 'duration': 172.411, 'highlights': ["The chapter demonstrates how to style a table in HTML by adding classes such as table, table-striped, table-bordered, table-hover, table-condensed, and contextual classes. The chapter provides clear examples of adding classes to style a table, showcasing the impact of each class on the table's appearance.", "Adding the class 'table' to the table tag drastically changes its appearance to look nice and clean. By adding the 'table' class to the table tag, the appearance of the table is drastically improved, demonstrating the effectiveness of using classes for styling.", "Demonstrating the use of contextual classes to specify the color of specific table rows, such as 'danger' for red and 'success' for green. The chapter illustrates the usage of contextual classes to customize the appearance of specific table rows, enabling easy color specification like 'danger' for red and 'success' for green."]}, {'end': 2983.328, 'start': 2849.149, 'title': 'Styling lists with bootstrap', 'summary': 'Explains how to style lists using bootstrap, including creating list groups and menu items with active and disabled states, and customizing their appearance with different context classes.', 'duration': 134.179, 'highlights': ["The chapter demonstrates how to create list groups by adding the 'list group' class to a UL and the 'list group item' class to each list item, resulting in a visually appealing list layout.", "It explains the process of creating menu items using A tags with the 'list group item' class, with the ability to set items as active by adding the 'active' class and customizing their appearance using different context classes like 'success' for a green color.", "Additionally, it showcases the functionality of disabling list items and customizing their appearance by adding context classes like 'success' for a green color, and 'active' for the primary context, which is blue."]}], 'duration': 306.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82676738.jpg', 'highlights': ['The chapter demonstrates how to style a table in HTML by adding classes such as table, table-striped, table-bordered, table-hover, table-condensed, and contextual classes.', "Adding the class 'table' to the table tag drastically changes its appearance to look nice and clean.", "Demonstrating the use of contextual classes to specify the color of specific table rows, such as 'danger' for red and 'success' for green.", "The chapter demonstrates how to create list groups by adding the 'list group' class to a UL and the 'list group item' class to each list item, resulting in a visually appealing list layout.", "It explains the process of creating menu items using A tags with the 'list group item' class, with the ability to set items as active by adding the 'active' class and customizing their appearance using different context classes like 'success' for a green color.", "Additionally, it showcases the functionality of disabling list items and customizing their appearance by adding context classes like 'success' for a green color, and 'active' for the primary context, which is blue."]}, {'end': 3433.811, 'segs': [{'end': 3201.447, 'src': 'embed', 'start': 3118.308, 'weight': 3, 'content': [{'end': 3122.169, 'text': 'so basically we have a div with the class of panel and panel default.', 'start': 3118.308, 'duration': 3.861}, {'end': 3129.851, 'text': 'then we have a panel heading with an h3 that has the class of panel title and then the panel body where all the content goes.', 'start': 3122.169, 'duration': 7.682}, {'end': 3131.211, 'text': "so let's take a look at that.", 'start': 3129.851, 'duration': 1.36}, {'end': 3137.873, 'text': "okay, so there's our panel.", 'start': 3131.211, 'duration': 6.662}, {'end': 3141.454, 'text': 'we can also add a footer to our panel.', 'start': 3137.873, 'duration': 3.581}, {'end': 3153.667, 'text': 'so if we go under the body and say div, class equals panel footer.', 'start': 3141.454, 'duration': 12.213}, {'end': 3162.614, 'text': 'Save it.', 'start': 3162.074, 'duration': 0.54}, {'end': 3164.956, 'text': 'Now you can see it has a footer.', 'start': 3163.615, 'duration': 1.341}, {'end': 3166.417, 'text': 'All right.', 'start': 3164.976, 'duration': 1.441}, {'end': 3173.64, 'text': 'And if we want to change the colors here, we can use the context.', 'start': 3166.937, 'duration': 6.703}, {'end': 3184.664, 'text': "so if we were to say, let's see, instead of panel default, actually no, we probably want to put this on panel heading.", 'start': 3173.64, 'duration': 11.024}, {'end': 3185.644, 'text': 'no, not panel heading.', 'start': 3184.664, 'duration': 0.98}, {'end': 3186.824, 'text': 'right here, panel default.', 'start': 3185.644, 'duration': 1.18}, {'end': 3193.987, 'text': "let's change it to panel primary.", 'start': 3186.824, 'duration': 7.163}, {'end': 3201.447, 'text': 'save that And now you can see that it has.', 'start': 3193.987, 'duration': 7.46}], 'summary': 'Using html, a panel with a footer and color change was demonstrated.', 'duration': 83.139, 'max_score': 3118.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83118308.jpg'}, {'end': 3299.62, 'src': 'embed', 'start': 3230.786, 'weight': 0, 'content': [{'end': 3233.427, 'text': "And we'll just say hello world.", 'start': 3230.786, 'duration': 2.641}, {'end': 3238.47, 'text': 'All right, save that.', 'start': 3237.309, 'duration': 1.161}, {'end': 3247.915, 'text': 'What do we have in trouble with live reload again? Looks like it.', 'start': 3241.191, 'duration': 6.724}, {'end': 3253.126, 'text': "All right, so that's our well.", 'start': 3251.946, 'duration': 1.18}, {'end': 3255.667, 'text': 'You can see it just has some padding with a background.', 'start': 3253.146, 'duration': 2.521}, {'end': 3258.869, 'text': "There's a couple of customizations we can do with wells.", 'start': 3255.687, 'duration': 3.182}, {'end': 3262.43, 'text': "So let's just copy this, paste it in twice.", 'start': 3259.309, 'duration': 3.121}, {'end': 3266.632, 'text': 'This one will do well-lg.', 'start': 3262.45, 'duration': 4.182}, {'end': 3270.053, 'text': 'This one will do well-sm.', 'start': 3267.192, 'duration': 2.861}, {'end': 3271.574, 'text': 'So we can do large and small.', 'start': 3270.073, 'duration': 1.501}, {'end': 3274.495, 'text': "And let's see.", 'start': 3273.915, 'duration': 0.58}, {'end': 3277.516, 'text': 'Oh, we also have to have the class of well, so we need both.', 'start': 3274.595, 'duration': 2.921}, {'end': 3282.188, 'text': "So now you can see there's some more padding.", 'start': 3280.527, 'duration': 1.661}, {'end': 3282.909, 'text': 'This is bigger.', 'start': 3282.208, 'duration': 0.701}, {'end': 3285.09, 'text': "This one has less and it's smaller.", 'start': 3283.229, 'duration': 1.861}, {'end': 3286.911, 'text': 'So those are wells.', 'start': 3286.051, 'duration': 0.86}, {'end': 3289.113, 'text': "Now we're going to look at alerts.", 'start': 3287.732, 'duration': 1.381}, {'end': 3292.315, 'text': "Let's just put HR right there.", 'start': 3289.133, 'duration': 3.182}, {'end': 3295.417, 'text': "And I apologize if I'm moving kind of fast, guys.", 'start': 3292.975, 'duration': 2.442}, {'end': 3299.62, 'text': "It's just that this is a lot of markup, a lot of content to go through.", 'start': 3295.437, 'duration': 4.183}], 'summary': 'Demonstrating customizations for wells and alerts with live reload issues', 'duration': 68.834, 'max_score': 3230.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83230786.jpg'}, {'end': 3384.035, 'src': 'embed', 'start': 3332.091, 'weight': 1, 'content': [{'end': 3338.915, 'text': 'But if we add here alert-success, save that, now we get a green alert.', 'start': 3332.091, 'duration': 6.824}, {'end': 3354.499, 'text': 'we can do the same with info, saying info alerts and just add here alert dash info.', 'start': 3341.127, 'duration': 13.372}, {'end': 3367.75, 'text': "okay, this one will be warning, so we'll do alert dash warning.", 'start': 3354.499, 'duration': 13.251}, {'end': 3374.832, 'text': 'This will be danger.', 'start': 3371.741, 'duration': 3.091}, {'end': 3377.803, 'text': "And I can imagine the amount of comments I'm going to have about my spelling.", 'start': 3374.873, 'duration': 2.93}, {'end': 3384.035, 'text': 'There we go again, alert-danger.', 'start': 3380.794, 'duration': 3.241}], 'summary': 'Demonstrating how to create different colored alerts in the system.', 'duration': 51.944, 'max_score': 3332.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83332091.jpg'}, {'end': 3437.758, 'src': 'embed', 'start': 3410.359, 'weight': 5, 'content': [{'end': 3416.482, 'text': 'And then inside of it, we have a button with the class of close, a data dismiss attribute of alert.', 'start': 3410.359, 'duration': 6.123}, {'end': 3420.964, 'text': "And we're using this ampersand times for the x mark.", 'start': 3417.102, 'duration': 3.862}, {'end': 3424.866, 'text': 'And the alert text will just say, you can close this.', 'start': 3422.165, 'duration': 2.701}, {'end': 3427.848, 'text': 'So now you can see we have this x here.', 'start': 3425.807, 'duration': 2.041}, {'end': 3429.949, 'text': 'If I click that, it goes away.', 'start': 3427.888, 'duration': 2.061}, {'end': 3433.811, 'text': 'And I believe you have to have the JavaScript file linked for it to be able to do that.', 'start': 3430.029, 'duration': 3.782}, {'end': 3437.758, 'text': 'Okay, so next thing, progress bars.', 'start': 3435.256, 'duration': 2.502}], 'summary': 'The transcript discusses creating a close button with a dismiss attribute, using an x mark, and adding alert text, and then moves on to discussing progress bars.', 'duration': 27.399, 'max_score': 3410.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83410359.jpg'}], 'start': 2984.328, 'title': 'Using panels, wells, and alerts in web development', 'summary': 'Covers creating backgrounds and headings with panels and wells, modifying panel colors using context classes, and disabling list group items. it also explores customizing padding and background color for wells, creating different types of alerts, and enabling dismiss functionality for alerts.', 'chapters': [{'end': 3201.447, 'start': 2984.328, 'title': 'Using panels and wells in web development', 'summary': 'Covers using panels and wells to create backgrounds and headings for content, as well as modifying panel colors using context classes. it also briefly touches on list group item disabling.', 'duration': 217.119, 'highlights': ['The chapter covers using panels and wells to create backgrounds and headings for content It demonstrates the use of div with class panel and panel default, along with panel heading and panel body to structure content.', 'Modifying panel colors using context classes It illustrates changing the panel default color to panel primary using context classes.', 'Briefly touches on list group item disabling The transcript briefly mentions attempting to disable a list group item, indicating a minor focus on list groups.']}, {'end': 3433.811, 'start': 3201.447, 'title': 'Styling with wells and alerts', 'summary': "Explores the use of wells and alerts in web development, demonstrating how to customize padding and background color for wells, and how to create different types of alerts including success, info, warning, and danger, with the ability to dismiss alerts by clicking an 'x' button.", 'duration': 232.364, 'highlights': ['The chapter explores the use of wells and alerts in web development The chapter covers the usage of wells and alerts in web development, providing practical examples and demonstrations.', 'Customizing padding and background color for wells The tutorial explains how to customize padding and background color for wells, with examples of different sizes such as large and small wells.', 'Creating different types of alerts including success, info, warning, and danger The tutorial demonstrates how to create different types of alerts, including success, info, warning, and danger alerts, with practical examples of each type.', "Ability to dismiss alerts by clicking an 'X' button The chapter illustrates the functionality of dismissing alerts by adding a close button and the 'alert-dismissible' class to the alert, allowing users to remove the alert by clicking the 'X' button."]}], 'duration': 449.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy82984328.jpg', 'highlights': ['The chapter covers the usage of wells and alerts in web development, providing practical examples and demonstrations.', 'Creating different types of alerts including success, info, warning, and danger alerts, with practical examples of each type.', 'Customizing padding and background color for wells, with examples of different sizes such as large and small wells.', 'Modifying panel colors using context classes, illustrating changing the panel default color to panel primary using context classes.', 'The chapter covers using panels and wells to create backgrounds and headings for content, demonstrating the use of div with class panel and panel default, along with panel heading and panel body to structure content.', "Ability to dismiss alerts by clicking an 'X' button, illustrating the functionality of dismissing alerts by adding a close button and the 'alert-dismissible' class to the alert."]}, {'end': 4007.889, 'segs': [{'end': 3601.913, 'src': 'embed', 'start': 3523.741, 'weight': 0, 'content': [{'end': 3533.864, 'text': 'So for instance, if we want to make it green, we can use the contextual classes and say progress bar success.', 'start': 3523.741, 'duration': 10.123}, {'end': 3536.865, 'text': "Okay, now it's green.", 'start': 3533.885, 'duration': 2.98}, {'end': 3538.386, 'text': 'We can also make it striped.', 'start': 3536.905, 'duration': 1.481}, {'end': 3557.859, 'text': "now notice it's striped and we can even make it animated if we make it active that, and now you can see that it's animated.", 'start': 3547.294, 'duration': 10.565}, {'end': 3561.201, 'text': 'so pretty cool, alright.', 'start': 3557.859, 'duration': 3.342}, {'end': 3563.122, 'text': "so we're getting there, guys.", 'start': 3561.201, 'duration': 1.921}, {'end': 3568.365, 'text': "next thing we're going to look at is badges or labels, and then badges.", 'start': 3563.122, 'duration': 5.243}, {'end': 3579.587, 'text': "so let's go ahead and put Underneath here we'll put a line or an HR, and then I'm just gonna paste some of this stuff in.", 'start': 3568.365, 'duration': 11.222}, {'end': 3581.307, 'text': 'so these are the labels.', 'start': 3579.587, 'duration': 1.72}, {'end': 3592.39, 'text': 'Okay, labels, we have the span Class label and then label default, just like the buttons.', 'start': 3581.307, 'duration': 11.083}, {'end': 3600.833, 'text': "We're using default primary success and Info warning and danger.", 'start': 3592.43, 'duration': 8.403}, {'end': 3601.913, 'text': "So let's save that.", 'start': 3600.833, 'duration': 1.08}], 'summary': 'Demonstration of customizing progress bars and labels with contextual classes and colors.', 'duration': 78.172, 'max_score': 3523.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83523741.jpg'}, {'end': 3683.957, 'src': 'embed', 'start': 3656.333, 'weight': 2, 'content': [{'end': 3660.114, 'text': "We're going to go outside of the container, which ends right here.", 'start': 3656.333, 'duration': 3.781}, {'end': 3661.915, 'text': "And I'm going to paste this in.", 'start': 3660.134, 'duration': 1.781}, {'end': 3663.796, 'text': 'Okay, another container.', 'start': 3661.935, 'duration': 1.861}, {'end': 3666.258, 'text': 'And we have an image with the class of thumbnail.', 'start': 3664.076, 'duration': 2.182}, {'end': 3668.279, 'text': "We're just using a placeholder image here.", 'start': 3666.318, 'duration': 1.961}, {'end': 3673.601, 'text': 'Then we have an image with the class of image rounded, which will give it rounded corners.', 'start': 3669.519, 'duration': 4.082}, {'end': 3677.043, 'text': 'And then image circle, which will actually make the image a circle.', 'start': 3674.121, 'duration': 2.922}, {'end': 3678.824, 'text': "So let's save that.", 'start': 3677.763, 'duration': 1.061}, {'end': 3680.975, 'text': "And that's what we get.", 'start': 3680.115, 'duration': 0.86}, {'end': 3683.957, 'text': 'You can see the different styles of image.', 'start': 3680.995, 'duration': 2.962}], 'summary': 'Demonstration of applying different styles to images within containers.', 'duration': 27.624, 'max_score': 3656.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83656333.jpg'}, {'end': 3745.83, 'src': 'embed', 'start': 3717.811, 'weight': 3, 'content': [{'end': 3720.773, 'text': 'Okay, we have 1, 2, 3, 4, all the way to 12.', 'start': 3717.811, 'duration': 2.962}, {'end': 3726.117, 'text': 'And then you can say how many of these blocks you want to use in each div.', 'start': 3720.773, 'duration': 5.344}, {'end': 3734.903, 'text': 'So for instance, a common one would be to use an 8, you know, 8 columns for your main layout and then 4 for the sidebar.', 'start': 3726.157, 'duration': 8.746}, {'end': 3738.225, 'text': 'And notice that 8 and 4 is going to equal 12 altogether.', 'start': 3735.343, 'duration': 2.882}, {'end': 3741.167, 'text': "All right, so what we'll do is create a row.", 'start': 3738.245, 'duration': 2.922}, {'end': 3743.729, 'text': 'Okay, you want to wrap your grids.', 'start': 3742.167, 'duration': 1.562}, {'end': 3745.83, 'text': 'You want to go by row.', 'start': 3744.669, 'duration': 1.161}], 'summary': 'Discussion about using 12-block grid system for layout, with example of 8 columns for main layout and 4 for sidebar.', 'duration': 28.019, 'max_score': 3717.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83717811.jpg'}, {'end': 3945.92, 'src': 'embed', 'start': 3909.753, 'weight': 4, 'content': [{'end': 3912.695, 'text': 'And we could put line breaks here to separate this a little bit.', 'start': 3909.753, 'duration': 2.942}, {'end': 3921.461, 'text': 'Okay You could even do 12 one column divs.', 'start': 3912.715, 'duration': 8.746}, {'end': 3924.964, 'text': "So that's a lot of code, so let me just grab that.", 'start': 3921.922, 'duration': 3.042}, {'end': 3930.047, 'text': "Okay, so we'll go right here.", 'start': 3924.984, 'duration': 5.063}, {'end': 3940.54, 'text': 'so basically we have a row with 12 of these column D1s and look at that alright.', 'start': 3932.458, 'duration': 8.082}, {'end': 3945.92, 'text': 'now, as far as the MD, that stands for medium screen size.', 'start': 3940.54, 'duration': 5.38}], 'summary': 'Creating a row with 12 column divs for medium screen size.', 'duration': 36.167, 'max_score': 3909.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83909753.jpg'}], 'start': 3435.256, 'title': 'Creating ui elements and bootstrap grid system', 'summary': "Covers creating progress bars, badges, and images with different styles, adding labels and badges, and formatting images with classes such as thumbnail, rounded, and circle. it also introduces the bootstrap grid system, consisting of 12 blocks that can be combined to create different layouts and explains the use of classes like 'call-md' and 'call-sm' for different screen sizes.", 'chapters': [{'end': 3677.043, 'start': 3435.256, 'title': 'Creating progress bars, badges, and images', 'summary': 'Covers creating progress bars with different styles, adding labels and badges, and formatting images with classes such as thumbnail, rounded, and circle.', 'duration': 241.787, 'highlights': ['Creating progress bars with different styles The tutorial demonstrates creating progress bars with contextual classes like success, striped, and animated, providing an engaging user interface.', 'Adding labels and badges The tutorial explains the use of labels with variations like default, primary, success, info, warning, and danger, along with badges for displaying notifications and message counts.', 'Formatting images with classes The tutorial showcases formatting images using classes like thumbnail, rounded, and circle, offering options for visually enhancing images within a web page.']}, {'end': 4007.889, 'start': 3677.763, 'title': 'Bootstrap grid system', 'summary': "Introduces the bootstrap grid system, which consists of 12 blocks that can be combined to create different layouts, such as 8-4 for main layout and sidebar, or 4-3 for four boxes lined up. it also explains the use of classes like 'call-md' and 'call-sm' for different screen sizes.", 'duration': 330.126, 'highlights': ['The grid system consists of 12 blocks that can be combined to create different layouts, such as 8-4 for main layout and sidebar, or 4-3 for four boxes lined up.', "The use of classes like 'call-md' and 'call-sm' for different screen sizes allows for responsive design and layout changes based on screen size.", 'The chapter demonstrates examples of different combinations, such as 2-6 column divs and 12 one column divs, to showcase the versatility of the grid system.']}], 'duration': 572.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy83435256.jpg', 'highlights': ['Creating progress bars with contextual classes like success, striped, and animated.', 'Adding labels with variations like default, primary, success, info, warning, and danger, along with badges for displaying notifications and message counts.', 'Formatting images using classes like thumbnail, rounded, and circle, offering options for visually enhancing images within a web page.', 'The grid system consists of 12 blocks that can be combined to create different layouts, such as 8-4 for main layout and sidebar, or 4-3 for four boxes lined up.', "The use of classes like 'call-md' and 'call-sm' for different screen sizes allows for responsive design and layout changes based on screen size.", 'Demonstrates examples of different combinations, such as 2-6 column divs and 12 one column divs, to showcase the versatility of the grid system.']}, {'end': 4405.893, 'segs': [{'end': 4191.24, 'src': 'embed', 'start': 4071.022, 'weight': 0, 'content': [{'end': 4071.963, 'text': 'This has a lot in it.', 'start': 4071.022, 'duration': 0.941}, {'end': 4075.425, 'text': 'It has our branding, our logo, some links.', 'start': 4071.983, 'duration': 3.442}, {'end': 4076.565, 'text': 'It has a drop-down.', 'start': 4075.465, 'duration': 1.1}, {'end': 4081.768, 'text': 'And just to let you know, you have to include the bootstrap JavaScript for this to work.', 'start': 4077.265, 'duration': 4.503}, {'end': 4089.83, 'text': "Okay, there's also a search form which we don't need, but you can have, and then some links over here with another drop-down,", 'start': 4082.648, 'duration': 7.182}, {'end': 4092.75, 'text': "And if we look at the code here, I'm gonna get rid of some stuff.", 'start': 4089.83, 'duration': 2.92}, {'end': 4098.93, 'text': "I don't want that form So from here this form to the end right here.", 'start': 4093.29, 'duration': 5.64}, {'end': 4100.112, 'text': "Let's get rid of that.", 'start': 4099.211, 'duration': 0.901}, {'end': 4105.292, 'text': "Okay, save it Now, that's gone.", 'start': 4100.112, 'duration': 5.18}, {'end': 4108.393, 'text': 'We can also get rid of the links over here.', 'start': 4105.292, 'duration': 3.101}, {'end': 4114.912, 'text': "that's this ul with the class of navbar right, and Okay, get rid of that.", 'start': 4108.393, 'duration': 6.519}, {'end': 4116.915, 'text': 'Save it.', 'start': 4116.474, 'duration': 0.441}, {'end': 4117.975, 'text': "Now that's gone.", 'start': 4117.194, 'duration': 0.781}, {'end': 4127.805, 'text': "All right, now notice that if I make this bigger, the navbar content is way over here, and I don't want that.", 'start': 4117.996, 'duration': 9.809}, {'end': 4129.366, 'text': 'I want that to be in a container.', 'start': 4127.825, 'duration': 1.541}, {'end': 4137.292, 'text': 'So what we would do in this situation is just see how it has container fluid, change that to just container.', 'start': 4130.006, 'duration': 7.286}, {'end': 4140.036, 'text': "Okay, now it's pushed towards the middle.", 'start': 4137.313, 'duration': 2.723}, {'end': 4150.703, 'text': 'Alright, also, if you want this to be a darker color, all you need to do is change navbar default class to navbar inverse.', 'start': 4141.018, 'duration': 9.685}, {'end': 4153.845, 'text': "Save that, and now it's a dark color.", 'start': 4151.904, 'duration': 1.941}, {'end': 4158.868, 'text': "Okay, and let's just change the brand, the logo right here.", 'start': 4155.067, 'duration': 3.801}, {'end': 4167.115, 'text': "We'll say bootstrap cheat sheet.", 'start': 4159.97, 'duration': 7.145}, {'end': 4170.557, 'text': 'Save that.', 'start': 4169.957, 'duration': 0.6}, {'end': 4173.474, 'text': "All right, so that's the nav bar.", 'start': 4172.014, 'duration': 1.46}, {'end': 4181.917, 'text': 'Next thing, last thing is the Jumbotron, which is, where is it? Basically a showcase area.', 'start': 4174.354, 'duration': 7.563}, {'end': 4187.479, 'text': "We have a big heading, some text, learn more, and usually you'd put an image or something behind it as well.", 'start': 4181.937, 'duration': 5.542}, {'end': 4191.24, 'text': 'All right, so for that, we can just type that in.', 'start': 4188.238, 'duration': 3.002}], 'summary': 'Customizing a webpage using bootstrap; removed form and links, adjusted layout, and changed navbar color and logo.', 'duration': 120.218, 'max_score': 4071.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy84071022.jpg'}, {'end': 4327.255, 'src': 'embed', 'start': 4295.789, 'weight': 7, 'content': [{'end': 4305.471, 'text': 'What I would suggest is just in your own custom style, whether you want to do it up here or have your own style sheet, you could say .navbar.', 'start': 4295.789, 'duration': 9.682}, {'end': 4312.224, 'text': 'margin bottom zero.', 'start': 4307.7, 'duration': 4.524}, {'end': 4316.687, 'text': 'okay, and actually you want to have that after the bootstrap CSS.', 'start': 4312.224, 'duration': 4.463}, {'end': 4323.532, 'text': 'so we want to put that right here, all right, and that gets rid of that.', 'start': 4316.687, 'duration': 6.845}, {'end': 4327.255, 'text': 'and notice that the navbar by default has these rounded corners.', 'start': 4323.532, 'duration': 3.723}], 'summary': 'Customize .navbar by adding margin-bottom: 0 after bootstrap css to remove rounded corners.', 'duration': 31.466, 'max_score': 4295.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy84295789.jpg'}, {'end': 4400.507, 'src': 'embed', 'start': 4355.931, 'weight': 2, 'content': [{'end': 4367.896, 'text': "I probably will make another video for the JavaScript stuff and just about definitely gonna make that CMS admin theme UI that we're gonna build with bootstrap.", 'start': 4355.931, 'duration': 11.965}, {'end': 4371.097, 'text': "alright. so let me know if that's something you guys are interested in.", 'start': 4367.896, 'duration': 3.201}, {'end': 4374.244, 'text': "I'm always open to suggestions.", 'start': 4372.523, 'duration': 1.721}, {'end': 4377.806, 'text': 'If you guys read my comments,', 'start': 4375.064, 'duration': 2.742}, {'end': 4386.911, 'text': 'you can see that I do respond to you guys if you have a suggestion for a project that I like and I think will benefit my subscribers.', 'start': 4377.806, 'duration': 9.105}, {'end': 4394.179, 'text': 'I do have a 12 project course building bootstrap themes.', 'start': 4388.552, 'duration': 5.627}, {'end': 4400.507, 'text': "so that's something that you probably want to check out if you're interested in this kind of thing, and that's it.", 'start': 4394.179, 'duration': 6.328}], 'summary': 'Plans to create a javascript video and cms admin theme ui with bootstrap, and offers a 12-project course for building bootstrap themes.', 'duration': 44.576, 'max_score': 4355.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy84355931.jpg'}], 'start': 4009.029, 'title': 'Using bootstrap for ui development', 'summary': 'Covers adding a navbar and jumbotron, including code snippets, modifications to the navbar, creating a bootstrap jumbotron with a heading, text, and a button, and hints at future tutorials on javascript and cms admin theme ui. it also promotes a 12 project course on building bootstrap themes.', 'chapters': [{'end': 4153.845, 'start': 4009.029, 'title': 'Adding navbar and jumbotron', 'summary': 'Covers adding a navbar and jumbotron, including code snippets and modifications to the navbar like removing elements and changing its appearance.', 'duration': 144.816, 'highlights': ['The navbar includes branding, logo, links, a dropdown, and a search form, which requires bootstrap JavaScript to work.', 'Demonstrating the removal of the search form and links from the navbar.', 'Modifying the navbar to be contained within a container and changing its color to a darker shade.', 'Adding a jumbotron is the next important thing to be shown.']}, {'end': 4405.893, 'start': 4155.067, 'title': 'Bootstrap cheat sheet tutorial', 'summary': 'Covers creating a bootstrap jumbotron with a heading, text, and a button, modifying the navbar margin and border, and hints at future tutorials on javascript and cms admin theme ui, and promotes a 12 project course on building bootstrap themes.', 'duration': 250.826, 'highlights': ['The chapter covers creating a Bootstrap Jumbotron with a heading, text, and a button.', 'Hints at future tutorials on JavaScript and CMS admin theme UI.', 'Promotes a 12 project course on building Bootstrap themes.', 'Provides tips on modifying the navbar margin and border.']}], 'duration': 396.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5GcQtLDGXy8/pics/5GcQtLDGXy84009029.jpg', 'highlights': ['The chapter covers creating a Bootstrap Jumbotron with a heading, text, and a button.', 'The navbar includes branding, logo, links, a dropdown, and a search form, which requires bootstrap JavaScript to work.', 'Hints at future tutorials on JavaScript and CMS admin theme UI.', 'Demonstrating the removal of the search form and links from the navbar.', 'Promotes a 12 project course on building Bootstrap themes.', 'Modifying the navbar to be contained within a container and changing its color to a darker shade.', 'Adding a jumbotron is the next important thing to be shown.', 'Provides tips on modifying the navbar margin and border.']}], 'highlights': ['Bootstrap provides a grid system that allows creating layouts without using floats or any complex techniques.', 'Increased development speed is the number one reason to use a framework like Bootstrap.', 'The documentation provides pre-made templates, including starter templates with navbar, jumbotron, button examples, grid system, and carousel implementation. Emphasizes the availability of pre-made templates for quick development.', 'The chapter demonstrates how to style buttons by formatting them as links and adjusting their sizes, including large, regular, small, and extra small.', 'The chapter demonstrates how to style a table in HTML by adding classes such as table, table-striped, table-bordered, table-hover, table-condensed, and contextual classes.', 'The chapter covers the usage of wells and alerts in web development, providing practical examples and demonstrations.', 'Creating progress bars with contextual classes like success, striped, and animated.', 'The chapter covers creating a Bootstrap Jumbotron with a heading, text, and a button.', 'The navbar includes branding, logo, links, a dropdown, and a search form, which requires bootstrap JavaScript to work.']}