Hey, welcome everybody. In this Bootstrap video I will cover only the most important things that you need to know to get started. Bootstrap is a highly popular CSS framework that streamlines development by offering pre-designed components with optional JavaScript for interactivity alongside with templates and responsive grids. It empowers creators to rapidly build attractive and functional websites efficiently that are robust and feature rich. With customizable options and pre-built components, Bootstrap ensures design consistency and seamless performance across devices and screen sizes. Hey, welcome everybody. To get started navigate to getbootstrap.com. I'm going to be using the latest version of Bootstrap which as of today is version 5.3.1. If you scroll down a little bit you will find the installation guide. From here we have two options, install via a package manager or include via CDN. Now, they both have pros and cons. For example, if you want to install it via the package manager you get control over the version, you have offline availability, greater customization and security. On the other hand, if you want to use the CDN it's easier to set up, you have caching which uses less bandwidth, you have automatic update for better or worse, then you have reduce hosting load and you have global availability which makes it super fast. Now in this video I'm actually going to be using both and in the first part of the video we're going to start with the CDN. Let's jump into VGTD code or whatever code editor you have and before we get started I want to mention two extensions that can save us a little bit of time and if I go under extensions from here the first one will be the live server extension which essentially creates a local server and listens on changes. So every time I make a change to my document it will refresh the browser for me automatically so I don't have to do it manually. You don't need this but it's nice to have. The extension that I want to mention is the Bootstrap 5 quick snippets extension and the reason that this extension is good is because it can save you a lot of time. For example, they have a lot of useful snippets from here that you can literally start typing BS5 for example alert and then you can select whatever you like for example if you want to use the full alert you can type this and it will add the required code for you instead of you going to the documentation copying and pasting it just saves you a little bit of time you definitely don't need it but it's nice to have. From here I've created a brand new folder called Bootstrap. Let's create or file called index.html and let's start a local server by clicking go live. This is going to open the website in another browser and the local host which is <IP_ADDRESS> and port of 5500. From here we can start creating our html document and I'm going to go with html 5 like so. Save it and let's put an h1 hello. I'm going to zoom in just so you can see a little bit better and now let's include Bootstrap. So if you go back to Bootstrap scroll down a little bit where we have the cdn. From here we need to copy the css link so I'm going to copy this and we need to insert this link inside the head element under title. So I'm going to paste this in here and also let's talk about world wrap by going view and then it should be here world wrap or alt and z. Save this and now you should see that the font just changed and this is because our style sheet is now working and we can start using Bootstrap just like this but also if you wish to add any of the elements that need interaction from Bootstrap for example alerts or client site form validation you do need to add the JavaScript. So let's copy the JavaScript as well and we can paste it here underneath the link like so and we can just add the fur to this script which means that this script will be executed once the page has finished loading and we can save this. This shouldn't change anything but now we should be able to add interactive elements from Bootstrap. Before we do anything let's go to the doc super quickly and have a look around. Here on the left side is where you can have everything that you need they do have a quick start guide and everything is nicely laid out. The only thing that I wanted to show you before we get started is the colors. Now there are a couple of default colors that we can use throughout all out and these are the colors here the primary secondary success danger warning info light and dark. Obviously they can be overwritten if you install Bootstrap locally you can amend the scss variables and change them to whatever you like. Let's minimize everything and the first thing that we're going to do is focus on the topography. So I'm going to scroll down and let's make a little bit of space inside here. To speed up the process I'm going to copy and paste six headings. So these are the default headings obviously I am zoomed in quite a bit that's why they look quite large but these are the default headings and this is the default behavior. Now one thing I want to show you is that if I open this in another browser and if I inspect it and let's talk to the device toolbar here so we can look around how the text is behaving. So if I scale down the browser you will see that the topography is fairly small and if I go up you will see that it's actually fluid. So the topography is responsive as default. It doesn't make a huge difference but it is responsive as default. Now for each heading there is also a class that you can use and for example you can use the headings class names in order to modify the look of your headings. So for example if I want to make this heading look like H2 I can just put H2 and now this is gonna have the same size as H2 and we have the numbers from H1 to H6 available. So I can definitely make this H6 and this is gonna look like H6 if that makes sense. We might have H1 for CO but for the look and feel it looks like H6 which is great. Just like that when you need the heading to stand out you can use another class name called display. I can change the class name to display and then we have the numbers from one to six. So if I put one this is gonna be the largest one and as you can see this stands out from the rest a little bit more and of course you can change the font weight if you wish to. There are a lot of utilities such as font F for font and W for weight and then you just put both. Obviously some of those things you'll probably discover once you use bootstrap I won't be able to cover absolutely everything but these are the things that you can do and as I said you can change this to five or four whatever and the size will change. All right now let's move this down a little bit and let's have a look at some of the inline text elements. To speed up the process I'm going to copy and paste them and explain them. So for example I'm creating a paragraph here with the element mark and if I save this you will see that this highlights the text so we're getting highlighted text. Just like that we can use other elements such as delete which is basically going to put a cross through line through the text and that's pretty much it. Then we have s in here which says that this line is no longer accurate and it looks pretty much like the delete one it just puts a line through the text. Then if we use ins this will be addition to the document it will just underline it. Then for underline we can also use u just like standard you put u and then this will have underline text. We also have small which is fine print and as you can see this is slightly smaller because I'm zoomed in it doesn't make a huge difference but it is slightly smaller. Then we have a bold text here which you can wrap in strong and as you can see this just becomes bold and the last one that I'm going to show you is the italicized text and as you can see we have text which is italic. That's pretty much it. Now the great thing about this is also that they're class names so for example if I wish to highlight the heading one I can give it a class name of mark and save and as you can see this highlights the heading one I can do the same for the heading two I can do small and now this will make the heading two small like so. So there are definitely utility classes like this that you can explore and attach them to pretty much anything that you need. All right the last thing that I wanted to show you on the topography is that we can change the font colors if you wish to. For example on the h1 here I can do text and then primary. If I save this this is going to bring the primary color which comes from bootstrap and I'm going to show you super quickly is well here one more time these are the colors that we can use as the vote so you just attach primary secondary success or whatever you wish to the text class name and this will change it. For example on this one we can do text danger and this should turn into red as you can see and also if you wish to change the background color you can do bg dash primary and that will change the background color like so and you do have different backgrounds that you can use for example you can use a background black like so or background white.  All right the next thing that we're going to look into is the layout. So if you go on the layout and then breakpoint here you'll be able to see that we have different breakpoints that we can use on our layout for example small, medium, large, extra large and extra extra large. Breakpoints can be used to control how the layout elements adapt to a particular viewport or device size. As you can see here we have the dimensions and we have bare minimum styling such as the sm, md, lg and these can be attached to pretty much anything which I'm going to show you in a second and those dimensions represent a subset of common device sizes and viewport dimensions which provides the user with great experience. Now let's jump back into the code editor and maybe we can just comment this out and I'm gonna make some space. The first thing that I want to look into is containers. If we click on containers from here you'll be able to see already how we can use the breakpoints. For example we have a normal container here and then if you wish to attach a breakpoint to it you just put a dash in the breakpoint. That's pretty much it and here on the right side you can see how the container is actually behaving. So if we put container dash fluid this is always going to be 100% on all screens but if we put container dash xxl is going to be fluid for most screens except the extra extra large and so on. So let's have a look at how this behaves. So inside here I'm going to create a container by doing dot container press enter and then inside here we can just type something and by the way I do want to mention that this can be attached to pretty much any html file element. You don't have to just use divs inside here we have a container and I am zooming quite a bit so you won't be able to see properly and also it's kind of hard to tell. So what I'm going to do is I'm going to create a style sheet super quickly inside here of course I can link another style sheet inside here from our folder and what I'm going to do is put dot container and then for the container all I want to do is swap the background color to aqua and then maybe we can give it a border or one pixel dark blue and then dash just like so it will be a little bit easier to see. Now on mobile screen as you can see the container takes the full weight of the browser. We do have some space on the left side and the right side and this can be very useful so your content doesn't touch the side but of course you can amend this if you wish to. Now if I go to the desktop view here you will see how the container is behaving after a certain size here it no longer extends and this is because I'm using the standard container which is here it goes 100% of small screens and then after this it changes the size based on the breakpoint. So if I go down you should see how it changes the size which is pretty cool. Now of course I can change this to fluid and I'll have to add a here as well and now if we go back to the browser you'll see that this is always 100% and this is pretty much how you're going to be using the breakpoint throughout bush trap and I'm going to show you more examples right now. And just to mention containers are normally used to wrap sections of your website or you can even wrap the entire website in a container so it stays in the middle. Now we're going to look into the grid system when I say grid system I don't mean CSS grid is basically columns and rows but they are very powerful because they use flexbox as a default bush trap has a 12 column grid system but that doesn't mean that you can't use more than 12 columns and I'm going to show you what I mean now. So to start with we're going to look into the auto layout columns. So if you click on this you will see how it works in here they have examples but let's jump into vgstd code. Now inside here inside our container we can create another div with the class name of row. Inside row is normally where you would have your columns so you would create a row and then you would create a column like so and I can just put call and you'll see it. So this column you might not be able to tell but it takes the full width available and what I'm going to do inside here I'm also going to add row row and then each div inside the row to be highlighted. So it's going to be hard to see just yet but if I duplicate this column one more time so all chipped down save you will see that these columns are taking equal width automatically. So these are auto layout columns it doesn't really matter that the bootstrap grid system has 12 columns we can add as many as we want like so and they're just going to take the available space but look what happens when we add a couple more. As you can see when we don't have any available space the auto layout columns just go underneath and they just stack like so and then on the second line they're taking the available space nicely and if I go to the big screen here you will see how they behave also so on big screen they fit nicely which is fine and then if we go down at some point they're going to stack underneath here we go and that's how the auto columns behave which can be pretty useful. Now with that said sometimes you want to have equal width and in your layout you might end up doing something like this for example you might have a row with two columns that have equal width and then you can copy this row have another row with three columns and that would be absolutely fine as well and now if I go to the desktop view you will see how they behave everything behaves just as normal. Of course there are a lot of utility tags that you can use in order to align things for example the easiest one to tell you is the text the center and this will align the text in the center and I can copy this for the second row as well and just like that we have everything in the center. Now let's have a look at setting up column width so from time to time you might want to have a column at a certain size this column here I want to have it as two so it takes two columns of the 12 column grid system and if I save this you will see that here we're taking two columns and then the second column which is auto column basically it takes the available space if I go on desktop you will see that obviously it's a lot larger like so and that's how it behaves and I can definitely change this to four for example and as you can see it becomes bigger five six and so on so you have 12 numbers here that you can mess around with but if I say if I put eight here you will see now we have only two available so this is taking the two available but let's say if I want this one to be four boom that will work because eight plus four is 12 and that will work but if I want to make this one a little bit bigger let's say six for example now we won't have the available space and this is going to break on another line and this is how the 12 column grid system works so in this case we can save six and six and they will stack next to each other on all screens now let's make those variable so what I mean by this is let's add a breakpoint so for example if we start from mobile first both of those are auto layout and they're taking equal width but let's say I want to change this on medium screens only I can do call dash md which is the medium breakpoint and then I can change the size for example four now look what happens if I go to the big screen here and if I extend it you will see that when we hit the breakpoint of medium screens at some point here this is only going to take four columns of the available 12 as you can see and then after this it's just going to continue but let's say we want to change it one more time so when we hit larger screens I'm going to do lg for large maybe we can take eight just so we can see the difference now if I go back to the desktop view you will see that we're getting fluid then on medium screens we are taking four and now on large screens at some point we're taking eight columns which is amazing so this is how you can mess around with the responsive web design and as long as you think mobile first it actually makes it really easy and that's it of course you can change this one as well let's say on medium screens call medium this can be two and on call large this can be four and now let's have a look if I go here you will see how they behave at some point here this is four and this is two so we have a lot of available space inside here now the reason I'm showing you this is because those rows are actually flexbox which means that we can align elements however we like so we can definitely justify those elements in the middle if we wish to for example we can do this here justify content center and if I go back to desktop you will see that these elements are now justified in the center and just like that we can also use align to push them in the middle of the box if we wish to but at the moment I have no space around so I would have to put height on this pretty much you know to push them in the middle and one thing that I want to mention is that if you notice earlier for example if I put column medium of two this is going to follow from medium and up and it's always going to be two so if I go on the big screen here as you can see it doesn't matter how big the screen is this is always going to be two and that's pretty much it of course you can mix and match those things to make your layout work and the next thing that I want to show you is row columns for example on this row here we have three columns but what you can do is you can put row dash calls and then set a specific number for example we have three columns in here but I can set this row to explicitly have only two columns like so and now as you can see we have two columns even though that I can add a few more we only have two columns the same way I can say three we have three columns which is pretty cool and the last thing I want to show you is that you can definitely nest rows into columns so for example I can copy this it might not look pretty but I can definitely nest it inside here I can paste it and we have a column and inside this column we can split the column into two other columns like so and that's pretty cool for the alignment as I said earlier you can use justify or align and then you can do content center and start you can do content start center and around between evenly and so on for example on this one here we can say between and if I go on big screen you'll see that this column stays on the left side and this one stays on the right side so if you're familiar with flexbox this is pretty self-explanatory and you can do the same thing with alignment now the other thing that you might end up using quite a lot is padding margin and goodness so padding is fairly easy to do I'm going to remove this super quickly and so we have a little more space and for padding basically you want to use p that stands for padding and then you have a couple of options for example padding top padding right padding left and padding bottom and then you can put a number so if I put padding top four it pushes my row at the top and I can do the same thing of padding bottom of four and this will push the bottom now there are also ways of doing it on the x axis and the y axis and for this it will be padding y and then four and now if I remove this this will be exactly the same thing because it pushes the padding on the x axis so top and bottom and I can do the same thing for the x which is left and right and as you can see we have four four now if you can see but we have a little bit of space in here the same thing goes for the margin instead of p you'd use m for margin and now we have margin on the left side and the right side and if you wish to you can have margin y like so or you can put margin top only and this will change so you just have to mess around a little bit to get used to it and that's pretty much yeah now for the rows exactly the same thing you can also use gutters and to use gutters you will put g and then for example gx and then five and this will push I'm not sure if you can see but if I go on desktop view you will see that this pushes let me zoom in a little bit this pushes the columns here on the left side here and this is because of the gutters if I was to do gutters on the y-axis you'll probably see that it changes here and another thing that we can do is if you put gutters to the x-axis and they are outside here you can actually put overflow hidden on the container here if you wish to which is another utility tool and now if you look at the document you'll see that the line doesn't go outside and the same thing goes for vertical gutters instead of x you just use y and that's it and for both you'll just remove the y you just have gutters dash and a number and I'll do it for both top and bottom like so and that goes through the padding and margin as well and of course you can apply different breakpoints for different margins gutters paddings and so on by doing for example and four large screens for example we can do gutter large screens and then maybe five and dash it also make a change I'm not sure if you'll be able to see now but it will make a change almost it should make a change on large screens so if I remove this I think it does make a change but yeah it's kind of hard to see but you get the point of how to do the breakpoints and the last thing that I wanted to show you here is that you can change the background colors to them of course you can just go to a column and you can just do background of primary and that will change the color I can do the same for the other column so background danger and that will change the color as well and we can do text I don't know white and then that would also change the text color as well so these are utility tools that you can find in the documentation and mess around with in this section we'll look at components super quickly and components are basically designed to help developers build consistent responsive and visually appealing web applications without having to start from scratch and we have a wide range of components that are commonly found in web interfaces for example let's pick button here and if you look into the documentation they have a lot of examples let's jump into visual studio code and have a look at some of them so I'm going to comment this out super quickly and create some buttons here so we are starting blank to create a button you can start with a button and each button has a default class of btn as the very minimum this button is going to have the type of button and then we could just put button as the text so this is a very basic button here now if you wish to change the color of button you'll do btn primary for example obviously you can use the colors available you can use for example secondary and so on now those button classes can be used on pretty much anything that you need for example you might end up using it on links so you do class btn and maybe btn primary and then from here you'd have the href because this is a link I'm going to have it as empty link we'll have the row for accessibility as button and then inside here you put your link like so and just like that we have a link that looks like a button obviously it looks a lot better when it's zoomed out the other thing that I wanted to show you is that buttons have different variations for example if I was to copy this we can have an outline so I can put dash outline and just like so oh I think it's outline yep it's outline instead and then just like so we can have outline buttons and I can put it as danger this one for example and as you can see it changes the color you can also put it as disabled and as you can see this looks disabled and if I hover over it you'll see that the cursor doesn't change and it looks like the button is disabled which is pretty cool you can also change the size of buttons for example you can do btn dash large and now this will become a lot larger or you can change to be small and it will become a lot smaller than the rest of course you can put custom styling on each element if you wish to and that's it all right super quickly just to show you another component let's look into model of course I'm not going to be able to go through every single one but this one uses javascript and that's why I wanted to show you something different so what we can do from here I can either use the bush trap documentation and copy one that I like from here they have pretty much everything that you need so I can definitely copy this one here and paste it or you can use the extension that I showed you earlier and for example let's say that put bush trap dash model and from here we have model toggle default and so on so I'm going to put the toggle one and this is going to bring all the code for us if I save this you'll see that we have open first model and if I click on it we have a working model now one thing that I want to demonstrate is that if I was to remove the javascript from here this will not work so I'll save it click on it and as you can see it does not work so you do need the javascript to enable the interactivity and if I go on big screen somewhere around here and if I let's remove this super quickly and if I click on open first model button you'll see that it looks super nice it has a really nice animation and it all works just like that you can go through the components for the most part is pretty much a copy and page job they have a lot of examples and that should save you a lot of time having to recreate some of them and also I don't want to mention that all of them are customizable you can just apply any classes to them now if you wish to apply custom classes to something you can just create a normal class here for example custom button and then I'm not really and then I'm not really sure what to do about this one but let's say border of two pixel solid red like so and now I can add this class name to pretty much any element here let's say the the first one here and now you will see that we're applying a custom class name and just like that you can create your own custom class names or your own custom components and changed with the cdn one thing that you might want to do for example is to change the topography so if I was to uncover the topography super quickly just so we have something on the screen here one thing to change that topography is to override the bootstrap variables so if I was to go on big screen so if I was to go on the big screen here and if I right click inspect click on the html here and here on the right side and the styles you should be able to see all of the available variables now you can actually use those to change stuff in your layout for example I can use this variable here I can go back and instead of putting solid red I can just use variable and then put the variable name and this will change it to orange I'm not sure if you can see but it changes to orange which is great so we can definitely use them and just like that also if you score down a little bit more you might be able to see the bootstrap font sans serif this is what he uses at the moment and we can override this so if I copy this and in order to override this you would normally do something like this so you do root you put the variable name and then you put the font that you want so obviously sometimes you might want to download the font from our google font or Adobe font and you write the name here so I'll put a real and before I save it let's have it here on the right side so we can see the difference and now I'm going to save it and as you can tell it changes the font here super quickly and if we put poppins it should change it also because I think that I have poppins installed on my machine that's why and just like that you can all write elements if you wish to in this section we're gonna install bootstrap locally using vit so navigate to getbootstrap.com and click on read the docs from here we have the vit option here under get started so click on that and as you can see we have some other options such as parcel webpack and so on so there are multiple ways of installing bootstrap locally so I'm going to put this on the right side and this process is going to be a lot more involved than using the cdn so this is one of the downsides if I scroll down a little bit from here you will see the setup let's open power shell or terminal on our desktop so I'm going to do left shift right click and open in terminal if you're using mac or linux you can simply use the cd command to navigate to the folder that you wish to install your project in and as of currently I'm just using my desktop so in this case I'm going to grab the first code which is gonna create a project folder code my project and it's going to cd to that project folder so right click and press enter this creates the folder here on the top left corner as you can see and now we need to initialize a new npm project right click paste the code and this will create a package.json file inside the folder the next thing that we need to do is install with it so copy this right click to paste there and press enter then we need to install bootstrap so I'm going to copy this right click press enter and we need to install the additional dependencies copy right click and enter from here we need to create our project structure now since I'm using power shell I might not be able to do this unless there is a way but it's a little bit more involved so I think that it will be easier to just open my project folder in vgstd code and create those manually if you're using linux or mac you might be able to do this but let's do them manually anyway so since I'm cd to this project folder I can just do code dot and this will open vgstd code for me here on the left side I have the project and now let's have a look at the project folder so we need to create the folder source from here I'm going to create a new folder source and inside this source folder we need a js folder so js and we need one more which is going to be scss scss and that's it from here we need to inside the source folder we need to create index.html file copy and then let's do index.html from here we need to create main.js inside the js folder like so and then in the scss folder we need to create style.scss so here we go drop down and the last one that we need to create is vit.config.js and that's outside the belief yeah so that's going to be outside the source folder here we go and that's it so this is how our project should look like okay let's configure or vit so we need to open vit.config.js that we just created and paste the following code it's the same code here it's kind of hard to see because I've zoomed in quite a bit but it's the same code here that I'm pasting save and close this next we need to go into the index.html and copy some HTML5 so I'm going to paste this in here save that's absolutely fine now we need an nps script to run vit okay so under package.json here we have all scripts and essentially we just need to start script in this case because we've already got the test script so I'm going to copy this make sure that you have the comma at the bottom at the end and paste it inside here save this one as well and finally we can start vit by doing npm start awesome so we're essentially using this to start vit and we should get this result hopefully let's open the terminal inside here so terminal and then new terminal it's kind of hard to see and I'm just gonna paste npm start here we go npm start it looks a bit hot but that's npm start and now this creates a local host for this which we can visit hopefully if you hold control and press on it this will open local host of 8080 and here we go we have our project working which is great if I was to go to the index.html file and change to yellow one two three save it it automatically refreshes the browser which is amazing and it's super fast brilliant now let's have a look at at the rest of the step we need to also import bootstrap so this is going to go inside the scss style.scss copy this and this is going to be in here here and we paste it save okay next we need to load the scss and import bootstrap javascript okay so this is going to be inside main.js inside here and we paste okay brilliant and then the last thing you can also import javascript plugins individually yep you can also import them individually if you wish to but here in this example I'm gonna import absolutely everything and I give you an example as well also and you're done so now if I save this and if I go back you'll see that the button has come up and all bootstrap application is fully working which is amazing if I was to scale this down and just so we can see a little bit better super hard inside here you can see your terminal that everything is going well I'm gonna try to minimize this without closing obviously that needs to run in the background and now we can mess around with it just test it yep everything seems to be working now let's close everything and let's focus on the styles.scss now the reason that I'm showing you this way is because if you install bootstrap locally now you can customize pretty much anything that you want let me show you what I mean for example whatever you pick from bootstrap you can go and customize let's pick the topography for example so early in this tutorial we looked at the topography and let's have a look when you scroll down here we go we have the display headings here and just underneath them we have variables.scss so essentially we can override anything that we want and modify the bootstrap the way we want if you find anything that you want to modify from components you can go to them let's say alerts and then somewhere at the bottom you will find the variables that you can modify so these variables let me show you a few examples variables are usually modified above bootstrap for example if I wanted to change the background color there is a variable of that so it will be body-bg and then you can put your color let's say we wanted to make it black and just like that if you say this will compile and then change the background to black you can also change all of the colors such as the primary, secondary, danger and so on for example let's say primary the primary color as default is this blue color here so let's say we want to change it to an orange color I don't know ff4136 like that and save and now in a second yep when it compiles then as you can see it changes the primary color to this orange color and let me zoom in just like that you can go to the topography and change the font size as well so I believe that this is an h1 let me check it out so we have an h1 in here let's create an h2 just for this example save it so we have two fonts here and maybe we can give it a class name of text white if you wish to and we can do this for the other one now let's go back and let's see whether we can modify them so for the fonts you have h1 and in font size these are all these variables are listed under topography you can find them there and now I can literally put seven ram or whatever size you want and this should change it takes a second for me but here we go it changed and it's looking good I can do the same for h2 and maybe set put this to six ram and now this should change as well just like so so you can modify pretty much anything that you like and just to give you an example of something else let's say you want to change let's say you want to modify a card let's copy this card super quickly or instead you can use your bush trap extension here so somewhere around here I can just say bs dash card and then I'm not really sure which one I want really I really don't know which one it is maybe card background let's have a look at this one okay so we're getting a card with a background here obviously I don't have an image maybe I can insert one super quickly inside source img and then if I open this I will paste an image of a cat.jpeg okay so now if I was to change the image here let me do a view well wrap and here we go we can do img cat.jpeg will this work here we go yeah the cat works which is great and now obviously this card has a primary background color which we've changed in that scss here but what I wanted to show you is that underneath each component if you scroll down I mean in this case you're gonna have to scroll down quite a bit let's go to the bottom and underneath here you will see all of the variables that you can change and for example you can change the spacer x spacer y title spacing you can change the title color and so on so let's say that I wanted to change the card title color to be something else I'm gonna copy this go back and just like the previous variables I'm gonna copy this and from here we can paste the variable and change the color to literally whatever we like and maybe we can just put blue for now and save this will take a second and as you can see we have officially changed the card title to the color blue and this card can be reused through the entire website and you'll have the same style and before we finish with this video I just wanted to show you that the JavaScript also works we have inserted the JavaScript in here but what I was gonna show you is that if I put something that requires JavaScript for example bootstrap modal toggle that will require JavaScript if I save this one and then if I click on it you will see that the modal works obviously it looks a little bit ugly because I messed up all the colors in here let me comment them out and now it's gonna look a little bit better here we go everything is back to default and the modal is working that's gonna be pretty much everything from this tutorial I hope that you found it useful if you found this video useful like this video consider subscribing to my channel and as always thank you very much for watching


First off, my hair is not that bad.  And the guy next to me is a little bit larger and his elbows are taking up both things but the TV controller is on the side. Well guess what happens? Okay, not a big deal.   There's a little insight into Mike. What's gonna happen if you say anything?  I could easily said that but I'm weird, all right? I'm not normal.  Or could you scoot back? Every normal human would do it, every human would do it, I can't do it, I can't, I can't do it.  I don't know if you see that, hotter and wetter than Boston, I don't know what we're doing, I literally invited myself to this photo shoot, so we're just kicking it. Everybody else here to look pretty. Look, we're out here getting Red Bull sponsorships together, all right?  If she puts the routine together, she can easily place top three. Sponsored by Hey, Brandon and Pearl Belbergade. Oh, she really, she really took one there team, she really took one there, but I think she can come back from it. Are you supposed to be the jock in this shoot? That's what they first said, now I gotta replace, bro. Who replaced you? Raymond. He's handsome, he's got more muscles. It's not in the artsy, like mysterious musician. I don't know what it was, man. Perfect. One, two, three. Do you guys know who Drew Gooden is? He used to be bald and then he would have just Yo, what's up? That's strong dude, could you just do my job? What's up? Hey guys, this is uh, at least I'll do my job next. Um, Mikey and uh, today we are going to get some pizza. Cowabunga. They call it me optic phase, Mike. I'm going pro. I'll see you on the internet. I'll see you in the battle royale, wind corner. Back in the gym. They got me in a hoodie, of course, because one I'm too sexy, they don't want to let it out.  A couple more shots. I think I'm doing some like heavy farmers carries, and then some accessories. It's hot as s***, but then we'll grab some food. I'm working out with Bart tomorrow, so I'm not too worried about how shitty this workout goes. We turn on some bag music, chillin'. Hunter's out here grinding. Everyone's sweaty. Got a capital V, the letter of the day, kids. That's why. Where'd you get so jacked, bro? The capital V. I can put it on the sides. For men in food, you know. Good for the gut.


The Cavalcade of America presented by DuPont, maker of better things for better living through chemistry. We bring you a story tonight of Anna Ella Carroll, the great unrecognized member of Abraham Lincoln's cabinet, who worked obscurely but decisively for the president and for the principal of his great struggle, Unity in America. Our play was written by Robert Talman for the Cavalcade players. Our star, Agnes Morehead. The orchestra and the original musical score are under the direction of Don Voorhees. DuPont, maker of better things for better living through chemistry, presents Agnes Morehead as Anna Ella Carroll on the Cavalcade of America. The story begins on a warm day in Washington, not many years after the close of the Civil War. In the House of Representatives, a few scattered congressmen are listening to the clerk as he reads what they believe to be a routine bill. There is only one spectator in the gallery, a little old woman. For the relief of A.E. Carroll, and for acknowledgement of services performed during the recent Civil War, said services described in the report of the House Military Affairs Committee, appended here too. Mr. Speaker, the gentleman from Ohio, Mr. Speaker, in the interest of speedier German, I suggest we dispense with the reading in the report. It is so ordered. Mr. Speaker. Yes, Mr. Bragg. Mr. Speaker, Senator Stanton has sponsored this bill in the Senate, because most anxious that this bill be passed. Senator Stanton was Abraham Lincoln, Secretary of War, in a position to know the facts. What are the facts? Mainly the facts of A.E. Carroll, the petitioner in this bill, with actually, though not in name, a member of the Cabinet of Abraham Lincoln. I don't believe it. A secret cabinet member. Why, next you'll be telling us there was a phantom general as well, riding at the head of a ghostly army. He'll be trying to make us believe that... Mr. Speaker, I don't believe the gentleman needs to go on. The hour is late. The air is very humid. Let us recess. The chair hears no objection. The house is recessed until tomorrow at 12 noon. Why don't you go home, A.E. Carroll? They're not coming back today. They don't know you're the phantom general. Phantom general. What's that, ma'am? Oh, I'm sorry. I... I don't mean to disturb you, ma'am, but I've got to clear the gallery. Yes. They won't be back today. Yes, of course. I was just leaving. I felt a bit faint for a moment. This heat... Oh, you take my arm, ma'am. I'll see you get out, all right? Thank you. You're very kind. Can you get home all right? You think? Yes. Yes, I'll be myself again soon, I'm sure. My hotel is quite near here. Hurry, A.E. Carroll. It's getting late. No, mustn't take a carriage. There isn't much money left, you know. It's raining, but you've walked in the rain before. There's Pennsylvania Avenue, the top of the hill. Phantom general. Strange, he's saying that. That hurt, didn't it? Don't think of it now. Here's your street, the third gaslight. Here's the hotel, the carpet, shabby, old. Wait, you haven't the key. Better stop at the desk. Hey, ma'am. No mail for A.E. Carroll? No, still no mail, ma'am. Oh, thank you. I seem to have gotten rather wet. You'd be so kind as to send Mrs. Kelly around. I think she's waiting for you, ma'am. Oh, thank you. And about the bill, I'll see Mr. Collins in the morning. I'll tell him. Up one flight through a musty corridor. A stingy old hotel. Pause now before the door. The key in the locker. Miss Carroll, you sit down and let me help you off with these wet shoes. Oh, thank you kindly, Mrs. Kelly. How did the debate go in Congress today? They were talking about a Phantom general. Oh, so it's Phantoms now and the taxpayers' money. There now.   Oh, thank you. Ah, nice warm room. Isn't that better? Yeah, it's wonderful, Mrs. Kelly. And before you go, if you do just one more thing... Get you a little trunk from under the bed. Yes, please. There you are, Miss Carroll. And if you need anything else, just call me. Thank you. Phantom general. That's you, isn't it, eh, Carroll? And this little chest with its gold clasp. That's all that's left, isn't it? Open it up. What's that on top? A locket with a miniature of love forever. From John to Anne. You don't want to look at that, do you, eh, E. Carroll? You're the Phantom general. Put it aside quickly. Look at this letter. My dear lady begins. And it's signed A. Lincoln. And here's one from Tom Scott. Does he remember... Does he remember that day in 1861 when he went to the White House to... Tom, this pamphlet by A. E. Carroll, this reply to John Breckenridge, gives me a means of saving Maryland for the union. But, Mr. President... For a month, I've had the Attorney General looking for a way to deal with traitors He couldn't find it. Well, here it is. One A. E. Carroll. Tom, I must have Carroll in my cabinet. Who is he, anyway? Well, that is...  You mean he's got a better job? No, that is not exactly, Mr. President. Tom, what's the matter with you? I asked you a question. Who is this A. E. Carroll? Well, I scarcely believe you'll find the name listed in any of the bar associations, Mr. President, as a matter of fact... He's not a member of the bar. Who cares? Tom, I tell you, this A. E. Carroll must be in my cabinet. You get hold of him. Send him in to see me. Right away. Anna Ella Carroll. Mr. President? Well, I... Mr. Carroll, I... This is indeed a pleasure. Your surprise, Mr. President? Frankly, I am. You're disappointed?  You seem to have overcome that handicap quite nicely. I, uh... I refer, of course, to the splendid legal worker your reply to John Breckenridge. John Breckenridge and I have been acquainted for a long time, Mr. President. I've had some practice in answering his arguments. And some experience in law is well I gather. Yes, I was secretary to my father when he was governor of Maryland. An old Charles Carroll, I'm proud to say so, Mr. President. I knew it. A document such as this should have to come straight from the Fountainhead of the Republic. Precious few of old Charles Carroll's descendants think as I do, I'm afraid.  No, Mr. President, one is not enough. That declaration Charles Carroll helped to frame begins... We the people hold these truths to be self-evident. The people still do, even in the South. If they didn't, if I didn't believe they still do, I wouldn't have come here to see you. You were right about your own state of Maryland, Miss Carroll. But what are we going to do about those other people who don't hold those truths to be self-evident? I think, Mr. President, to some men, law is not a matter of protection and convenience, but a sort of religion. Give them a gospel of wartime law according to the legal saints of the early republic. Then they will cease to shout tyrants every time you act to save the Union. Remember what happened to Moses when he tried that, Miss Carroll? Moses made the mistake of submitting the laws himself. He should have had them presented by a sensible member of the opposition. Would you be willing to write such a work, Miss Carroll? I'd be willing to try. I'm going to make you an offer. It may sound strange to you at first, but I want you to consider it very carefully. Yes, Mr. President. I want to offer you a job in my cabinet. But no woman has ever held such a position, Mr. President. It's never been necessary before, Miss Carroll. Of course, you understand that it would have to remain a deep, dark secret. Naturally, Mr. President. Well, what about it? Mr. President, I accept. Sergeant, Sergeant. Yes, Mr. President. Step outside and bring in Captain Evans. No way, Mr. President. Captain Evans. I hope you like this fellow. Yes, Mr. President. Come on in, Captain Evans. I want you to meet the newest member of my cabinet, Miss Anne Carroll. Captain? Miss Carroll, Captain Evans. Captain Evans will be your military aide, Miss Carroll. I'm sure Captain Evans and I shall get on splendidly. Pleased to meet you, ma'am. How do you do? Remember, Captain Evans, you will treat Miss Carroll if she had the rank of a major general. The photograph of Lincoln, the way he looked that first year of the war, A.E. Carroll. Remember? And here's Hiram Evans in the uniform of the Army Intelligence. It was he who made your job something more than cabinet member, author of Lincoln's authority on wartime law. Remember that day in the old mercantile library in St. Louis? You went there to do research. Just make yourself at home, Miss Carroll. Any books you want that don't seem to be on the shelves, just let me know. Well, thank you, Mr. Johnson. As a matter of fact, you can help me a great deal today. Captain Evans has urgent business elsewhere. Isn't that so, Captain Evans? Oh, yes, yes. I'll call for you at 4.30, Miss Carroll. Thank you, Captain. So long, Miss Carroll. So long, Mr. Johnson. Hmm. Talks like a Texan, that chap. How clever of you to have guessed it. He's trying to locate relatives here in St. Louis so he can get back to his regiment in Texas. Well, I thought you were both Northerners. Well, you wouldn't tell on us, would you, Mr. Johnson? Oh, no. No, no. Well, my brother's one of the biggest generals on the Confederate side. General Johnson? Mm-hmm. Oh, I might have known. You both have that firm jaw and those steely gray eyes. Now, many folks notice the resemblance. I'm flattered that you do, ma'am. What a pity. All those fine, talented young men like your brother throwing their lives away in a lost cause.  I deplore it. I deeply deplore it. But our south hasn't got a chance of winning, Mr. Johnson. While already General Fremont is building gun boats to float down the Mississippi. Those gun boats?  While the Mississippi's bristling with force, they won't get the mixed birds. Your brother might have quite a large force then. Not as large as people think. Oh. But he's got a bluff, Miss Carroll. While he's even got Jeff Davis' fool how many men he really has. Are you sure? I know, I know. Look, look on this map here. I wouldn't tell this to anybody but you, Miss Carroll. Yes. But I know just how he's got his columns arranged so as to fool them. There's more there than there really are. Now, here's the Tennessee River. Here's the Cumberland. Well, you've got the whole formation marked on here. Every detail. That's my hobby, keeping track of my brother. Well, oh. Well, if I could only show this map to Captain Evans, it would cheer him so much to know that things are going so well for our men. Well, take it along, Miss Carroll. Well, I... But don't lose it. Oh, no, I won't. This ever fell into the hands of General Grant or General Halock? It'd be just too bad. Indeed it would. Duck, Miss Carroll, duck. You're falling close, aren't you? Yes. I should never have let you come so close to the front lines. Captain, there's a lull we'd better run for. No, Miss Carroll, wait. Miss Carroll. Hurry, Captain. Miss Carroll, come back before it's too late. We must save our breath, Captain. We're running straight into the line of fire. Captain Evans, please. Stop here, Miss Carroll. Keep down. Yeah. We're protected now by this head. You can see General Halock's headquarters just ahead. The sentry's coming up. Better call to him, Captain. It's all right, Sentry. Here. Here are papers. Oh, from the president. All right, you can pass. Read the way, Captain Evans. Tennessee River, indeed. You're raving, sir. If I may say so, General Grant, you'll reap the liquor as well. That's my business, General Halock. If I may say so, you're wasting precious time. It would be obvious to any child if the Mississippi flows the wrong way. Don't vote for that. Wait here, Captain Evans. Don't vote for that. Wait here, Captain Evans. I want to hear this. As you say, ma'am. Tennessee? As I was saying, General Halock, Tennessee flows north from the very heart of the south. Furthermore, Johnson's Army. What about Johnson's Army, General? Oh, Miss Carroll, I've been expecting you. Excuse us. Military matters, you know. Very heated. I'm very much interested in military matters. Oh, are you, ma'am? This is General Grant, Miss Carroll. I'm honored. General Grant, I'm interested in what you were saying about the Tennessee because I've just returned from a trip up there. You mean to say you've been into the enemy territory? Oh, I was quite safe, I can assure you. I was piloted up by Captain Scott, General Grant's old pilot, I believe. Fine old man. I'm sorry to lose him. He knows every island, every shoal, every eddy in that river, and the Cumberland as well. I know the Mississippi, that's certain. He says it's followed to take gunboats down it. General Grant, we cannot take the testimony of a drunken flatboat pilot where the fate of the nation is at stake. You don't have to, General Halock. What do you mean, ma'am?  He knows the river too. I think he'll agree with Captain Scott. You appear to know the President rather well, ma'am. Well, the President has confided in me that he's none too well pleased with the results of this Western campaign, General Halock. What is the President's idea, ma'am? He believes we need more daring generalships. In fact, he asked me to report on any men who seem to have out of the ordinary ideas and abilities. Well, I trust you are well pleased with what you've seen here, Miss Calock. Oh, General Halock, what a question. But tell me, General Grant was saying something about the Tennessee River and the possibility of a Cumberland offensive. Yes, General Halock and I are in disagreement with the wisdom of that. Does General Halock know that Johnston has less than the third of the Army he's reputed to have? Impossible. Are you sure of your information? Yes, and if you move quickly, you can end the war before the year is out. Take gunboats up to Tennessee, cut the railroad bridge, and then you'll have stopped the Confederate food supply. What? I haven't the authority. Then get it. General Grant, I have some maps and notes here, which I wish you'd have copied and sent on to General McClellan in Washington. Well, Miss Carol, you misunderstand my position. I'm not in command here, you know. Naturally. I merely thought you and General Halock, of course, might be interested in looking over this material. I'll say goodbye to you gentlemen now. I must get back to Washington. I've found what I was looking for. Listen to them out there, Miss Carol. Celebrating McClellan's victories. Your victories. And we can tell them the truth. But God willing, they shall know the truth when this war is mercifully ended. There is a way to end it quickly, Mr. President. If only General McClellan would have them strike for Vicksburg now before the enemy recovers. I know, I know, but McClellan is adamant. And how can I change the high command at a time like this? Is McClellan afraid that General Grant will rise in favor, Mr. President? General Grant? Surely you knew it was General Grant and not General Halock who carried out the Tennessee campaign, Mr. President. I know General Grant held the lines, yes, but McClellan said that... That Grant drinks? Yes, that's true, I'm afraid. But he can take Vicksburg. Are you sure of that, Miss Carol? I am. By the way, you didn't by any chance find out what brand of whiskey Grant drinks did you? General, the one who held the lines and where you just sat, a phantom general, A.E. Carol, pick up that letter there. The official looking one. Oh yes, that's from Stanton who didn't he? Stanton knew about Vicksburg and the Cumberland, how you cleared a path for Sherman through Georgia to the sea, planned it all sitting right here, in this bare hotel room. And when victory finally came, the President... Thank God, Stanton, it's all over at last. We must tell the people now. We must tell them who won those battles. Mr. President, what would be the effect on a war-worn nation of learning that their fate has been in the hands of a civilian and a woman at that? I suppose you're right. But before I leave this office, Stanton, if I leave, Anne Carol will have public recognition. Well, that secret died with Abraham Lincoln. Didn't it, Anne? You don't like being called Anne, do you, A.E. Carol? Stanton General? Whose is the picture in the locket inscribed, Love Forever from John to Anne? Isn't that John Breckenridge, who was Vice President of the United States and afterwards fought with the Confederates? You don't want to remember that, do you? You go back to the picture of Grant. That day, he came to see you here. That's a very pretty chime to that clock, Miss Carol. You know, that little China clock is all I have left of what was once my home. Kingsford Hall. Our plantation in Maryland. You've never even been back to see it? Yes, once. It nearly broke my heart. The house wanted paint, and many grows were in rangs with gunny sacks around their feet in place of shoes. They didn't even know they were free. Or if they did, they didn't know what to do about it. Yes, we destroyed a very beautiful way of life, General Grant. You must have had many friends on the Confederate side. Isn't that a picture of John Breckenridge there? John Breckenridge? We were very close, John and I, for years. But there was a difference between us too deep to reconcile. Tell me, Miss Carol. Is your own fortune entirely gone? Fortune? I never had any fortune. If I'd been willing to sell my slaves to the Yankee traders, I'd have had something. No, I worked and made a living for them and myself. I used to give legal advice over teacups and then shock my clients by asking for a fee. A lady, it seems, should work for nothing. I don't wonder your empire. What did you never get any reward for your work in Lincoln's cabinet? Yes, I earned the friendship of the greatest man who ever lived. Abraham Lincoln. The hotel in Washington, B.C. An old lady puts her treasures back into a little humpback trunk and shoves it under the brass bedstead. She looks about the bare room that is now her only home. Military maps decorate the wall. On the mantelpiece ticks a lovely china clock, relic of a proud past. She sighs and blows out the lamp. So our story ends. And the cavalcade players, for their performance of the story of that little-known member of Abraham Lincoln's cabinet, Anna Ella Carroll, who died officially unrecognized for her great work in preserving the union of these states. And now DuPont brings you news of chemistry at work in our world. This is the time of year when women say, John, I want you just to look at that hallway and husbands wish they could take long trips to Alaska, painting time. I'm going through it at my house right now. My wife holds a dinky strip of color about one inch square against the wall, and then I say, yes, but will it look that way when they paint the whole room? Well, in answer to that question, I have good news. To make redecorating easier, DuPont paint experts have worked out a sure-fire color selector that shows you exactly how your house will look with new paint inside or out before you paint it. Here's how it works. The color selector is arranged in the form of a book which you can see at your DuPont paint dealers or your contractor will bring it to your home. In the selector are pictures of houses, all sorts of houses, from a Cape Cod cottage to the Mediterranean style that's popular in Southern California. But here's the trick. The pictures are printed on transparent cellophane cellulose film. Suppose you would like to see how your house would look painted, say, in white.  How would it look if you painted the shutters blue? You place a blue painted sheet underneath the body color, and there is a completely styled white house with royal blue shutters. To style the interior of your house, you simply glance through the book until you find the picture of a living room or a bedroom like yours, not just the furniture and draperies, but with the walls and other paintable surfaces left transparent. You place this picture over a sheet painted with the color you have in mind, and there is the way your room will look when the painters have finished. Among the colors offered by the color selector is a new group of a special interest to friends of cavalcade. Eleven beautiful shades have been named the cavalcade of America colors. The story behind them is an interesting one. In colonial times in America, paint was a luxury. Only a very few people could afford to paint their houses inside or out. But the people who could afford it used paint with exquisite taste. The colors they chose for the paneling and trim in their homes were much like our pastel tints, but darker with a rich smoky quality. Powder blues and apple greens and so on. You can still see them in museums. More beautiful than ever, if anything, because they've aged. For years, paint chemists have been trying to recapture these charming old colonial colors, and at last, they've succeeded. These are the new cavalcade colors. The color selector not only shows exactly how they will look, but gives your painter the formulas for achieving them. Anyone who is planning to redecorate, especially anyone with early American furniture and draperies, will find them authentic and handsome. Whatever brings beauty and harmony to our daily surroundings, you paint chemists do not hesitate to include on the long list of better things for better living through chemistry. And now the star of next week's program, John McIntyre of the cavalcade players. Our play is about Andrew Jackson. Not the well-known story of old Hickory in the White House, but Jackson as a young man, a fighting lawyer in the wilderness. When bringing law and order to the frontiers meant justice with a hard right, we hope you'll join us for this story on next week's cavalcade of America. Cavalcade gratefully acknowledges its obligation for new material, which appeared in Marjorie Barstow Greenby's book My Dear Lady, recently published by Whittlesea House. On the cavalcade of America, your announcer is Clayton Collier, sending best wishes from Dupont. This is the National Broadcasting Company.


We are a local sustainable facility. We buy all fresh produce nothing frozen today. We're making pizza We have our own bake shop. We make all our own desserts and breads and pizza obviously Our meats are grass-fed fresh seafood from Point Pleasant, New Jersey. Nothing comes in frozen


In Germany's outgoing Chancellor Angela Merkel has held talks with Prime Minister Naftali Bennett in her final official visit to the country after 16 years in power. And this is Merkel's eighth visit to Israel since taking office in 2005. Merkel is expected to tour Israel's national holocaust memorial later on Sunday and lay a wreath at Jerusalem's Yad Vashem memorial in remembrance to the 6 million Jews killed by the Nazis. The German Chancellor had planned to conduct the visit in late August but canceled it, citing the tense situation in Afghanistan as the United States, Germany and others evacuated personnel ahead of an August 31 deadline for the withdrawal of foreign troops. to our YouTube channel and don't forget to hit the notification button so you get notified about fresh news updates.


Hi everyone, in this tutorial, we're going to talk about multi-dimensional lists in Python and particularly, we're going to talk about two-dimensional lists. But first, I'm gonna say few words about lists in Python. For example, let's say that we have a list of five integer numbers in Python. Let's call it my list and let's populate it with a few integer numbers. I'm gonna do that also in my Python IDLE. I'm gonna use the exact same numbers. And as you can see, this my list list is an ordinary list in Python and an ordinary list like this one is one-dimensional list. So we can represent this list as one dimension or one row. This list has elements 3, 1, 4, 1, 5. It has five elements and the index of the first element is 0, the index of the second one is 1 and so on. So starting index is 0, don't get confused with working with elements of a list in Python. And now we're going to give an answer to the main question of this video and that's how to create a two-dimensional list in Python. In order to do that first, we need to see what a two-dimensional list is. A two-dimensional list in Python is represented as a list of lists. Also we can say that two-dimensional list in Python can be represented as lists within lists. In the previous example, we had an ordinary one-dimensional list, which can be represented as one row, but in the case of multi-dimensional list inside of putting numbers inside our list, we're going to put new lists within that list. So in this example, we've created one two-dimensional list and within our list, we have two lists of three elements. I'm going to type that in my Python IDLE. Two-dimensional list has a list and within this list, we have two lists with three elements. First list has elements 3, 1, 4 and second list has elements Y, 1, 5, 9. We can say for this two-dimensional list that it has format 2 times 3. That means that within this list, we have two lists with three elements in each list. And this two-dimensional list has two dimensions. The first dimension can be represented by rows. We have two rows inside this list. Each row is a separate list within a list. And the second dimension of our two-dimensional list is column. We have three columns in this example. Each column represents one element inside this list. This our two-dimensional list has format 2 times 3 and we can represent it. And we can think of it same as that we have a table of format 2 times 3 or same as we have matrix with format 2 times 3. Now let's solve few simple examples. First example is how to get the second element of the first list of our two-dimensional list. So we want to get the second element of our first list. First list in our case has index 0 and the second element within it has index 1. So if we want to get this element, we're going to call our variable which represents two-dimensional list. In first brackets, we're going to put the index of the row. And in the second brackets, we're going to put the column of our element. So I want to type that in Python IDLE. And let me see, did we get this element? Yes, we get it. Now we have a second example, how for example to get the third element of the second list, we need to get the third element of the second list. The index of second list is number 1 and index of the third element within our second list is represented by index 2. Let's try to type that code again in our Python IDLE. We want to get the second list which has index 1 and the third element within it which has index 2. And we get number 9 as the result. Then let's see in a simple example how to change an element of our two-dimensional list. For example, how to change the first element of the second list. We want to change the first element of the second list. Second list has index 1 and first element of our list has index 0. We want to change that value with some new value in this example with number 8. So we're going to get the element from our position and we're going to change it with some new value. I'm gonna type this example in our Python IDLE. So we're going to change the first element of the second list with number 8 and now simply I just want to call it to see its value and now its value is number 8. In this short lesson we've talked about two-dimensional lists in Python. Thanks for watching and don't forget to subscribe to my channel. See you in the next video.


Welcome folks, this is Tom O'Brien, a TFNN.  Hope everyone's having a great day, safe day to TGIF folks. Let's make it a great one. Don't make assumptions, ask for what you want. Find the courage to ask for what you want. Others have the right to tell you yes or no, but you always have the right to ask. Likewise, everyone has the right to ask you for what they want, and you have the right to say yes or no. Make it a wise! Let's take a look at it out here. We have the Dow, Industrial's down 277, Nasdaq's off 264, S&P's are down 50, Gold contract up $7.20, trading at 17.38 an ounce. We have Silver down 26 cents, $18.45 an ounce. Light, sweet, crude, where are you? Sound of buck 52, trading out at 94.81, notes and bonds. The 10-year note, bottom line, these are on the move, top side folks. You get the 10-year right now trading up a full point at 1.1929, the 30-year up a full point, plus 25 ticks at 1.4204, and the 10-year right now folks is yielding 2.77. We had a high of 3.4, it's 2.77. King dollar, this is gonna be the one coming into the close man, and you know it's already gained back quite a bit and that's why you see this market going south. King dollar's down 198 ticks, it was down 550 this morning, bottom line keeps clawing it back, we're at 106.712. The euro's at 101, the yen is trading at 136.16, and the British pound is at 119 to one US dollar. Our phone number's<PHONE_NUMBER>, if it's called folks, or know what's going on in your world, and the world of the S&Ps, let's take a look at it.  My take is that's what we're going higher, and the reason I'm saying it is that, so the S&P didn't get to test that low of yesterday. That being said, it's the NQs that run this market, and if we take a look at the NQs, the NQs got down to that level, rejected that level, and had lighter volume, so let's pull this up. It's gonna be really tricky coming in here, man. So here's the number, here's the bar. The bar there was 12,373. Call it right at it again. Bottom line, that bar there had 21,000 contracts. We made a low out here today with 12,000 contracts. It just popped, it was the first pop we got all day, but you only had 9,500 contracts in it. You know, so we'll see where this baby's gonna shake out. It's gonna be a wild close, man. That's the bottom line. Gold, let's go take a look at the gold contract, gold contract, and the equities had some good action out here this morning. A lot of these equities gave a lot back on price, as did the contract. The contract got to 1755, right now you're at 1738. Didn't hold price, big deal, couldn't hold price, no doubt about that. Let's go over to the note in bond market because we very well may have an ABC structure on the way up inside the note in bond market, and if we do, it's gonna be amazing, man. Because the aspect is that you have your next fed meeting. Bottom line is that, let me just get the exact date. I think it's the 27th calendar, yeah, 27th. But you can see this 10 year, man. This 10 year is going after B point, and the B point had volume of 1.6 million contracts, and guess what? So you're going into the B point with 1.6 million. That's telling me it's gonna break, and this is a monster ABC up too, by the way, okay? Your B point here is that 1.20 and a half, your A point is 1.14 and a quarter, so what do I say, 1.20? Yeah, so it's six bucks, six and a half dollars. What's gonna get you to 1.24? 1.24 is gonna bring us all the way back, it's gonna bring us all the way back to March 15th. And if that's what you get, you're gonna be talking about interest rates going down versus going up, and we'll see just how forward looking this market is, because that's a twist, man, that's a twist, that if that's the case. Now let's go look at this dollar, because the dollar is, you know, bottom line break and havoc on the marketplace. There's no doubt about that. It's pretty amazing that you only can get 400 point move, tick move, so look at this, right? The bottom line is that you can see this morning at 10 o'clock, markets down, the dollars at 1.06, 1.11, well, guess what? You're at 1.06, 7.20, and the number, which is crucial, is right here. 1.06, 7.92, and guess what? You know, we're right next to it now, and so we'll see how this shakes out in the next few hours. Some of the higher volume equities that we have out here today, you got snappers getting smoked, that's down $6.  Pinterest also down $2.80. We go into the NDX100, we take a look at the strength versus the weakness inside the NDX, and we have X-Lon is up 1%, you got Model E's up 8-tenths of 1%, taken away from it, what do we have here?  Our phone number's<PHONE_NUMBER>, oh, here comes the pop, man, you're gonna love these markets, man. We had a question, I had said that this was a, you know, white light, the white lightning is done, don't, white lightning focuses inside the option market, the bottom line is that when you have option expiration, when you get a downdraft like this, it's pretty cool because you can get into whether it's the cues or the spies, and, you know, they expire at four o'clock, and, you know, you basically can hit them for not a huge amount of bread, and, you know, bottom line, you're basically trading them, and because they expire so quickly, they're not a lot of money, and, you know, you get movement, and as long as you buy them in the money, the movement's pretty quick. Stay right there, folks, we'll come right back. At the time of booming inflation, we are purchasing powers eroded, there's no better place to protect your hard-earned money than in gold. This, the gold's flagship asset, is the Monk Todd Gold Project in the Northern Territory of Australia. This is Australia's largest undeveloped gold project. We are talking a world-class gold project in a tier one mining district. This is a large-scale, low-cost project with significant existing infrastructure in a politically safe and friendly mining jurisdiction. This, the gold just completed the Monk Todd Feasibility Study, which resulted in a seven million-ounce gold reserve in a 16-year mine life. All of this, combined with the approvals of all major operational, as well as environmental permits. This distinguishes Monk Todd as an attractive, diverse party, ready-development stage gold project. This, the gold trades on the New York Stock Exchange under the symbol VGZ. Are you looking for a way to consistently add winning trades to your portfolio? Tom O'Brien is here to help. Tom O'Brien has been successfully trading markets for over 30 years. A frequent contributor to TD Ameritrade Network and CNBC, Tom O'Brien founded TFNN over 20 years ago to help educate investors just like you. Tom's Daily Market Newsletter, Market Insights, is published every morning when the market's open. To give you the competitive informational edge, you need to succeed. These newsletters are packed full of Tom's advanced technical analysis and are geared to deliver comprehensive strategies for a successful portfolio. Get Tom O'Brien's newsletter, Market Insights, today. And try all of our products and newsletters 30 days risk-free with our money-back guarantee at TFNN.com. TFNN, educating investors. Everything in the universe is governed by the Fibonacci sequence. This mathematical principle is responsible for everything from the most aesthetically pleasing artwork to patterns in the stock market. To stay on top of stock patterns you can take advantage of, sign up for the Fibonacci 24-7 newsletter at TFNN.com. When you subscribe, you'll get a weekly report from veteran day trader Larry Pesavento on stocks you need to pay attention to, and you can trust Larry's analysis. After all, he's got 45 years' experience as a day trader. Larry will also provide daily charts, videos, and data on the key markets that he's tracking. Expect notifications from Larry on market movement you need to act on at any time. First-time subscribers also get a 30-day money-back guarantee. If you're not satisfied, let us know and you'll get a full refund within 30 days of signing up. Subscribe to the Fibonacci 24-7 newsletter today. TFNN.com, educating investors. Toll free at 1-877-927-6648. Internationally at<PHONE_NUMBER>. Welcome back, folks. Best of beauty, Tom O'Brien. We appreciate you going around in problem with us out here. We have the Dow Industries down 193.  So how you been, man? Pretty good, pretty good. How about you, good? I heard you're buying a stock today. Yeah, we're gonna buy a stock. Folks, what happened last week is it, did someone email you or they text you? Somebody wrote on Facebook. Yeah, found Facebook, oh my God, that's hilarious. Oh, YouTube, YouTube. Okay, YouTube. So Best is gonna buy a stock. Well, we're gonna get into that, but let's get to Philip and St. Pete first. Philip, what's going on, brother? Hey, Tommy, how are you? I'm doing great, man, yourself? I'm very good. Cool, man, cool. So, BNLD, huh? Yeah, I wanted to see if you had any news on them. I've owned them for quite a while. Okay. The ticker just changed the other day and then it popped like today. Okay, so let's take a look.  As far as I know, yeah. Okay, so it has here that, you know, is exploration and development company in Australia and Libya. I don't see anything here, but there's no doubt you get a nice pop from a dollar to a dollar 44 out here. Let me just see this, okay, so. They were even less than that for the longest time. No, I know, no, like I can see that. I can see that the, you know, the, yeah, there's nothing out here, Philip. I'm not, I don't know, man. The good news is that, you know, you get an equity that was at a low and now it's at a buck 44, you know what I'm saying? Yeah, you know why companies just change their tickers like that? Because I don't want to be the bearer of bad news, man. But when you look at this, okay, so check this out.   So, and their issue information, if you look at the issue, this is pretty wild, man. I mean, 2017, they issued 133 million shares at three cents. Then 2018, they issued 173 million at five cents. Then 2021, they issued 114 million at 10 cents. And then in April of this year, they issued 185 million at 22 cents. Yeah, so, you get a crapshoot here, man. You have a crapshoot. Yeah. Maybe I'll close it out today. Hey, yeah, the sooner you can close it out, man, I think the better off you're gonna be. I mean, $68,000 for a year is pretty intense, right? Yeah. How's everything else going, man? Good, good. You still biking? You going out this weekend? You still biking? Yeah. It's so freaking hot. Yeah. So hot, man. I know, I know. I found a nice park in Tampa last week. Oh, did you? Which was nice. Cool. But if you don't go out early, you'll just have a stroke. Yeah, seriously, man. You need those salt pills, man, no doubt. Well, listen, man, it's always a pleasure, man. Thanks, Tommy. Have a great one, man. Have a safe one. All right, go ahead. So, this company. Yeah.  Right. And people are still buying it? Yes. Where do they claim it? Why should people buy it? The amazing part about the stock market is that you can get listed pretty easy. OK. And that company that we just brought up is on the over-the-counter NASDAQ, OK? So the way it works, as long as you basically send in the paperwork that you want, they'll list it. And then the key is just to market it and, you know, you're telling a story and, you know, you're supposed to be able to be making money. I mean, that's the reality. In their case, they're saying they're an exploration company. And when you are an exploration company, you're never making money. I mean, I've had, I own Vista Gold right now. There's zeros right across the deal. You know, I know they have an asset, though. OK. The asset is a very large gold mine. But what does happen is that Vista needs a partner to develop that gold mine. I see. And so, you know, bottom line, until you have that, you have nothing, really, you know. But there's plenty of equities that, you know, have nothing.  There's no, there's no doubt about that. You know what I mean? Yeah, no, that's just amazing to see, you know, there's just no revenue and there's people are so buying it. Let me tell you, when I see those up, then I look at TFA and I'm saying to myself, man, are you kidding me, man? You know, it's like, yeah, you get the jish, right? It's like, are you kidding me, man? I, at the beginning, like 20 years ago, I couldn't even understand how it could happen. Just like you, are you kidding, right? But that's how it works, you know. And there's plenty of folks that specialize in it, actually. So there must be some success stories, right? Yeah. Yeah. Yeah. There's not a lot. There's not a lot. Not, not in that context, but they're out. And that's why that whole penny stock deal, that's why people do do it. I mean, there's one out of 99. Might have that Wolf of Wall Street movie. It's, it's, that's a beautiful, you know, yeah, example. Yeah. Huge example, huge. So it looks like everything's red, huh? Everything's red, man. Everything's red, but that's all right. What's, what do we have left? We have a third, what, we have 36 minutes left. I think it's going to stay red, but as I, when I was just coming on, see this, the top one that says 31, 61. Yeah. I suspect that's going to get to 31, 67. And we'll kind of see what happens at that point. And why do you think it's going to go to 67? Because what happens is that, you know, I'm all about pricing volume, man. So, so, check it out. Here we go. You look at this, and you're going to see, you get the pop, right? See this right here, that's the last place that we went down with volume, where I got that. Yeah. That's, you know, that's 59,000 contracts. That's the last time we came down with volume. So what ends up happening is that markets like to go back. That's where the buying and selling is basically even. You know? Now, if we get, this is what's happening right now, this last 10 minute bot, folks, we got volume, and we got 30,000 contracts, which is not bad. We're going to be going into that 59, though. So, it's going to build a little cause there in order to blow through that. Hey, we'll see where it goes, man. Pretty cool. So, real estate-wise, right? Listen to this, folks, okay? We're going to talk about this a bit, because this is really a trip. I want to talk about, you know, you went to the, the VA and the FHA. Yes. Right? So, when you hear this, for all you guys, veterans and women out there that are veterans, this is really a trip, man. Yeah, I'm surprised I didn't know this either. Yeah, I knew part of it, but I didn't know the other part of it, right? Yeah, this is crazy. So, VA and FHA, there's a no minimum credit score limit, right? So, according to the federal government, so these companies, when they're selling this, they put their own limits in there. Right. Because they're going to go out there and sell it, so they just want better products. But there are companies out there that will, you know, loan you money on a VA with, like, no credit limits. Right. And that's going to be shocking, folks. We're going to talk about this when we come back, just so you can understand, you know, what Bessford just said. What he said specifically is the rules say there's no credit limit. And there's plenty of companies that say, no, no, you need this amount of credit. But guess what? We know, because he just went to a seminar, we know that there are brokers pushing paper that are saying, okay, we don't need a credit limit. Yeah, yeah. Pretty crazy. That's insane. Totally insane. Stay right there. Bessford and I are coming right back.