Bootstrap 5 Full Course 2023|| Bootstrap zero to Mastery || Bootstrap Full Tutorial

hi everyone and welcome to this course on bootstrap 5. in this course you will learn how to design a website with the help of bootstrap 5 you will also learn how to minimize the usage of CSS with the help of bootstrap you have to keep in mind that the main objective of bootstrap is to minimize the use of CSS because you know like building a website with CSS takes so much time and so much effort and energy and that's why it's better to use like a predetermined templates and predetermined lines of codes with the help of bootstrap 5. so that's what we're gonna see in this course we're gonna see how to minimize the use of CSS and how to use utility classes to design the website bootstrap is one of the most popular front-end Frameworks for developing responsive mobile first websites so that is basically what bootstrap does it's a framework of CSS which helps you in designing an attractive and responsive website this framework exceptionally enhances the entire Outlook of your website so bootstrap does an amazing job at making your website beautiful and it also makes an amazing job at helping you create this page in no time bootstrap 5 is the latest version of bootstrap it's one of the most used Frameworks of CSS with the help of this framework you can design your website in an exceptional Manner and by only using a few CSS properties the main motive of using bootstrap is to minimize the use of CSS do you know why it's because the use of CSS makes the code lengthy and prominently adds to the size of the file as a consequence the risk of Designing a slow and unresponsive website increases however with bootstrap 5 you can get the same result as with CSS but by only using three to four bootstrap classes instead of 10 to 11 CSS properties in other words bootstrap 5 is here to make our life easy and to help us save time so that's the goal of bootstrap 5 and that's why we use it it makes our life so much easier it saves us time and it helps us create amazing websites all right so again why should you use bootstrap 5 as I told you earlier the main purpose of using bootstrap instead of CSS is to minimize the code lengths and the file size in this way you can have a faster and more responsive website without having to deal with the lengthy code the advantage of using bootstrap is that all of the responsive templates come packaged with pre-styled ready to use components so everything comes packaged for you just use with pre-styled ready to use components so all you have to do is just to incorporate those pre-built templates and include them in your website design let's now explore how bootstrap 5 works so bootstrap is a collection of different classes of CSS that are coded in a way that does not add to the size of the file let's go to the bootstrap website where you'll learn how to use this web designing framework as you can see on your screen I've already opened my browser here I write bootstrap in the search bar and press enter now you can see multiple options on the screen I'll click and follow the first search result this is the official website of bootstrap first of all I'll visit the get started tab of this website here is a little introduction to this useful framework okay let's now discover the customize tab inside the customize tab we go to um okay let's go to the components tab and begin by designing buttons so to design a button using CSS you have to use approximately 20 different classes but in bootstrap you just have to specify the type of the component in this case it is button then you'll need to use a single class and it will automatically creates the button you want all right so what is the limitation of bootstrap the only limitation of bootstrap is that it offers limited options when it comes to colors but that is not a major issue it is because you can easily customize the color by using bootstrap with some CSS you can easily use CSS to change the color of the bottom but for now I'm just providing you with an overview of how bootstrap works all right so do you see how all these multiple functions are working because of a single class here the type button and the classes are specified and they helped us create this button the color options are categorized as a primary secondary success danger warning info light and dark you can also manage the size of the buttons as large or small you also have different options to customize button controls as you can see and slide controls are also there it is such an easy to use framework you can incorporate any of these bootstrap functionalities by copying the component codes pasting them into your code editor and linking them to your website alright so that was it for the overview of this amazing framework let's now talk about the different versions of bootstrap the latest version of bootstrap is 5.1 X but always be careful about your bootstrap version never opt for a beta version that is temporary and is designed to Simply test and generate user feedback and responses on some features that are still under development if you use the beta version once your work is complete and once the beta version is removed from operation you will lose all the work that you've done using that version so that's why it's better to avoid using the beta version all right and now on to the next lecture there are two different ways of using bootstrap 5. the first way is to use the CDN link the other way is to download the bootstrap file CDN stands for Content delivery Network technically CDN is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are cdn's cache content like web pages images and videos in proxy servers near your physical location all right now when it comes to downloading you can also get access to a file that you may link to your code edit Better Learning Experience in the last video you learned that there are two different ways of using bootstrap 5. one way is through CDN links and the other way is by downloading a file using CDN links is an easy way out as you can see on the screen you are provided with a CSS link and another Link in JavaScript you can copy both of these links in case you are unable to find these links anywhere on the website you may search for them in the docs section of this website find them copy them and then move them towards your vs code as you can see here I have a folder named bootstrap in my vs code here I will create an index file with an HTML extension keep in mind that your bootstrap file will work in the form of HTML tags only here I will write bootstrap inside the title tag of HTML then here inside the H1 tag I write this is our first bootstrap class I save it and I paste it into my browser to see the result now let's check what is its font size and font style so it's font size is 32 and the font style is times the enrollment now I will use the bootstrap CDN link to change the style of what appears on my screen I will simply copy the CDN link from the website and paste it after the title tag in my vs code this is how CDN links are used you cannot post these links anywhere except in the head tab so be careful you just can post them in the head tag so the only way to ensure that these CDN links are working well is to put them inside the head tags currently you do not need to use the JavaScript link but these links are required when you design components that may collapse like when you need to show and hide content now it's time to try the second procedure by using downloaded bootstrap files now I will download this bootstrap file in my system while showing you the right way to download it I'm going to the official website of bootstrap I download the latest version of bootstrap on my desktop and as you can see here it's in my download folder on my system it will take some time for this file to download but once downloaded um we can move on to the next step all right so I've saved all the downloaded bootstrap files in this folder the key aspect here is to keep your files in an accessible location or in the same folder of a drive it makes it easier for you to define the paths when needed that's why it's better to keep them in the same path okay so go to that folder and open CSS click the main file of bootstrap you can directly save it here to keep your folder organized but you may also save specific folders for grid relation and utilities however most people prefer using the bootstrap CSS file I'll go to my vs code I've removed the CDN link let me split the screen and show you what the web page looks like now I'll use the file that I've downloaded I'll use the bootstrap folder in this link then I'll use the CSS folder after that I'll use the file name bootstripe.css from this folder okay let's refresh the file in the browser and here is the output so we can have the same results by using any of the two defined procedures however to use bootstrap 5 with the help of CDN links you are required to have a working internet connection but if you download that you have the file saved on your device it's okay you don't need an internet connection that is the only difference between both procedures between having to use the CDN links and between having to download the files to your system all right and now on to the next lectures in which you'll learn how to use bootstrap classes in your vs code all right let's now talk about bootstrap breakpoints as you can see on the screen I've opened a bootstrap 5 support page called breakpoints here the available breakpoints of bootstrap are discussed in detail the web page displays the breakpoints of bootstrap 5 along with their class infix and dimensions class infix just refers to the tier of classes that we'll be using the X small breakpoint has no class infix it is for the dimensions that are less than 576 pixels for small breakpoints the class infix used is SM and it's for the dimensions greater than or equal to 576 pixels MD class infix is used for medium breakpoints and it's for the dimensions greater than or equal to 768 pixels similarly the large breakpoint is represented using LG and its break point are greater than or equal to 992 pixels it means that the medium breakpoint cannot be larger than 992 pixels in dimension after that we have two other breakpoints extra large and extra extra large that are represented using XL and XXL respectively so when the large Dimension reaches a break point of 1200 pixels it is considered extra large and when the extra large reaches a dimension of 1400 pixels or greater it is considered as extra extra large this is all about the breakpoints here they have also discussed the SAS breakpoints if you don't know what SAS means here is a definition for you so basically SAS refers to synthetically awesome style sheets SAS is an extension of css3 adding nested rules variables mix-ins selector inheritance and more all right it's now time to conclude this lecture you will learn about changing the color and background of the text in the next lecture in the previous lecture you learned how to download and use bootstrap how its classes work and what are its break points now you will learn about the different colors of the text available in bootstrap here I will write H1 as hello word and save it now I want to Define its color I write class text okay so since I don't know what to put here I'll press Ctrl spacebar by default its color is black but I'll select the primary color and save the code and as you can see the color of the text has changed in the browser window we have a limited option of colors other than primary now I'll select secondary and save it and here you go just take a look at the results the color has changed to a lighter shade of black if I use info in place of secondary the text will appear in light blue if I choose to use warning the text appears in yellow and for the danger it appears in Red so the actual colors relevant to these classes are showing up similarly again change the color of the text in a paragraph you can also have these color options for the background so keep in mind that multiple properties can be used in the same class even though you just have a single class in the element with a paragraph tag for example you'll see how we can change the text color as well as the background color with the use of a single class all right so now I'll change the background color of the paragraph let's set it to Black and here you go then we can do the same with the H1 tag and here we go so this is how you can design the text of a website in the upcoming lectures you'll be introduced to the concept of customizing bootstrap classes in the previous lectures you learned about the process of changing the text color as well as the background color of the text in this lecture you'll learn how to customize the bootstrap code to use colors other than the ones offered in bootstrap 5. here I'll use a paragraph and I'll Define its class as text info just look at the screen in front of you you can see that the text color of the text has changed to Blue since you've already defined the class you cannot Define multiple classes but you can have multiple values for that defined class so let's define the background color is dark now I want to customize this color how can I do that to be able to customize the color I'll use the style tag and create a style sheet I'll define a class first because to use multiple colors on your website you need to have a separate class for each element I'll use the class customize color then I use the aqua background color but as you can see on the screen the customization did not work do you know why do you know why it didn't work it's because I've already used the bootstrap class to define the background color okay so to fix that I need to use important and save it okay so I'll basically need to use the exclamation mark important and save it I'm doing this to specify that I want to display the customized color irrespective of the bootstrap class that I've used in other words by default the bootstrap class Works before the CSS class but but if you want to reverse things around and apply your defined CSS styling you'll need to use the exclamation mark important property every single time this property adds more importance to property or value than normal so that's how you solve the issue you just use the exclamation mark important property right now you're having a look at a website called meta brains this website displays a few columns and cards related to courses in this lecture you will learn about how the grid system of bootstrap works and how you can incorporate it into your website using breakpoints because when we use a grid system there is a dimension at which we've to use media queries the use of bootstrap reduces the use of media queries in CSS alright let's now move on to the main topic of this lecture So currently the large screen that you're viewing here has a width of 1700 pixels approximately the three cards displayed in the two rows will split further into rows after a certain breakpoint as you can see we now have three rows with two columns each always be careful about responsiveness and focus on avoiding the use of the scroll bar the scroll bar is not the best way to explore a page it will create an issue on your website all right so upon bringing the widths to an even smaller value The Columns will arrange themselves in the form of a single row we've now reached the minimum possible value for of the screen width I don't think there is zero I've used a CDN link just to avoid having a source link issue I've used my CDN link here and not a downloaded file so we already talked about this before downloaded files will provide the source code file and it won't be an issue to run the file see the end links always work on the internet but the downloaded file need no internet to work so it's a good practice to use the downloaded file for production and not the CDN links okay so now I'll create a div and Define the class as a container I'll Define another div with the class row this is a key concept always Define div of classes container and row when designing a grid system it is advised to use container fluid to avoid having extra space error or a scroll bar if you don't Define the class row your grid system will not be displayed okay now I'll Define a div as columns 1 2 and 3. let's now Define a background color success for all three columns The Columns are now having a background color of green now I'll copy and paste the same code twice can you see how the number of columns has been Multiplied on the screen after a certain break point of the width size on the screen the data collapses and the text shifts to the other row we use bootstrap to avoid facing the problem of the scroll bar and make our website responsive and adaptable to different screen sizes another noteworthy Point here is that we've not yet defined the width of the screen in the cold class it means that we've not yet specified the screen size in the next lesson we'll play around with different screen sizes large medium and small and see how the results differ but in this lecture as you may have noticed whenever we use coal our page used a predefined width automatically but in most cases we Define the screen size as large medium or small so we'll see how all of this works in the next lecture all right and now on to the next lecture all right so in this lecture you'll learn to use the main grid system by targeting specific screen sizes you've previously learned that whenever you intend to use a grid system you must define a class name container fluid and then you define a div of class equal to row now just look at the screen I use six div and label them from one to six just look at the output on screen now this div is not displayed in a single row do you know why it's because I have not defined them using a bootstrap class all right now I'll define a class call in each of the six div and as you can see the width has now been defined equally amongst all of them next let's say I want to arrange these six divs in two different throws so what should I do oh by the way in a grid system you can create only 12 columns in a row let me show you so I'll add dash one to the call and each of the six divs it means that now every div will consume the width of one column only the number one that we added simply defines how many columns will be there when you add dash one it means we're consuming one column out of the maximum of 12. for this div alone then one column for the word two then one column four the word four then one column for the word five and so on for example if you want to have just two columns in desktop screens and phone screens you could use two call dash md-6 for your desktop view and two call Dash xs-6 classes in your columns for your mobile phone screen because the max is 12 columns remember that the maximum is 12 columns anyway if this sounds confusing to you just dismiss what I just said we'll see a concrete example right now all right so I'll copy and paste this six div which means that the total number of columns is now 12. after that I change the column size of the last div from one to four it simply means that we want the last div to consume four columns but unfortunately as you can see we don't have four columns available in the first row so the output is now showing us 11 columns in the first row and the rest of the four columns will be displayed in the next row automatically because as I said before there is no place available anymore the maximum number of columns is 12 and when we want to consume four more in the last div there is no space for it all right so keep that in mind Arrow can hold a total of 12 columns only now I'll change the width of the fifth div to six so the fifth column will occupy the widths of six columns and as a consequence the remaining columns will be shifted to the next row this becomes evident when I change the background color of the fifth div okay so if all previous explanations sounded complicated to you then I hope that by changing the background color things are clearer to you now as to how the div for five consumes six columns in this way we can customize the grid system as per our requirement or as per our clients requirement okay now if I do the same for the div of two you'll see the output the same happens the div of 2 consumes five columns and everything else will be shifted okay so as you can see now if I change the width of my window things will remain pretty much the same all right now what if you want to work with a specific screen size such as large medium or small to do that let's comment on the already generated div and create a new div having a class call and multiply it by 12. I'll save it then I enter the data in each div okay now if I want to divide them how can you do that for instance what will you do if you want to display four div in a row on a large screen you will simply Define the column width of each div as three and Define the screen size as large LG similarly you will specify the screen size as medium and Define the column width as four and for the small screen you will specify the column width as 12. you will have to Define these specifications in every div now save and refresh to see the desired result on the screen and as you can see I've got three rows with four columns in each row right now we are working on the large and extra large screens when changing the width size you will see the specified number of rows and columns you can also change the background color of the entire grid system or you may Define separate colors for each row and column of the grid system the choice is yours if we have different colors the separation will be more evident another thing to note is as you can see there is no space between the rows and columns this is something that we'll talk about in the next lecture all right let's move on hello and welcome to this new lecture on gutters and bootstrap as you can see on the screen I've already created seven different divs in my vs code how did I create these divs well I created seven divs with a container fluid class and then I defined a call row with a column width of four additionally as you may have noticed there is no mention of the screen size here I've simply specified that I want four columns in a row irrespective of the screen size I have specified background color as primary we've talked about this in earlier lectures all right so the main purpose of this video is to teach you how to put space between the divs here as you can see the divs in the same row have a space between them while the divs in the same column have no space between them to tackle the situation all you have to do is to make some changes in the class row simply insert G5 which means gutter 5 refresh the page and here you go we have our output this is how you do it now let's have a look at the space by pressing F12 which represents the developer tools I'll click here and you'll see dot G5 and Dot gy5 it's showing in the spacing REM here now let me tell you how to determine the actual value of the gutter look at the screen the space of each gutter is 1.5 REM which is equal to 24 pixels if you want to verify this and see what space you will get beforehand you may simply visit the bootstrap website to check the gutter variables so after seeing all of this how can we Define gutters like what is gutter it is simply the space between the boxes the tunnel between two divs there are only two ways of using gutter you can either directly Define a gutter value or you may associate it with the x-axis or the y-axis as per your requirements now regarding the value of gutter it ranges from one to five this is how the gutter property Works in bootstrap 5 basically and now on to the next lecture typography is one of the utilities of bootstrap bootstrap includes dozens of utilities what are utilities they simply represent classes with a single purpose and help in reducing the frequency of Highly repetitive declarations the typography utility helps in managing the font size using bootstrap do you know how here I've taken a paragraph inside which I Incorporated the text of hello world I saved it and it's been displayed with the default font size but I want to have a font size of H1 this utility is thus used to give your normal text the font size of the heading tags I can simply add here class equal H1 and will have what we want now let's take a span tag and write this is his pen I save it and then add here class equal H3 and as you can see now the text has changed the font size of H3 there is another interesting thing that falls under the umbrella of typography let's discuss that using a div tag saying this is a div I'll Define its class as display one and as you can see the font size of display 1 is greater than the one of H1 but its boldness is lighter as compared to heading tags the greater the number of display tags the smaller will be the font size display 6 is the smallest one we'll now discuss another class let's define a div tag as simple text now you want your simple text to appear bold on the screen if you don't wanna make your text bigger or smaller and you want to make the text bold we'll write only class f w Dash bold you can see that my text is bold now if you compare bold class with bootstrap 4 then the Bold class and booster 4 is called font weight bold but now with bootstrap 5 it's been updated to FW Dash bold I will simply Define the class as FW dashboard I hope that it's now clear to you how we can change our normal text to heading and how to make our text bold while using bootstrap classes and now on to the next lecture in this lecture we're going to do the classes related to images let's start with the image tag select the source of your desired image and save it can you see the scroll bar in the bottom here this is because the file is not in full screen mode but when I go to full screen you'll not see any scroll bar okay so to solve this problem I'm going to add class I I'm gonna add a class named image img's Dash fluid this class will automatically convert the width of the image to 100 and the height will be adjusted according to the height of the image you can see now that no scroll bar is displaying here if I make the screen full size then the image will look like this but if I decrease the width of the page then the image will fit in okay now if I give the class as image thumbnail you will see a white border displayed around the image another tag of images is rounded it will not apply here as we've already used another class by using the round property the corners of the images will be rounded let me take another source of images by images PNG you can see a new image displaying on our screen now we need to adjust the width and height of both of these images I'm giving the attribute of width and height to both images 200 for the height for the first one and 200 height for the second one I'm also taking a width of 200 for the first one and the same for the second image in the first image you can see that there is a space on the upper part of it that is because I've used the thumbnail attribute now I have removed the image thumbnail and you can see that it is equal in size image thumbnail centers the image of the div and it also makes the corners of the images rounded you can see that both images are in the beginning okay let me give you another class for both images which is float start can you see that the image are at the beginning and that no effect is applied on them so I'm giving the name of the second class as float and and as you can see on your screen the second image has moved to the right it can also move the image to the center okay so now I'm going to take a div with class text Center here and put an image tag and give an image source now my image is displayed in the middle because I gave a class of float start to the first one and I gave a glass of float and to the second and gave a class text Center to the last one that's why it's being displayed like this in the center the class with our text Center will work on our text and also on our picture so that we can use our class in this way in this lecture you'll learn how to create a table using bootstrap it's similar to creating a table in HTML however with bootstrap you can change the entire Outlook of the table using a single class to begin with I'll use a table tag and then I'll use a said tag inside this tag I'll introduce a TR tag and a th tag for heading I'll copy the th tag and paste it for four different headings I'll Define the th values as hashtag first second and third respectively following that I'll begin another block of body tags I'll again create a TR tag and a th tag that will highlight the text the next step is to create a TD tag with den and another TD tag with Allen and yet another with Joe this will separate the columns and rows giving you a table like the output that you see here in front of you now what if I remove the Allen tab as you can see will now have three columns on the screen I'll go to the then and type columns pan too and this is how the result appears I will now make use of a single class to beautify the table I'll edit the table tag by defining a table class from bootstrap just look at the result on the screen in front of you what is stylish output I have here in front of me you can now customize the BG color text color font or font style as per your choice do you see how easy it is to design a table with bootstrap so buy now you must have developed a thorough understanding of how easy it is to use bootstrap and now on to the next lecture all right so in this lecture we'll talk about the most important properties without which working with bootstrap is useless and these properties are margin and padding so if you study TSS in detail you must be familiar with these properties and using these properties is a bit complicated in bootstrap 5 because the names of the classes in bootstrap 5 have changed I'll show you what I mean okay so here I'll use a div tag and write lorem in it I save it now I will assign to it the class I change the text color to light and the font style to bold okay so let's use the classes of bootstrap I write the margin here if you want to give it from the top use empty and if you want to give it from the bottom use m b b stands for button T stands for top okay so there are five values in total here the value of zero is zero the value of 1 is 0.25 REM the value of 2 is 0.5 REM 3 is 1 REM 4 is 1.5 REM and five is three REM in this case we cannot give margin from the bottom since we have no element in the bottom so I'll give the margin from the top let's say five and you can see the result okay so if you want to use padding the same process will be applied like here I'll write p t Dash five I save it and this is what it looks like okay now the issue is that new users are unable to figure out the way to give margin and padding from left and right so previously in bootstrap 4 we used to write pl-5 so else was used to mean like left but unfortunately as you can see it's not working okay so now I I'll write like ps-5 it means padding from the start S5 and P E-5 meaning the padding from the end is five so basically this solves our problem and that's what you should do in bootstrap five that's the syntax used in bootstrap 5. Okay so bs5 meaning uh the padding from the starters 5 pe5 meaning the padding from the end is five and in a similar manner we write like ms-5 and me-5 this means the margin from the end and the start is five okay then I'll write P b-5 I'll save it and this is what it looks like now let me tell you one thing we've discussed different screen sizes related to the grid system like large small extra small Etc so we'll use these properties here as well like how we can display our content considering the green the screen size we'll see it right away okay so first of all I remove all of this I write Mt Dash l g Dash five Mt md3 mtsm0 and save it and you can see the result the margin on the large screen is 5 and as I'm reducing the screen size the margin has also been reduced to three okay so remember one thing whenever you want to display your content on a specific screen you have to use all the properties related to the screen size to the specific screen size that you are targeting for example you can use like a large for the large screen size small for the small one and medium for a medium screen size okay in a similar manner if you don't want to specify a certain size you can write zero instead like when you write 0 you're not specifying any particular screen size so at the moment my margin from the top side is zero and the medium is three if I delete the margin from the top my browser will understand that I want to keep the same size for the medium and the large screen but if I want to give a margin of 0 to the large screen I have to give Zero from the top side otherwise the browser will give me the same size to the large and the medium screen okay so if I reduce the margin to zero you can see the margin has disappeared from the large screen so that's the only novelty or modification that happened with bootstrap 5 it's regarding margin and padding they are now called the start and end values instead of left and right I hope that everything is crystal clear to you now and now on to the next lecture let's now talk about form control so the form is a major part of our website and almost all websites use this property along with the form submission property now the question is in what ways can we make our form presentable and attractive so here I've used some of the form some types of forms like email address and password you can see the value written here is the default value which is shown because of bootstrap okay so I'm adding a random value here now if I delete this part this is what it looks like so if I uncomment this link tag you can see the result next we'll use a few classes which will make or form more attractive so I saved the file with the name formcontrol.html you must know why I have used the placeholder property here and when it comes to the type property it's used to limit the input that the user can insert in the box like here he can only enter a valid email address now I write input equals to submit I save it you can see this function is not working because we haven't used the form tag so I removed this part from here and paste it into the form tag now I write the email address press on submit and as you can see it works perfectly this is how you can restrict your user to submit only valid data now I'll use a class that will make our form a little creative can you see this the whole layout of the form has improved by using a single class there is a box Shadow here and the width has also been applied automatically if I maximize the screen the Box will automatically adjust its widths now I'll copy the class and paste it here save it I save it and as you can see we have the result in front of us I'll use another class with the name form Dash label and you can see the space over here has been adjusted I'll also copy this and paste it here and this is what it looks like okay so I've mistakenly used the input twice here I will remove it and here we go now I use one more form control class for the password I save it and you can see the result all right so that was the first lesson about form control in the next lecture we'll discuss this property in detail let's move on all right now we'll learn how to make a drop down using the select element so if you studied HTML you must be very familiar with this already um all right so we use the selector attribute for the default value but in bootstrap yeah I mean in HTML we use the selector attribute for the default value but in bootstrap we learn how this property Works in detail to make our website more responsive and presentable so let's see what's the equivalent in bootstrap all right so before starting this lecture I must tell you that we need to link this CDN link otherwise the drop down won't work this is because it contains some JavaScript coding which is necessary for the drop down to work okay so now I'll tell you how to copy this link so first you have to open the bootstrap website and in front of you there is a CSS and JavaScript link and you can easily copy it by clicking on this button here you can also use a downloaded file which which you already talked about in previous lectures so I'll go to the JS folder and you can see this one or this bootstrap one okay in my case I'm using a CDN links because it helps uh in running the file faster now what's the main purpose of this we saw that the whole look of our form had changed by using a single class here also use a class with the name form select and I'll save it and you can see as I click on it this is what it looks like you can also customize it but it's not necessary at the moment now let's adjust its size okay so here I'll copy it and paste it and save it then I write form select LG and you can see the size has increased here I write form Dash select Dash SM and you can see the result this is how we can easily work on the sides next we have multiple lines like if you want to display this part of the drop down only we can do that by using the multiple attributes so here I'll use the multiple attribute and save it and you can see the drop down is not displaying okay so if I write more content here you can see that a scroll bar has appeared yeah you can see the scroll bar in front of you okay so you can also use this property here I'll specify the size let's say five and save it and you can see the result if I increase the size to 6 the scroll bar would disappear and if we increase the size to more than that the scroll bar would appear again okay so here I write size equals to 7 and you can see the scroll bar has disappeared so there is another property known as disabled like if you want to disable any input so I'll copy this part and paste it here then I use the disabled attribute and you can see the result if I remove the size from here this is what it looks like so one thing I wanted to tell you is that bootstrap is always preferred over CSS as we used a few classes to make our form creative however whenever we work in CSS and HTML we have to use multiple classes which waste our time and yeah so that's the huge advantage of using bootstrap it saves us so much time and makes our life so much easier all right so that was all about select form and now on to the next lecture all right as you can see here I've taken a div and used label and input tags in the input tag I've written type equal checkbox and I wrote default checkbox in its label and in the label tag I've written checked checkbox thus whenever the user visits the website he can see the default checkbox there now I will uncomment this link here I'll save it and you can see the layout of the form has changed so in this lecture we'll look at everything in detail like how to make the checkbox and radio and bootstrap and yeah that's what we'll uh explore in this lecture okay so we just have to use a few classes and we'll be good to go so first of all I use a div and assign it a class form check then I save it you can see the result now it has taken some margin automatically I'll copy this and I paste it here after that I'll use a class form Dash check Dash input I'll save it and you can see when I click on it the color will change I copy this class as well and I paste it here and as you can see the color of this has changed as well if I refresh the page the checkbox will be shown by default if I remove this from here and paste it there this is what it looks like this is how we can make a checkbox if you go to the bootstrap website you will see that they have so many classes and some of them are not useful for beginners so for now we're sticking to a straightforward classes and yeah that's what we're exploring in this lecture so here I'll tell you about a few classes with which you can quickly make a checkbox now let's talk about another class radio so I removed the checkbox from here Android radio and this is the result the issue here is that when I'm selecting one radio the other one is selected as well so I'll write name equal input Dash radio I'll save it I'll copy this and paste it here make sure both names are written there otherwise you won't be able to select it okay so if you want to disable one of these you can do that too here I'll write disabled attribute so I'm using the disabled attribute thus the user can't click on it then we have another class known as switches firstly I'll copy this and I paste it here then I changed the default checkbox to default switch and I save it now let's add the class equal to form switch I save it and as you can see we have the result in front of our eyes okay so I removed this part and I change the type to checkbox I'll save it and this is what it looks like if you write radio here you will only be able to select it but you can't remove it then okay so if I write check here this will be selected by default so this is how we can use different inputs to make our form attractive and now on to the next lecture all right so in this lecture we'll discuss the range and its classes in bootstrap so first I'll use a label and write select range I'll save it now I'll create the input of type range and save it this is what it looks like okay then I'll use a class with the name form range and you can see the results if you want to decrease the range you have to use the grid system for that we'll do that after creating a proper form now I'll specify the minimum and maximum width let's say Min equal to 0 and Max equal to 10 I'll save it and you can see the result if I remove the Min and Max you can see that it is smoothly passing through the range but if I write the range the range is fixed on a specific point rather than going smoothly if you want to specify the step like here I'll write step with value 2. you can see that we can select the point at 0 2 4 6 8 and 10. I hope it's clear now to you and now on to the next lecture so in this lecture we'll create a form layout and learn how to divide our form into groups first I will use a div tag with class attribute and then I'll use this pen tag in which I'll write username so here I'll write input uh I will use input and write type equal text and the placeholder equal to name I'll save it and you can see the result now I'll change the layout of the form by using a few classes in this div I'll use the class input group then I'll use another class here with the name input group text I'll save it and you can see the light background color on the screen now I will write a class in the input tag with the name form Dash control I'll save it and this is what it looks like I've written some random words and you can see the results like this after that I'll use another div and use a class with the name input Dash group I'll save it then I'll use input android type equal text and class equal form control and this is the result now I'll use this pan tag and write email you can write whatever you want I'm just giving you an example and I save it okay then I copy this class and I paste it here and you can see the result I will use a placeholder here and write email and I save it now let's move on to our next step here I will use a label and write class equal form Dash label this class helps in adjusting the space then I'll write enter your ID I save it and then I'll use another div in this div I'll use the span tag and write enter your URL and I save it after that I use a class input Dash group Dash text and you can see the result now I'll use input tag and drawing type equal to text and the placeholder equal to the website link and here I write class equal to form control and this is what it looks like so the grouping is still left so here it will copy the input class and paste it and as you can see these are so close to each other so I use a margin from the bottom let's say three and as you can see there is some space between them now okay so I'll copy this and paste it here and you can see the result now I'll use a div Android class equal to input group because whenever we want to make an input group we have to use the input group class after that I'll use an input tag and use a class with the name form control you must be finding this convenient as I'm using the same classes so here I write placeholder equal client name then I'll use this pen tag and write contact I'll copy this and I paste it here then I save it and it looks perfectly fine okay so I just change the placeholder here and write email and as you can see this doesn't look so good so I'll go to this pen tag and write class equal input group text I'll go here and write mb-3 to create some space so the class isn't working here so I'll go to the div tag and write mt-3 I'll save it and you can see that it is working now let's create the text area in the last one so I'll use a div and write a class with the name input group I'll save it and then I use this pen tag here I'll use another class with the name input group text and you can see the result I think I made a mistake here so let me delete this and then I use a class in the span tag with the name input group text and then I write description I save it and then I use a text area element and a class and as you can see it looks a little bigger because it has so many rows and columns so I remove them and you can see the result now remember that whenever you're making a form you have to use a form tag I'll show you how to do that so here I'll use the form tag and delete this part and as you can see we have the result on our screen all right so it's important to use the form tag otherwise the functionalities won't work all right and now on to the next lecture in this lecture we'll use all the classes that we used in the previous lessons related to the form first I'll use the div and add a class with the name container fluid then I'll create a form and here I'll use a class with the name row g-3 after that I will make another div and use a class with the name call Dash lg-6 I'll save it then I'll go here and make a label I'll make a class with the name form label this will help to identify the label so here I'll write username I save it and that's what it looks like okay now I will add an input tag and add a place holder with the name username then I will add the class with the name form control and I save it and you can see the form is taking the entire width I want the username and password in one line so here I will write password and here as well okay I save it and this is what it looks like I haven't changed its type here I'll change it and then I save it now you can see the username and password are shown in separate rows this is because I've used one div here so I removed this and I make another div and I'll paste it here then I'll use a class with the name call Dash lg-6 here I write the size of the medium screen and small screen this means the username and password will be shown in one row on a large and medium screen but it will be shown in two different rows on the small screen okay so now I'll copy this and I paste it here I'll save it and you can see the result now we'll move to the next section here I'll use another div and I write class equal call Dash 12. then I'll use the label and write class equal form Dash label I save it after that I'll name it email I'll make an input and write email then I write class equal form control and I save it here I write placeholder equal email at com now we'll write some addresses so first of all I'll use div and add a class with the name call-6 this means all the inputs will belong to column 6 then I'll use the label and write address one here I'll use input and add type and placeholder I'll copy this and paste it and I'll change the data so this is what it looks like and here I write address optional so this is optional okay now we'll make three tags in one single row so I'll use a div and add a class with the name call Dash md-5 I'll save it then I'll use a label and write city after that and use the input and add the type and class with name form control okay now I write the placeholder here I'll copy it and I paste it here then I write call nd4 so here I write region instead of the city I'll save it and this is what it looks like now I'll make another div and write three you can see it's coming in the next row this is because there are 13 columns here and I have told you before that only 12 columns can fit in one row so I'll change its name and write code and this is what it looks like if you want to select any text and add options you can also do that so here I'll use a div and add a class and this is what the overall form looks like now I'll use a div and add a class with the name call dash 12 and here I'll make a button so I'll specify the type as submit and you can see the button now I'll type something here and click on submit and the form has been submitted successfully so that was all about the form structure you can also use validation but you need JavaScript for that for now we're still left with a few more basic properties so let's move on and talk about them so we have covered a lot of properties in bootstrap now we'll use some advanced classes firstly I'll use a div and add an input of type text then I'll use a placeholder with the name username after that I'll use a label Android username in it then I'll use a class with the name form control and I save it I've copied this div and I paste it here then I write password in the label and the placeholder I'll save it and this is what it looks like now I'll use a class here with the name form floating I'll copy this and I paste it here too you can see that the username has entered into the input category here I'll increase the margin from the bottom to Five I'll save it and you can see the text floats when I click on it but whenever we used the control form the Box Shadow will appear so this is how we can make our text float using the form floating class and now on to the next lecture all right we've covered a lot of concepts related to bootstrap we've learned how to use different classes and other properties which will eventually help us create big projects in the future in this lecture we're going to talk about a component known as alert and all the remaining lectures will be covering the important components that are mostly used in bootstrap if you're unaware of these terms you can simply visit the bootstrap website and get the source codes from there but the problem is that the source code contains a lot of classes making the user unable written paragraphs in them I will only use a few classes here so first of all I use a class with the name alert and I save it so you can see that it has taken some space here but it doesn't matter okay so now I can select any options from these suggestions I'll choose alert danger I save it and you can see the result I'll copy this and I paste it into all the div tags and you can see the result here as well I'll change all the names here primaries secondary info success dark and I'll change the text color to light and this is what it looks like and here I write Alert warning so different colors represent different alerts and these are displayed when the user visits the website so that was all about the alerts and now on to the next lecture so in this lecture we'll learn how to make buttons as they play an important role in the formation of your website and it's easy to create them so first I'll use a div tag and use a button with the name submit and you can see what it looks like here I'll use two classes the first is ptn and the second is BTN primary I'll save it and you can see that the look has completely changed just by using uh two different classes all right so now I'll copy this and I paste it here then I write info and you can see the color has changed here I write success and this is what it looks like I can also give margin to it like here I'm writing mt-5 and you can see the result if you want the buttons in the center we write text Dash Center I'll save it and you can see the result if you want them on the right side you can write text and and yeah so in bootstrap 4 we used left and right button bootstrap 5 we're using start and end as I mentioned previously all right so this is how you can create buttons and now on to the next lecture in this lecture we'll talk about badge so a badge is a form of a label that identifies different things whenever you visit any website you can see different notifications and labels which are categorized as badges I'll show you right now so I have used an H1 tag here and I write hello inside of this H1 tag I'll save it and you can see the result then I'll use the span tag and write word and this is what it looks like after that I'll use a class with the name badge and you can see that the size has been reduced now I'll change its background as you can see that it has taken a background color okay so this is similar to the button but here we can easily adjust its size so if you want to decrease the size you have to use other tags like here if I use H6 tag you can see the size has been reduced now I'll use a button and I add a class with the name BTN bdn Dash outline Dash info and yeah so I think I haven't told you about this property in the previous lecture but this is simply used to apply a hover effect to the buttons so here I write success and this is the result now I will use another span tag and write fail I'll save it and this is what it looks like then I'll use a class with the name badge and I write BG Dash info now if you want to decrease the boldness you must know how to do that all right so if we use the h110 the size of the text will increase and you can simply increase the font size and the div all right so these are some basic concepts about the badge it's not that important it's just used to put the label and now on to the next lecture all right we've discussed buttons and badges in the previous lessons and in this lecture we'll use these to make cards so there are a few classes related to the cards that will assist us in the process first I'll use the div and write header I'll save it and you can see the result then I'll use an image tag write the source and you can see that this is the image folder inside which we have lots of images here so I'll select one of them I'll save it and you can see the image here the image is quite larger so we'll adjust it here I'll use another div and add a class with the name Card buddy then I'll use the H1 tag and write courses in it I'll save it and you can see the result after that I'll use the paragraph tag and write lorem in it I'll save it then I'll use a button add the type and class with the name BTN BTN Dash outline Dash secondary I'll draw a class with the name card footer here I will write class equal card header and I save it now I've missed one thing so I'll copy and remove this I will use another div and write class equal card header I'll paste this now and as you can see the image has adjusted according to the screen but I want the size to remain small so here I'll use a class with the name card Dash image Dash top now the results are not that effective so I'll change the image I'll maximize the screen and show you how it looks like and here you go you can see the result if you want to specify the width I'll use the style tag and write widths equal to 150 pixels this looks smaller so I'll increase it to 400 pixels and now it's okay it looks great so if you want to customize it further you can do that by selecting any class and writing important here and then you can change its color now we'll make more cards so here I'll use a div and the class with the name row because we cannot add any card without the row I'll use another div here and right container Dash fluid now I'll remove this part from here and paste it here okay so I've done this because I want to make more cards so I'll copy this and I paste it twice and as you can see there are three cards here they are collapsing a little bit so I'll decrease the width of all the cards to 300 pixels I'll save it and you can see all the cards are now in one row now why have I used the row and container fluid so if I remove the row from here you can see the cards are shown in a column and the container fluid is used to adjust the widths and prevent the scroll bar from appearing here so as you can see if I remove it the scroll bar appears like when I remove it the scroll bar appears and this is how you can easily make cards you can also do a little bit of research on Google and find out about different HTML and CSS card designs all right so I talked about the basics but of course if you want to explore this topic deeper I urge you to go and do some extra research all right I hope that this is clear to you now and now on to the next lecture all right in this lecture we're going to make a slider and bootstrap a slider is different from a carousel a slider slides the images horizontally or vertically usually horizontally usually with a momentum effect a carousel rotates the images readily and in a 3D feel by using the distance and the depths of the field the glasses of slider and bootstrap are named as carousel all right so before diving deeper into the topic I must tell you one thing you should have this script link in your file otherwise the classes won't work and as you can see here I can click on previous and next to slide the images back and forth so you can also see these indicators here in other words these functions won't work if you don't have this link in front of you here so you need to use the script link all right now we'll make a carousel for our website so first of all in order for us to make a carousel I will need to use a div and write ID equal Carousel indicators then I write class equal Carousel slide I save it now I'll use an attribute data Dash BS that Dash right equal Carousel I save it let's move on to our next step so first I'll use a div and add a class with the name equal to Carousel Dash inner then I'll make another div Android class equal to Carousel item this inner content will be shown with the help of Carousel inner and all the items will be displayed with the help of the carousel item here I'll use the active class so whenever I refresh the web page this image will be on the front all right so I'll use an image tag and specify the source then I'll select the image after that I specify the width and height here I write widths equal to 400 and height equal to one thousand I save it and here I write class equal D Dash block so that all the images are shown in one block now I copy this part I paste it here I change the images here and this is what it looks like let's move on to the next step so I'll go to the top right here and make a div I'll write class equal Carousel indicators I'll save it then I'll make a button and specify the type after that I'll write data Dash BS Dash Target this will help run the function when we click on the image I'll copy this ID here I paste it and I save it then I'll use another attribute here data Dash BS Dash side Dash 2 equal to zero and you can see this isn't working right now so I'll use some classes here I write class equal active then I copy this part and paste it there so that the indicators are shown I removed the classes from here and I change this to one and this one to two now the problem I'm facing here is that the images are fixed so I'll go there and specify the width I'll save it and you can see the images here you can also see the indicators but they are not working because we'll still need to assign some classes here so we're almost done with most of the work we just have to add the icons so that you can move through the images I'll go there and make a button I'll write class equal Carousel control prev I'll save it then I specify the type and use the attribute data Dash bs-target after that I'll copy this and I paste it here so adding the images is a very simple step the problem arises at the point where we have to link them that's why I used an ID now if I click here a cursor can be seen But I want the icons to display here so I'll write data Dash BS Dash side equal prev I saved it then I'll use this pen tag in the button I'll copy this class and paste it here and I write icon but it won't work because I haven't used the attribute if you want to write previous or bad you can do that as well so here I'll make the next icon I'll copy this I paste it here and I change previous to next so this is not that much visible because the background is a little bit lighter now these items are not working because I have used the wrong idea and I I've written like active in all the images so the browser cannot understand which one to choose I'll remove the class from these two and I save it and you can see the images are sliding now I have to use the correct IDs for the icons to work so I write ID equal Carousel example indicators and I save it this is still not working as I haven't used a hashtag so I'll put hashtag I'll copy this and I paste it here and as you can see the indicators are working now but the icons are not because there are still some issues in this part so here I have made a spelling issue I write slide instead of side and it's finally working now finally it's working this is how you can make a slider all right so let me do a little recap so the use of ID is very important because the icons and indicators will only work if we use the correct ID the carousel Dash slide is used to slide these images and Carousel Dash indicators is used to make these indicators so it's very important to remember these classes if you cannot remember them you can visit the bootstrap website and you'll see some of the carousels there and yeah so that's how you do it if you cannot remember them you can simply copy and paste uh you know like the classes you can simply copy and paste it if you cannot remember them but it's preferable to write it on your own all right so that was all about sliders and now on to the next lecture all right so we covered many of the aspects of creating a Carousel and a slider on our website with the help of bootstrap let's now move on to the next topic the most important part of our website without which no website can be built and this is navigation so I'm gonna talk about navigation and navbar which is the top slide part of the website uh represents exactly that so we call it nav bar it's the top Slide part of the website if we create this nav bar using CSS we have to use many classes and properties but with the help of bootstrap we can use it simply by writing some code of 40 to 50 lines we can create a beautiful nav bar and you can also customize it all right let's get into it first I write the navbar nav you already know in HTML that the purpose of the navbar is to create an F bar now when it comes to bootstrap all the classes and tags in bootstrap that are used under the nav bar that you see here and now they are used under the navbar and not outside of it okay so first of all I write the div tag I give a class of container fluid and save it since I've not given any test so it will not work so I didn't give any test so it will not work now I'll take another anchor tag to put the logo in the nav bar so I write here the name of the website meta brains you can see the title appears but it's underlined now to remove the underline I'll use a class of navbar brand name it's a class of bootstrap that will help me use this underline let's move to the next part so now I'll use a class of navbar one more navbar expand LG these classes identify that we're working in the nav bar I'll use one more class of navarlight to see the color and the color is light because that's what I'm choosing like I said nav bar light furthermore we'll use classes anchor tags and we'll give details regarding the pages so I write everything under this div here I create the UI and then Li name tag in the LI first I have tried an anchor tag as this is my home page I write the home page and copy it to the required pages and paste it now write the menu and save it next I'll write here about contact us and privacy now use some classes by going to the UI I choose a class navbar and I save it and yeah so do you see this the dots of the list are no longer available here now I'll use one more class of margin start Auto then I delete this because it's no longer in use right now then in all the Li there must be one class I will use a class of nav items to display the list of items also we use a class in the anchor tag nav link now where I've used the nav link the color changes to black as you can see so copy all of this and paste it okay and then we move to the next part so now we're gonna use tags in navbar you can see the list tags appear to be different and they are not in a single line so to fix this take a div and cut it all then paste it here so apparently still there seems to be no difference so we have to use some classes uh all right so I'll choose a class called navbar collapse because there are different displays on different screens I'll use one more class called collapse by using this all right and the data hides it away when it's displayed on a big screen it will be in a single line so as you can see if I zoom out on my screen you see the result now go to the nav bar to write margin start Auto and by using this data it shifts to another side and here we go you can see the result so it shifted to the other side all right now if you want to add space right five now we'll create sub menus in the menu go to the menu create a UI tag and make a list I'll create three lists so there are three dots that appear now enter the data in the anchor tag menu one now copy this and paste it the data appears but it looks so creepy so let's change this go to the main anchor tag to create a class of drop downs toggle and save it now a small Arrow appears in front of us I'll give an ID from which my data collapsed now select the menu by using the drop down and save it give it one more class of data.bs.toggle this is used to access data when clicked on alright so in the toggle I write a drop down and I save it but there is not much difference because there's something more do it to change so now I'll go to this UI as this is a drop down so we're learning about the drop down menu and then I save it and here you go the data has been filled out but there is nothing that appears on screen so to display the data we need to use classes take a class of drop down items and save it still nothing is showing up now copy everything and paste it and as you can see I've changed their names the menu is opening but not in the right order because I've just missed the class at the start of the LI drop down so here I just have to use a drop down class I save it and as you can see it's opening it the right way by using this method you can make more lists you can also divide them alright so I'll just divide it after menu two I write Li and use HR and class drop down divider you can see the division here for example see the website meta brains to zoom in and zoom out display is managed by collapse now I want that when the screen is small all the buttons appear we can create a button near the anchor tag to do this you can use a class of nav bar Toggler now you can see the button of the nav bar Toggler furthermore I write a type button and use a new attribute after data BS toggle of collapse which shows us all the data all right next under this button I'll create the nav bar spam tag span tag I'll write nothing inside this one just I just create a span tag by writing the navbar Toggler icon and as you can see on the screen in front of you this is the output that we get all right so let's change it into a button in the span class after the nav bar Toggler you can put the inverted commas now we can see a bottom all right so when the data collapses it shows in a button as you can see it's not working there all right so for it to be working go into the div tag and give the ID in F bar tab now go to the Toggler button and write data.bs.target in Target call ID hashtag now the data is being displayed by clicking on the button this button won't work on the whole screen on big screens it shows like this all right now I'll check the responses on the small screens when the button appears and here you go by this method you can create an F Bar that can be checked up to 300. all right so in the previous lecture we discussed about small and big classes the creation of navbar the carousel giving color and the workings of the grid system and bootstrap let's now see how all of this works in action how all these Concepts work in action we'll see this through a project that we'll be doing from scratch all right so using bootstrap will develop the structure for the website I hope that you do remember why we use bootstrap basically the use of bootstrap is to work quickly and the main purpose is to make the website responsive by using fewer classes let's get into it so first open a folder and make a new folder named bootstrap project selected and open it now create a file named index.html and create one more file named style.css we also have to use some CSS files in this create the folder named images just one thing you need to be careful about if you're using the downloaded bootstrap then put a bootstrap folder into this folder and attach the CSS file with it otherwise you can do what I'm doing here I'm using a CDN link I've not used the bootstrap downloaded files so you can choose the method you like all right now I'll use some images in this folder because for our website we have to use some images you can see that I've selected some images we'll be adding these images to our website so first of all I'll create the structure of HTML for example I give a title of meta brains before starting I'll add some links to it first I add a link for to link my CSS file and as my CSS file is not in any folder I write the name of the file so here you go now I'll go to the website of bootstrap and try to use those links all right so I'm on the bootstrap page I'm on the bootstrap website and here I can copy the link I need so I'll take this one this link um which represents the JS deliver section and I paste it into the CSS link now I copy the second link and paste it here so this is for JavaScript this is used for all the collapse functions all right open go live take a div tag and use a class named Banner to add some images in the background go to the style sheet if you want to open both screens use the collapse button now use a universal selector and add margin button and padding to zero one more thing we'll copy one more link of Google fonts select class and give a background image and write URL in it open the images folder use the first image and save it so it's not working unfortunately um so I'm gonna leave it like this for now because it's quite annoying for me to do the collapse men all right Now set the width to 100 percent and the height to 100 VH as this does not fit on the screen so give the background position to Center Center look at the image and adjust the background size as cover and here you go take a look at this it's awesome furthermore we'll create a navigation using the nav bar and anchor tag right meta brains in the anchor tag and save it give a class of navbar brand and change the color by using the class nav bar dark okay so if I want to use like Bold characters I'll need to write FW bold all right so it looks like I made a mistake I didn't give a container so let's give it a container let's give a container to it give a class named container if it takes so much space cut it out and paste it to the last one here all right let's use the font family go to the browser open Google fonts search for a font called Railway select the style click on import copy this and paste it into your CSS file then you save it and here you go as you can see we have an output that has changed accordingly all right and now on to the next step so create one more div and take you I and Li in the UI give it class Nev items and multiply it by six take an anchor tag right home copy it and paste it all again take a class nav link and change their names to courses Gallery features about us and privacy then you save it now to change the color take a class text light and ball text by using FW bold and save it take a look at this some dots are appearing so what can we do you can also delete these dots so in order for me to delete these dots go to u l use a class of navbar Dash nav and save it this will delete the dots now to put them in a single line use a class collapse nav bar collapse if we save it like this it will hide away by maximizing the screen because I didn't use expand largely so you can write here an F Bar dot expand dot LG and you save it all right let's Now set the margin now go to the u l take the class of ns-auto and save it it will set the margin Auto so that was it for navbar so that was all about the basics of navbar now on small screens we use elements buttons names and class by using spam tag so use a class in the spam tag of collabs.tuggler. icon and can you see this can you see the output it's great it's a small Dot and chose the Arrow by clicking on it so yeah that's what it shows us it creates small elements now we'll use some classes like navbar.tuggler and save it as I've discussed before about these classes by using the class button the dot seems bigger now I'll use the attribute data.bs.tuggler collapse and I save it now use the ID in the div tag idea with the name nav Toggler now I want to Target this ID I write data.bs.target and I call this ID using nav toggle all right so this is not working because I've written nav toggle which is wrong the correct one is nav Toggler so I I've changed it and here you go and now on to the next part now we'll customize our panel go to navbar write H1 and then learn everything in it and you save it now use classes fw.bull display.2 and here we go you can see that our text characters are in bold now text Dot Center text.light this class will Center and Enlighten the text okay so now give it Banner Dash heading and a margin of 150 pixels and save it this lag P near H1 and take some dummy text like lorem and as you can see that alarm appears here in front of you now to delete the scroll bar use the command Control Plus alt Plus Z I'll use the following classes text.light FW dot bold text Dot Center for lightning and for the Bold characters and also to center it on on my page all right right click here and use a class of btnbtn.outline.warning.text.light you can change warning to anything you want like info and so on now to center it I put one div here I cut it I create the div again here I paste it and call it as class text Center if you want to put it under this one you can go to The Heading change the margin to 250 pixels and you save it it will display like this in the center all right so if you want to make a button manually and want to change the color choose banner.bdr all my classes are related to Banner when I'm working in Banner this practice makes you a professional coder by using just classes related to a specific topic you will be much more organized alright so right Dot banner.pdn and set the background color to Aqua it's not working unfortunately because it seems that I made some spelling mistakes so I just I'll correct it right away and now I changed the background to RGB and I also changed the border to non-important and it's outlined to non-box dot Shadow none to increase the effect I copy this I paste it here and I created the transition of 0.5 seconds now let's change the color right box Shadow none inside of it you always have to write important in bootstrap by using this you can create buttons manually all right now on to the next topic so let's go to the next section of making a Blog go to the section make a class of blog and save it now go to div make a class of dot container and save it you can see it's not displaying anything on the screen because I didn't write any content so create two divs and give the first one class of call Dot lg.6 call.md.6 call.sm.2 copy it and paste it here I'll work in these two divs as you can see the First Column large is six and the column medium is also six so six plus six is twelve and the second class is already 12. on a small screen it will display in a single manner give a class of blog.img save it go here and give it you can see the image all right so you can also delete the scroll bar and correct the name of the container class now give the background size cover and background position to the center now the div is attached to the upper one for separating all right so go to bootstrap and give a margin of five now go to the section column and give the heading journey and you can put the text characters in bold you can also add a paragraph where you can see the lorem next you can create a button of check more and you save it and you can see the result in the small screen it's displaying like this the scroll bar is not displaying because we've created this in bootstrap and yeah so that's pretty much it here we created a panel and a blog post and now on to the next topic so let's create a footer make a div and give it the class name of container take a row class and make four div sort them one two three four in div one take class of code.lg.3 because there are four divs in a row so I'll divide this by four take another class of call.md.6 I need this to be six by six and the last four and last thing is for the small screen to be displayed in a single row so now go to the first div in H1 Android meta brains and also write a paragraph so next you can modify this by giving text.warning to make its font bold you can use as well FW dot bold also you can change the title background color by using this tag bg.dark now go to paragraph give it the class text.light and here we go we have our output all right so for the separation you can give a class of nt.3 now to make listings in H1 you can write courses give a text color of text.light also give a margin by writing mt.3 now write mt.3 text warning and make it bold okay next you can write UI and make some Li and here we go you can see four lists giving me names like python Java C plus plus and Ruby if you want to remove the list go to the LI androidlist.style.type none and this will remove the lists all right and now on to the next section let's now talk about adding Social Links like Facebook and so on alright so you can copy this you can paste it here now just change their names write links and names for example Facebook email Tick Tock Instagram and as you can see it will appear in the list alright so next if I want to add some contacts to add some context copy the above data that you see in front of you and paste it here just replace links with contact us and update the contacts by adding an email address contact number and a website and here we go you can see the output in front of you so that was it for our mini project that was all about the menu project that we did together and yeah so I hope that it helped you summarize the different concepts we studied together in this course we created banners a blog post and a footer in total I've used 33 properties of CSS and other classes of bootstrap in this project so yeah I like to do things in a very efficient and effective manner if we did the same project with CSS it would have taken us so much time but by doing it with bootstrap uh we were able to get the same result as you can see in front of you it's a very beautiful website that we created with the help of bootstrap thank you so much for going through this course I wish you the best of luck and see you next time

Channel: Code With Jimmy

Views: 16,351

Keywords: bootstrap 5, bootstrap 5 crash course, bootstrap 5 tutorial, bootstrap crash course, bootstrap, bootstrap 5 tutorial for beginners, bootstrap full course, bootstrap tutorial, bootstrap 5 guide, bootstrap 5 new features, bootstrap 4 vs bootstrap 5, bootstrap course, bootstrap 5 course, bootstrap full course 2020, bootstrap tutorial full course, tutorial bootstrap 5, bootstrap 5 full course, bootstrap 5 full course in hindi, install bootstrap, learn bootstrap

Id: bn60njFDwf4

Length: 115min 2sec (6902 seconds)

Published: Fri Jan 27 2023