Bootstrap 4 with project | Tech Vista | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Bootstrap 4 with project

teacher avatar Tech Vista

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

32 Lessons (4h 17m)
    • 1. Lecture1 introduction

      1:50
    • 2. Lecture2 getting started

      8:29
    • 3. Lecture3 containers

      3:40
    • 4. Lecture4 grid system

      9:14
    • 5. Lecture5 responsive grid system

      8:22
    • 6. Lecture6 navbar

      5:54
    • 7. Lecture7 navbar brand

      1:25
    • 8. Lecture8 navbar toggler

      5:02
    • 9. Lecture9 navbar search

      5:40
    • 10. Lecture10 dashboard grid

      4:37
    • 11. Lecture 11 user name

      6:54
    • 12. Lecture12 list group

      9:48
    • 13. Lecture13 dropdown menu

      8:50
    • 14. Lecture14 doughnut chart

      12:34
    • 15. Lecture15 line chart

      14:22
    • 16. Lecture16 progress bar

      10:00
    • 17. Lecture17 star icon

      7:41
    • 18. Lecture18 barchart

      5:53
    • 19. Lecture19 accordion

      9:32
    • 20. Lecture20 images

      4:26
    • 21. Lecture21 jumbotron

      5:27
    • 22. Lecture22 media

      27:13
    • 23. Lecture23 breadcrumb

      10:34
    • 24. Lecture24 nested list groups

      9:39
    • 25. Lecture25 table

      12:53
    • 26. Lecture26 cards

      8:55
    • 27. Lecture27 collapse

      5:04
    • 28. Lecture28 pagination

      4:07
    • 29. Lecture29 stackedform

      10:20
    • 30. Lecture30 inineform

      5:34
    • 31. Lecture31 horizontal form grid

      7:49
    • 32. Lecture32 registration

      4:52
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

7

Students

--

Projects

About This Class

This course will help you create a perfect bootstrap responsive website for your business. You will ideally have a little knowledge of HTML & CSS, however it isn't essential as I will walk you through every step of code to ensure you have the right understanding of the bootstrap framework, and the tools to further your learning after you have completed the course.

This course mainly targets beginner and intermediate level of knowledge on Bootstrap 4 with practical usage on sample projects.

By the end of this course you will have hand coded a modern & professional website using HTML & CSS and built a solid understanding of the bootstrap framework to help you develop your own pages in the future.

Who this course is for:

  • Individuals who want to develop awesome responsive pages
  • Anyone wanting to brush up on their coding skills
  • Bootstrap newbies

Meet Your Teacher

Teacher Profile Image

Tech Vista

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Lecture1 introduction: Welcome to bootstrap training program. Great to see that you are interested in learning Bootstrap. Bootstrap allows you to create modern and standing user experience with latest web standards. Bootstrap is the world most user front-end framework to add sleep, professional, and attractive user interface for your application. In this course, you will get to learn everything that you need to know to build amazing user interface using Bootstrap for your web application as a part of the journey, we are going to build a sample project that lets you to put all the things you learn into practice project. So as a part of this course, what are we going to develop? So we are going to develop a sample project. So you can put all your knowledge, whatever you have learned through this course into a practice project. So this will be the homepage of your website. But tourism website. We will cover everything related to Bootstrap, including the navigation bar in line Farm, Input groups, images, jumbotron, media elements, and much more information. We will also use items or Font Awesome. I have used the Font Awesome icons for Facebook, YouTube, Twitter, and Instagram. We will also create a dashboard. There's vote is very common requirement of most of the projects in those days. We will use tables, accordion, charts, drop-down, list to group, and grid system to create this page. Coming to this space, we are going to create different styles of tables. So once I finished this project, you need to create a sample project like this and post it in the project section. So I wish you all the best and see you in the next video. 2. Lecture2 getting started: Welcome back to another video. In this video we will see what are the prerequisites side, big wired for bootstrap. You need a code editor such as Visual Studio code or Sublime Text or atom. Bootstrap works based on Chrome browser greater than or equal to 45, Firefox greater than or equal to 38. Microsoft Edge greater than or equal to two, L. Internet Explorer greater than or equal to ten. Safari greater than or equal to nine. Android browser greater than or equal to 4.40, beta greater than or equal to 13. In order to work with Bootstrap, you required three scripts file such as jQuery, ab.js, proper ab.js and bootstrap.css. You also required to import to CSS file that are bootstrap.css and Font Awesome dot CSS. We can get the scripts from bootstrap official website. So this is the Bootstrap official website. And the URL for the website is getbootstrap.com. Now we are going to create a new folder. So I will create it on my desktop. So let's go to Desktop and I'll create a new folder with the name bootstrap website. Right now it is blank. We need to create an index.html file for that, I'll go to my code editor, which is which builds to deal port. If you don't have withdrawals to do port, then you need to go to Google. And so it's for Visual Studio code. So if you search for Visual Studio code, so this is the very first link, you'll need to click on it and you will end up on this page. So if you are a Mac user, you need to click on it and the download will get started. And if you are a Windows user, you need to click on this arrow, so the download will start and then you will, you, then you can install Visual Studio code. I've already installed it on my machine, so I will not do it again. So I'll open my Visual Studio Code and I'll open the folder. So for that we need to click on Open Folder. And I need to go to the folder which I have created bootstrap website and then click on open. So right now it is blank. I create a file, so just lose this. Welcome. I'll click on file, then click on New File. And I'll save this as at index.html. So index.html. And just take the folder should be bootstrap website. Ok, let's do conceive. So now the file is saved and now to create a basic template, we need to type HTML colon five and then press there. So this is the basic template. You will get a HTML head meta tags title, okay, body. We need to save this. So now let's import the CSS and JS file from the official website of bootstrap. So let's go to their website. So I'll go to the browser. And this is the official website. Let me close this view port. And here we need to click on get started. So this is the CSS URL which we need, and these are the three JavaScript file which we need. So first I'll copy the CSS. So let me click here, copy. And then I'll go to Visual Studio Code. And below the metatag, I'll paste it. And then again, we need to go to the browser, and we need to probably these three URLs. And then again, we need to go to the studio coal and about our title. We need to paste all the three URLs. And then we need to save this file. So I'll pressed Amanda's, if you're a Windows user, ten Control S. And we need one more file for font-awesome css. So we need to go to browser and year. We need to type CDN, js.com slash libraries. And you'll be GO laughs, Font. Awesome. So this is the latest version. So we need to copy this. And we need to go do we drilled studio port and we need to paste it about a title. And here we need to write script source equals to W codes. And then we need to paste a URL. And we need to close this. And then we need to save the file. And we need to change the title to bootstrap website. Let's save this file. And one last thing we need to do is to create two folders. First one will be four images and the second one will be for CSS are custom CSS. So I'll go to desktop and you're in bootstrap website folder allocate two folders, though. First one will be four images, so I'll give a name images. All the images will come in this folder and the second one will be for CSS, custom CSS. So I've created two folders, 140 majors and one for CSS. And then we need to go to weed will pseudocode. And here you can see 12 folders have been created, one for images and one for CSS. So CSS folder, we'll create a new file. It doesn't name style, styles.css. Here we can write up custom CSS. And then we need to go to index.html and we need to import the CSS file, which we have created. So the About Us PIP, we will write linked HREF equals two and double-quotes. And here we'll write styles, CSS, slashed tiles. And we will write REL equals two state shoe. And let's close this. And then we can save this fine. Now we can place any content inside the body. For example, we will write Welcome to our website. Our website is related to Indian tourism, so we will highlight Welcome to our welcome to Indian Buddhism website or welcome to 2D India. This is return. Okay, and let's save this file. And to run this application, we need to install an extension. We just got a live server. So I'll go to extension and I'll search for life. So this is the nth extension alkylated. So this extension is already installed in my Visual Studio code. If you have not installed, so there will be an option to install, so you need to click it. Ok. Once it is installed, you will be URI, you can see an option Bu life. Okay, so I'll close this and your amplicon go live. So now you have, you can see when you come to India. So we have successfully set up our applications and this is it for this video, and I'll see you in the next video. 3. Lecture3 containers: Welcome back to another we do. So in the last lecture, we have imported all the necessary JavaScript and CSS files. Now we need to create a container. So containers are the most basic layout elements in Bootstrap and I required when using our default drip system. In Bootstrap, there are two types of containers. Container fluid and container. Container fluid is used to occupied the maximum available space of the webpage and leaving very thin margins at left side and right side. Whereas container is used to make contains two center of the page occupying around 85% of debates with living heavy margins at left side and right side. So now we will see an example by writing some code. So I'll go to Visual Studio Code and yell. I will write a div tag. And inside I'll write a class which is equal to container flu. And yeah, I'll give an inline styling for background-color. Style equals to blue. And let's close the div tag. And I got this. Welcome to poor India. And I'll paste it here. And I'll add a s1 dagger, or welcome to do it in detail. So now we have added a class container fluid, and I have given a background-color blue. Okay, so let's save this file and click Grb2 life. So as you can see, if we add glass container fluid, it will utilize the maximum space of the webpage having limited padding at left side and right side. And what if we add container class? So now let's add a class container. So I'll remove the fluid text and allocate only container, and then save this file. And now let's go to the browser. So here you can see if you use CSS class container, it leave heavy margin add left and right side utilizing all the center portion of the webpage. So it is finally up to u, whichever class you want to use. And before ending the lecture, if you can see the board is not formatted. So to form into port, I use an extension called prettier. So we need to go to extension and URL right here. So this is the extension which I use to format the port. You dear hyphen standard, I send javascript format formatted. There are a lot of other extension you can try whichever you like. So I'll close this and I have already installed it. So if you want, you can install it. And to format the code, you need to press Option Shift F. So now the code is formatted, OK. If you are a Windows user, you need to press Shift F. So let's save this board. And now you can see the code is formatted and I have shown you the difference between the glass container fluid and container. So this is it for this video, and I'll see you in the next video. 4. Lecture4 grid system: Welcome back to another video. The most important part of Bootstrap grid system. It is very important to create while creating the layout of webpage in Bootstrap. Grid system lets you to create layout into a web page that is dividing your webpage into multiple boxes such as header, navigation, content and footer. Bootstrap grid system is used to create page layout. It is a series of container rows and columns. Page contain a container or container fluid. The container contains a set of rows. Each row contain exactly 12 columns. You can create a box, that means a div tag inside the rule. And you can decide exactly how many column, but it has to occupy. It must at least occupy one column with n Maximum of dwelled columns. A box can occupy one Column. Two columns, three columns, four columns, five columns, six columns, seven columns, eight columns, nine columns, ten columns, 11 columns, a2, L columns. For example, you have created a box that occupied six columns in a row. Beside that, you can place another box that occupies the remaining six columns. So we call it as six plus six, like this, you can create any combination of boxes that makes a sum of up to 12 columns. For example, 8x plus four, or four plus eight and so on. You can place an aesthetic grid. That means you then create a row inside the column. So again, you will get well columns inside it. The number of columns inside the row will be always two. It, we can't change it. If any end-user columns are left, the space will be left empty as it is in the output. We have done number of columns of a box exceed the limit of Available columns for that particular row, the box jumps to done next row automatically. The size of each column is equal to the total width of row divided by two L. By default, Bootstrap maintains some default margin and padding to make the content look good. So let's write some code to make it more clear. So I'll go to my Visual Studio code. So let's go to Visual Studio Code. And here I give a class name S container fluid. So inside this container fluid we must place arrow. So I'll, I'll remove this time. I don't require this. So inside this container will add a little. So div class equals to rho. So now you will get dwell column inside this loop. So inside this row we need to create first column. So I'll create the first column, div class equals two. All I found one. And here I write Baldwin and I'll give some background color. So style equals to Bagram. And the color will be blue. So I'll give some different, different colors. Okay? So I'll cope with this column and I'll paste it 11 times, again. 1234567891011. So there are total 12 columns. I'll change the colors. Okay. Let's give where. I'm giving you some random colors. Being yellow, light pink. So this is volume two, 45678910112. And let's save this file and let's go to the browser. So here you can see there are 12 columns, 123456789101112. So I'll give some height for this. So let's go to the Visual Studio Code. And yeah, we need to give a height equal to 200 itself. I'll copy this and paste it on all the rows, all the columns. And let's save this file and let's go to the browser. So it will display something like this. So now let's create another o that S four boxes. So let's go to Visual Studio Code. And here I'll play it one more div with a class row. And it will have four boxes open, so do. And here I like class equals two, all threes, because we need four boxes. So each box will have three columns. So I'll copy this and I'll paste it three times. So we have four boxes, 36912. Ok. So the total number is twin. And let me give some style. Let's save this and let's go to the builder. So 1234. So you get an idea of 1234. So Pol 1234. Ok. So the output will look something like this. So let me go to the Visual Studio code and instead of three, if I write here four. So now the total number is 3690 to l. It will be 13 if I save this and if I go to the browser so you can see the last box automatically comes down, so it moves to the next line. So you must take care about the sum of to n. Well, let's go back and put it back as three. And if you can see the output now it is correct. So the total should be two n. So now we'll take one more row and let me just copy and paste it here. And instead of three, we will put six by six. Ok, so six N6, 12. If I save this and if I go to the browser, you can see call one and do what I equally divided by six. In the same way, you can do different combinations, okay? If I go copy this effect based here, you can put it as eight by four. There's a this eight by four. So if this is eight and this is full. So you can try it out with different kind of combination, which will help you to understand more about this. So like this, you can create any number of boxes depending upon the dwelling column, the rules. So we have understood the basic off-grid system in the bootstrap. In the further lesson, we will take it to the next level. So till then, take care and bye, bye. And I'll see you in the next video. 5. Lecture5 responsive grid system: Welcome back to another video in order to target your webpage to multiple devices and make the content automatically fit for any resolution. You can do that by using responsive grid system in Bootstrap. One of the main highlight of Bootstrap is responsiveness. That responsive grid system of bootstrap makes the content of webpage automatically fit for any resolution from the largest to the smallest. You can specify exactly how many columns should be occupied by the box with respective to each type of device individually. For example, you can specify the box should occupy three columns only in extra law, Davis, not on other devices. Do you know based on which factor you can divide the devices into different types? It is not based on branding, cost of device or physical screen size of the device. It is only based on bit off screen resolution. Based on the screen width, we can divide the devices into five types. Extra large device, large devices, medium device, small device, and externality whites. Whenever the spin width is greater than equal to one hundred, two hundred pixels, we can call it as extra large device. Whenever this bin width is greater than or equal to 992 pixels and less than or equal to 1199 pixels. We can call it tends large device. Whenever this twin width is greater than or equal to 768 pixels and is less than or equal to 991 pixels. We can call it tests medium device. Whenever this bin width is greater than or equal to phi 76 pixels and less than or equal to 757 pixels. We can call it test MALDI ways. Whenever this thin width is less than phi 76 pixels, we can call it as extras MALDI wells. For externalize device, we can specify the number of columns, but that last name as Paul hyphen, Excel hyphen, and then the number of columns. For large devices, we can specify the number of column with the class name called hyphen. Hyphen, and then the number of columns. For medium device, we can specify the number of columns with the class name call hyphen, MD hyphen, and then the number of columns. For small device, we can specify the number of columns with the class name, call hyphen, hyphen, and then the number of columns. For extra small device, we can specify call hyphen and then the number of columns. Xml stands for extra large, LD stands for lags, md stands for medium, SM stands for Small, and for extra small device. There is no, any attribution by default, called refers to extra small duets. So now let's suppose we have four boxes that this whole div tag in our webpage, assume that you want to display first four boxes side-by-side. So out of total 12 columns, each box can get three columns. Of course you can share number of columns unequally if you want to. It just depends upon the requirement or content. If you want to share equally, you can give. Call hyphen Excel, hyphen three. For each bonds in the large device, assumed that you want to display first three boxes side-by-side, and the last box display on the next line. So you will give call hyphen L G4 for the first three boxes. And you will give call hyphen LD happened to L For the last box. In case of medium device, assume that you want first toolboxes to be display side-by-side and the last two boxes display on the next length. So you will give call hyphen MD hyphen six for the first two boxes, and you will give call him, hyphen MD, HIV and six for the remaining two boxes as well. In the case of small device, assumed that you want first two boxes display side by side, and the last two boxes, this blue line by line. So you will give call hyphens, SM hyphen six for the first two boxes. And you will give call hyphen SM, hyphen 12 for the remaining two boxes. In case of extra small device, assumed that you want to display all four boxes line-by-line. So you will give call hyphen to L for all the four boxes. Finally, this is the way you can give className to alder Dave accordingly. Now let us see the example by writing some port. So let's go to Visual Studio code. So I'll go to we don't studio poured and URL remove unwanted. They've rows which we don't require. And yeah, we need only four boxes, so 1234 and I'll remove the remaining. They've. So for extra large, we will give class as called Excel hyphen 34, all the four boxes. So let me copy this className, Analects. And based on all the four lives. And that'll save this. And then we can go in the browser to check. So let me rephrase this. So this is it how it will look for the extra large devices and in case of large device. So let's go to widgets to do pull. And for large device, we will give the class name as Paul I often LG Ford for the first three divs. So let me copy this. Plus. And for the last one, it will give us call LG 12. Let's save this. Let's check in the browser. So currently it is for externalize device. So let us minimize the browser width. So now it is for large device, so it will look something like this in the last device. Now in case of medium device is du has to occupy six column. So the class name will be called. I often MD hyphen six. So this is for medium device. Let me save this and let's go to browser. And let's minimize the browser. This is done. We dim device. We need the first two books on the top and remaining toolboxes below that. Now in case of small device, the first toolbox should occupy this x column and the remaining two should be different lengths. So for that we need to write call hyphen, hyphen six. Fault IF Anniston hyphen 64, remaining two, we will write call hyphen SM I fend two l. Because this two we wanted on a separate line. Let me save this and let's go to the browser and let's minimize. So this is what this model divide is. The first two boxes will be in one line and side-by-side, and remaining two will be at the bottom, one by one. Now for extra small device for each box, that glass will be called I offend 2L. For each t, we need to write the same class. So call hyphen to m. And here I forgot to write S M, So M. Okay. So let me save this and let's go to the browser. And we need to minimize the browser, not minimize, we need to shrink the browser so that this is the small device. So in small devices, in extra small device, it will look something like this. So now let's check it again. So in extra large, there'll be four boxes. In large device, there'll be three boxes side-by-side and one at the next line. Then in medium device, they'll be toolbox you side-by-side and the toolboxes below that. And in small device we need toolboxes side-by-side, and then the toolboxes remaining two boxes will be one below the other. And in the small device, all the boxes will be one below the other. So this is how responsiveness grid system works in Bootstrap. So this is it for this lecture and I'll see you in the next video. Till then, take care and loading. 6. Lecture6 navbar: Welcome back to another video on the first major component. Expect you are supposed to look nice in your page is a simple net bug. Now, but is a top menu bar which contains major links to other pages of the website, which helps the user to navigate in your website. The navbar class creates a navigation birth, the nav bar. I refund, expand Python as simplys Expansion Uber on the small devices or higher. You can also use md for medium devices and LG for large devices. Navbar hyphen light, flash shows dark things. Navbar hyphened doubt those white texts. Bg hyphen light. So let's light background. Bg hyphen doubt shows dark background. And thereby hyphen nav class represents stellar stock navigation links. Now hyphen item represents, represents an item in the navigation bar. Nam hyphen linked plus the presence hyperlink and tighten. By default you are giving has to the present link with the same page. They tell you, replace it with the axial page name that you want to link. So now let's do it practically. So I will open withdrawals to be bold. First, we have to start creating our simple navigation bar by adding on now. So here I will add a nav tag. It will specify that it isn't navigation bar. We have to be worked lastName, bar, nav bar. And I want to expand on their bar on this more devices though. So we need to give a class which is nav, navbar hyphen expand. And I said, and I want my text fillers should be done. For that. I will be work lastName, navbar. I fund light and might be alert, should be like. So I'll give a class VG hyphen light. It means the background would be light and the text color would be dark. Inside the navigation bar, actual set of links or be present. So for that, we need to add a UL tag. Ul tag means unordered list and each individual item must be the visit grid as LA deck. So inside you will, I will add a light tag, an entire UL tag. I will give a class which is equivalent to now bar Erickson, now, which represent rip-off links. And in LA I will give a class. It is equal to L hyphen item, which represent each item and each hyperlink is represent as a tag. So in LA, I will add a tag. And that will give a class name which is required to nav link. And I'll do a DFS, I'll pulling equal to ash. It means that it won't go to any other page and it will remain on this same page. For that reason, we need to give as an enclosed the a tag. And if you want to give a link to some other page, so you can give it as index.html or whatever the page you want to be direct. But for now, I'll give as now you can read any number of nav item as periodic Letterman. So I want to create eight hyperlinks. So I'll paste it eight times 12345678. And I'll give the name as home. And the page name will be index dot HTML. My second piece will be dashboard. And the link would be dashboard dot HTML. And the third page will be destination. The link would be destination. Html's for seeds would be contact. And link would be contact dot HTML. So if page would be states, the link would be state's dot HTML. Page would z and minus z, e. The link would be MIC dot HTML. And seven page would be registered. The link would be register start HTML. And the last page would be logins. And the link would be login. That's t. I melt. And let say this file. And let's take in their browser. So yeah, you can see my links. My man who has been created with a light background and adopt X. So this is it for this video, we have successful liquidating the venue. And I'll see you in the next video. 7. Lecture7 navbar brand: Welcome back to another video of how the user knows about your websites, their logo, and suddenly you should create a navbar ban in your navigation bar. Navbar brand is used to website title and logo image in your navigation bar, you can place either of logo image and website title or both. The navbar brand class represents the website name and logo. Let add navbar brand to the navigation bar. So let's go to Visual Studio Code. And before that, we will add a tag, which is anchored tag. And I will add a class pain, which is an employee to now bar hyphen brands. And URL add hyperlinks, which is not an ordinary link. And then close the a tag. So whenever user gets this link, it will redirect to index.html beach. And I'll give a website name, which in our case is in Gertrude. And let us save this file and let's check in the 1000. So here you can see the name of the website is up here. So this is the quad as we do, and I'll see you in the next video. 8. Lecture8 navbar toggler: Welcome back to another video. How do men should appear? The user opened up page in extra small device, Baldi wise or medium device, it should automatically shrink who are small icon and should be opened in a single click. You can do it by using their bar toddler. So now by hyphen toddler class, we present a toggle button. Now burn hyphen, toddler hyphen, I can, delta icon is missing and I pin is missing. So the className, which should be now by hyphen, hyphen icon, which represent I can first outlet button. Collapse. Floss makes too many collapse by default. Now been hyphen collapse class represent the collapsible navigation bar. Data hyphen type ID equals student hash ID specifies that the ID of that element should be collapsed or expand. So data alpha1 toggle here, it should be data hyphen toggle, it, just spelling mistake. This should not be data and the iPhone target, it's a good data hyphen toggle. It goes to collapse, specifies that don't target element should be collapsed, unexpanded. And no, but then this tip, so now let's add toddler to them navigation. But so for that we need to go to, it will still be a poor place. A button about the UN figure, I'll write buttons. And it is not, doesn't normally button. It isn't nav bar toggle button. So for that we need to add a class. This equal to. And the name of the class will be now bar tau w. And it is not a submit button. So we need to give it a type which is equal to beta1. So when the user clicks on this, it has two possible domain. That means it tends to call epsilon expander many. So we need to write data alpha1 toggle equals to collapse. Now let's close this button tag. Now we need to place it and died you rarely intuitive tags. So let's create a div tag. And inside the div tag, we need to add a class. It is equal to four laps. And now bar alpha1 collapse because their tanks should be collapsible. And instead we need to place the UL tag and we must keep some ID father to tag. So yeah, we're going ID, which is equal to my. Now. You can give any name and pseudo off my math. Let's close div, div tag. And I just felt this URL and paste it inside there to back. Now in order to connect this button with this div tag, we have to provide data hyphen target equals to the ID which we have given. So your data hyphen dot equals to the ID, which is in my case, my mass. So now we're done with this. Only one thing is remaining. We need to add an icon, but the menu. So yeah, I'm using a span. And inside span add Atlas, which is equivalent to now bar, paraffin, toddler. I send, I can close this span tag. So let's save this file and let's go to the browser. Right now you will not see any difference. We need to minimize the width of the announcement. So yeah, you can see the menu has been sphere like this. One thing. Click on the icon. You can see the links on the links on different line. And now it is expanding and collapsing. So our menu is working fine. So whenever this mean sizes of mobile device that Tobler but then is automatically visit the, when the user clicks on the menu, it's going to expand. The menu item appears line by line. So this is how we can create a tableau for ten inside the navigation bar. So this is it for this video, and I'll see you in the next video, will then take care and bye bye. 9. Lecture9 navbar search: Welcome back to another video, nav bar search bulbs without global search box where the user can search for content. So the form hyphen enlightened class, the pleasant in length farm and displays the form elements side-by-side. Import hyphened blue plus represent a group of text and form control input. I find bloop hyphen depend class. We presented text or icon at the left side of form control. The input hyphen group, Python text class, the prison vertex inside the loop. The form hyphen control class we present up and pull in the forms, suggests, takes folks. My hyphen class, people isn't Y-axis, that is margin top and margin-bottom. My hyphen, hyphen clouds, we present y-axis margins, that is margin top and margin bottom for only small devices. So now let us three to search box in the navigation bar. For that we need to go to which feels good when food. We saw the ending of nasdaq. We need to add a form tags. I'm singing like this. And inside the form tag we will add its lattice, which is equal to form isn't in London. And we need to close this form tag. So far inland clause we make the element side parasites. So now in order to prepend that takes and textbooks, we need to add two bills and we need to add some classes. So we will add one div and the second div. In the first two, we will add a class equaling two inputs, I reckon, if you will. And in the second video, we will add a class for Tyvek burrito and put hyphen group. I've seen the best. And inside this div, we will add a span tag. And we will give a class which is equal to and puts hyphen, hyphen text. And now we will give it an ID which is equal to so much. And we will close this span tag. And inside the span tag, we will give a Font Awesome icon for search. So plus, which is equal to FA, Font, Awesome Font, Awesome hyphens. So and we need to close this artifact. Now we need to create the input box, so we need to please the input box after this two. So here we need to write input type will be equal to text. And here we need to give gloss to bomb. I think untold. And here we need to be replaced folder, which will be for you to search. And here we need to close this input tag. So the form control class will display a Bootstrap style for their textbooks. Now we need to create the Search button or that we need to write. Pretend the folded form tag is ending. And we need to give us last button btn VTS warnings to actually being grateful. And then we need to be lit class, which is my I returned to. It means there'll be margin top and margin bottom. And then we need to give my hyphen as sin i isn't 0. That means margin top and margin-bottom, how small devices will be 0. And now we need to close this but contact. And here we need to write so. And we need to save this file. Now let's take a look downward. So here you can see ourselves spots has been appeared and our MenuItem dot on the left side. And I search with under lights there. So if I shrink that window browser, so it should be inside them anymore, but it is outside. So let's take it. Let's go to the Visual Studio code. We need to just vent this form tag and we need to be tested before this div tag. And let's save this file and let's go to the browser. So now if I should 1000 seeds of searches here. And here in the UL tag, we need to add one more class, which is MR. Ivan R2. And let's save this file. And let's go to the browser. Now. Once said if first is now you can see when I minimize the browser sites, now there is no search item, no surge boats outside this menu. And if I click this menu item, we emptied the search boxes inside this. And so we have rectified the error between what getting. Now the menu limbs out on the left side and the search votes is on the right side. So this is how we can create a search bug inside a navigation bar, and we have successfully created one. So this is it for this video and I'll see you in the next video in benthic debt and bovine. 10. Lecture10 dashboard grid: Welcome back to another we do. Now let's just cleared the dashboard. In every project dashboard is common and compulsory in the interview also, they will test your ability of designing by giving their dashboard as an interview test. So let's just create the dashboard for that. We need to go to Visual Studio code. So we need to copy this code. So I'll just select everything. And I'll copy this poll. And I'll go to File and then click on New File. And I'll paste the code which ad copy. And then I'll press command S. And that'll give the name S dashboard dot HTML. And just check the forelimb name. It should be the same for little bits we have created earlier. So let's save this file. So now the dashboard dot HTML file has been created. Now the link is already been created dashboard HTML because we have copied the same pole. And here the title should be dashboard. So i'll remove this title and I'll add dashboard. I just saved this file and I'll remove the food which is not required. So those are the four divs which are not required. So I remove this and I'll save it, and I'll go to the browser. And I lift flesh Alberto dashboard and I'll just refresh. You can see welcome to to India. I will just label this as well because this is also not just wired. And now if you can see, it is a blank page. Now this dashboard page will be further divided into three sections. Was second entered, something like this. This will be the first section, second, third part. Okay. So in a similar manner, we have to divide this page in three section. This is already been made that we need to do something like this for our page. Okay, so for that, we need to go to it will pseudocode and insight doodle. We need to create three divs, okay? First one. So let me copy this and paste it to ice. And inside the first div, I will give a class which will be equal to Paul LG. Three means three column. And the second will be plus. In the second div, the class will be called LG six. It will be offset Stalin and the interactive will be, will add a class with Paul LG, See but three columns. And here we will give some background colors. So we will write style equals two backgrounds. And the color will be DAD lids. And I'll copy the style. And I'll paste it in the third div. And the second is we don't want anything. And I'll put some content so you'll get an idea for a second. And this is the toad. And I'll give some height as well. So it is going 2 thousand pixels. And let me copy this and paste it. And yet we need to write style equals two. Pipes are just thousand pixels. And let me save this. And let's go to the browser and checks. You can see the first column we get, we got a background color button, third column. We have not received any back nonpolar, so let's check it. The year we need to add a semi-colon. And now we can see this whole pages divided into three sections. The first one, the second one and uploaded on. Okay. So yeah, there's a ready templates first, 1 second, and the third one. Similarly, we need to create something like this. So now we have created the basic layout of the dashboard screen. In further lesson, we are going to enhance this a lot. So this is it for this video and I'll see you in the next video, lead tech debt and Berlin. 11. Lecture 11 user name: Welcome back to another we do. Now in this dashboard page, we will create user information as shown here. Okay? So this is the user information. This is a complete dashboard pays. We will create everything step-by-step in our project. So right now for this lecture, we will create this section. Ok, so we will create the section for that. Right now it is blank. To create the user information we need to go to Visual Studio Code. Remote the height. We don't require the height here. And you're also I'll remove the height. And yeah, let's just remove their texts, which is written first. Now inside this column, we need to add one more div with a class row. And inside the rule, we will add a div with the class name Paul. I offend 1111 columns. Okay, and the text color be white for that, the glass is txt Python, right? These are all inbuilt Bootstrap classes, so we don't have to write some extra properties for CSS. These are all inbuilt classes. To make the text center, we need to add text center plus and Amex hyphen T2. This is the margin from x axis from left and right. So here we need to write a mixed hyphen to and we need to give padding bottom. To go. Pb stands for padding bottom and for padding top, PT, padding top two. And font should be bold. So font, I sudden weight, hyphen bold again. And we need to close this div. And inside those Do we will add the name of the title. So procurement manager, go year, I pasted. And I'll add one more class for this. So here I will write user info. This class we need to create. So I'll just copy this class name and I'll go to style.css, which we have created earlier. Add a dot and I'll paste the name of the class name. And the other we need to write the property. So there are two properties which we need. One is the background color. To the background color would be 93. Study is b, 99, c. You can give it any color, but I'm using grayish color. So grid and font-family, I will add as ADL. And I'll just save this. Just make sure that user hyphen info could be present in this. Let me save this and let's go to the browser and check our page. So as you can see, procurement manager did other background pellets which we don't required. So I remove that as well. We don't require this hero of soil removed the height from the second is I will remove the whole styles which we have added before earlier. So this is the procurement manager title. Okay? Now we need this I pin and the name of the user. So for that we need to create one more div, this div and the same rule. And here we will add a class which is equal to fall. As soon. We need to L columns this time unique, well poems. And their texts should be centers or tech center and margin top would be two. And that'll discloses div. And inside this div, I need Image Source. And in the image folder I have a user dot PNG. Width will be one grantee vx. We need to add an architect, but with this user. And that it closes image tag. So we can see in this folder, I have created an image folder and I have used this image user dot PNG. So I'm using the same image. Yeah. Okay. So let's check in the browser. As you can see, the user image has been displayed and now we need done user name, something like this, John Smith open. So for that we need to grow the widgets to Niels Bohr. And again, we repaired one more depth at a class. Paul, I often will rarely columns. Again, the text will be centered. Padding top will be to spreading Barton's maybe two. Font weight, bold. So font-weight bold. And we will add one more class which we will create. So yet I loved that class user hyphen named this we need to create. So let's copy this and let's go do stylish, dark states, CSS. And yet I'll add the class. And I want font family would be well-done up. Let's see if this, and let's go back to dashboard. And yet I'll add them, MS. John Smith. Let's save this and let's go to the browser. The URL, as you can see, John Smith has been displayed with the same styling, which we can see here. So this is how we can create the user information vaults. In this lecture, we have created the user information box. So this is it for this lecture, and I'll see you in the next video. 12. Lecture12 list group: Welcome back to another video. In this video we will see what are listed broke list, group like tables with multiple rows and single column. List books are generally used to display the list of titles or names. Without much details, you can provide the click functionality for each item. So you can lead to another page or section when the user clicks on an item. List hyphen group class with a pleasant the group of list items. List hyphen. Hyphen item class represents a single item in the list group. You have to create a UL tag that we present the list of items, an LI tag that represent we'd single item. And we need to apply a list group glass, do UL tag and apply the list hyphen group hyphen item class to the LI tag. Now we will create the list broke. So let's go to the browser and we will create a list group, something like this, as shown in this web page. So for that we need to go to Visual Studio Code. And in this row, we need to add one more div. And inside the div tag we need to add a class which is equal to call hyphen to L. Because we need to add columns. And we need to add one more class, MB hyphen three margin, bottom with three points. And inside the div, I will add a UL tag with the class, which is equal to list iPhone group. And inside the UL, I will add LI tag with the class, which is equal to list, hyphen group an item. And inside the LA, I will write the content which is manage suppliers. So I'll copy this and I'll go back to Visual Studio Code, and I'll paste it here. Then I need three more LI tags for managed spending, new contact and value added. So I'll just copy this LI tag, the whole LA, and I'll paste it three times. And I'll copy the names from your. So first is managed spending, newborn deaths and value-added. Let's save this file and go to the browser and see how it looks. So it looks something like this. So we need a background. So what I'll do is I'll go do within Studio pole. And in this row I'll add some background. Style equals to background. And I'll give a grey background. So discovering the whole row. So I don't need that. We need only for this problem. So we need only for this follow. So now it will look something like this. This is something really light. So that's okay, I'm in, we can use this DNA also. So now we want to add a small box. So now we wanted to add account like this inside the small box. This small boxes are called badges. So let's create a badge. In order to create a bad, we need to go to wiggle pseudocode and yell inside the l, l data span span tag. And I'll add a class which is equal to badges, BAD GE badge. And to add color to badge, I'll add a class badge hyphen secondary. And I will close this span tag. And inside this i will add up on debt reaches 65. Now let's go to the browser. But now we have this small box beside this text, but be wanted on that outside like this. So for that we need to go to Visual Studio Code. And in the LI tag, I will add few more glasses, which are be flecks means display flex. And we need to add two more glasses, which is which are justified on ten between. And the glass is a line item Center. And I'll save this file and I'll go to the browser to check. So right now if you again see badges on the right side and then takes it on the left side. Something like this we have achieved, but let's go do that. Visual studio, poor and forbidden glasses. All three class and pasted and all the LA's. And just copy this span tag and pasted and all the allies. And we need to add some text. So let's see what we can have here. This 15. You can add any text you want. Now let's see in the browser. So we have successfully achieved this list group. And similarly we need to create one more for this, but here I need to add the measure title. So we need to do Jill's video poll. And about the UL tag, not about the UL tag, about this div tag, we will add one more div with the class name, which is equal to call my friend to L. And I'll add the texts as the images. So I'll just copy this and I'll go do a little study abroad, NLP state here. And yet I need to add two more classes. Tech Center, who made the text in the center? Pd, dew points, bedding dot points, padding-bottom blue points, let's say this file and let's go to the browser. So now you can see p measure title has been appeared. And now similarly we have to create p actions. So let's go do that Visual Studio Code and let us copy the entire two divs which we have created. This one and this one. So I'll copy both the divs and I'll paste it below this. And she loved the major. I like the actions. And we need only three list items, which are 123. And we don't regard badges. So what I'll do is I'll remove this fault LA, and I'll remove this badges. We don't require and we don't require this extra glasses, which we have added for the badges, Commodus as well. And then we need to add protects, which is Lean new partner contract under stopping this. And I'll paste again. And I will just format the board by blessing option ship F. No, now look forward is formatter. And let me save this file. And let's go to the browser and check whether we are getting the list item. Ok, so now we have successfully created the list and we have also added the badges for this. So if I take this, the computer version, it is almost similar. Or little Gullah is different, but that is okay. But we have successfully achieved this section as well. So this is it for this video, and I'll see you in the next video. 13. Lecture13 dropdown menu: Welcome back to another video. In this video we are going to talk about drop-down menu. Drop-down menu displays them in new items when the user clicks on the button. Drop-down menu is that our global menu to display the list of menu items quickly and easily. Div tag represents the entire drop-down menu button tag, the presence that the people part of them ending the div tag with the class prob don't hyphen menu represent that actually set of items. So the drop-down class act as a container for drop-down button and drop-down menu. Drop-down hyphen toggle represents that clickable button font dropdown. Data hyphen toggle equals to drop down. Attributes specified that the button clicks should be toggled the Menu drop-down menu class represents the actual said dog menu item inside the drop down menu. Drop-down hyphen menu class, replenish that single-item and not drop-down menu. So now we will create two dropdowns. Let me show you the two dropdowns which we need to create. So these other two drop downs which we need to create all regions, which is having options, east, west, north, south, and this one desktop don't contains the year. Ok. So to create this, to drop downs, yeah, we need to create food or Brown's. So we need to go to the Visual Studio code. And in the second box, we need to add a div tag with the class name row. So I'll remove this second. And here I will add a div tag with the class equals to rho. And I'll close this div tag and inside the row, we will add one more div with the class name Paul I offend 2L and padding top 0 and padding-bottom with two points. And I will apply a background with an inland style background, which is equal to E nine, E6, E6. And I'll close this div tag. And inside this div tag we will take one more there. This is some extra thing which is not, so i'll remove this. And inside this div, I will take one more div with the class equals to rho, and then close the bag. And I will add one more glass empty. I find two points, and then press Enter. So let me save this file and let's go to the browser. So this will occupy two columns. So if you can see the template which is already made. So this, this is occupying two columns. They will contain six column and the remaining will contain the six column. So inside the row we will take two divs with that glass ball, iPhone six. So let's go to the airport and yell. I will take two divs, that glass ball, iPhone six. And we need one more day, but really create that later. First, we need to finish this. And I will add one more glass text left because we need that text to be left aligned. And inside this we will add one more div with the class. It builds to drop down. And I will add a button, that glass, which is equal to burden button. Secondly, do add some color to the bottom. And we need to add one more class, which is dropdown. I can toggle. And the type is equal to. And we need to give some ID is equal to my drop down Menu button. And here we need to write data. Toggle peoples to probe down. And let's close this button tag. And let's just Format option Shift F. So it is already formatted. So European see, intend this, but then we will add our texts all region. Let's say this file and let's go to the browser. And so as you can see, we have created a button, but we need the options east-west, north-south. So let's go to the browser. So with Visual Studio Code and after the button tag, we will add one more do where we're going to create the actual menu. So after the button, we're going to create one more div class equals to drop down menu. And we need to add a tag. And with hyperlinked as ash. And inside the ETag, we will build the list which is east. There are three mode to east, west, north, south, east, west, north, south. And here we need to add a class which is equal to two dropdown item. We need to add the plus in all a tag. So let's copy this pasted here. And yet as but let's save this file. Now the menu is ready. Let's check in the browser. And let's go to the browser and check, let's electrician ones. And if I clicked so you can see we are getting all the options east, west, north, south. So now we need to create another dropdown for years. So let's go to the adults would be appalled. And let's copy the entire div and pasted here. And instead of origin, we require the year, so by default it will be 2019. And remaining, we will add here 1019. When you drain the solid, going to deem when D7 Dean, we need 16 and we need one more. Going deep 15. Let's save this. And we need to give the ID or different name. So we'll give two. And let's save this file. And let's go to the browser and check the year we go. We have the second dropdown as well, but it should be on the right side. So let's go to the board and CEO of text left, moonlight text right? So it will align on the right side. So we go, we have to drop downs, one with all legions and one with the gears. So we have successfully created the dual drop-downs and it will look something like this as it did in this actual temperature. So this is it for this video, and I'll see you in the next video till then, take it and valine. 14. Lecture14 doughnut chart: Welcome back to another video. In this video we will talk about donor charged. Donor charge are divided into segments. The art of east segment shows the professional value of each piece of data. Donut chart are excellent at showing the relational profession between data iid series that you blocked the innate donor chart adds a link to that chart. That data property represent the actual data values. The background-color property represents an eddy of Bellows of item in the chart. The label property represents an array of labels for each item. So we are going to create a chart by using jog dot js. So dispose does not go with that chart dot js for Lee, I will show you with demos of John ab.js. So what are we going to create? Let me show you what are we going to create? We're going to create this section. Once I refresh this, you can see this is a donor chart which we are going to create, which shows how many contractors, suppliers and how many unlisted suppliers through a donor chart. So let's go to reduce to be poor. And in the last lecture I deleted by mistake. So before this third column. Okay? If you can see this is our texts toward, before this div, we need to add one closing there, which I, by mistake, I have deleted in my earlier lecture. So if I go to the browser and I show you the mistake. So here you can see the third problem is coming here, but it should be on this side, on the right side. If I save this file and if I go to the browser, now you can see third column is in that place. So now moving further, we need to add a lunar chart for that. Inside this little. Inside this little, we will add one more column, one more do. So. Let's minimize, let's lose, lose this. And in type this at all, we will add one more div with the class, which is equal to volume I offend 2N and Amex, or though it's really made their debut in the center margin, top margin, top 11 takes should be white for that classes text hyphen white. Tanks should be in the center. So takes hyphen Center. Bedding, d2 points, bedding bottom blue points. Mx hyphen to weed means that from the left and right, it will add some space. Well rounded corner, we will add a class, rounded. And font should be bold, so font weight bold. And we will add some background pillars. So style equals two. Background. Which is 71897. And then enclose this DAG and instead they're div I really did. I did texts which is let me copy the text from your supplier compliance that so let's paste it here. And Natalie former detects by placing opsins shift f. Okay, so now that Ford is formatted, let's save this and let's go to the browser. And so it will look something like this. So now we will divide this area in two section. One is for the column and the second one, B one will be eight columns. So you can see this is photo column and this is eight upon. So we need this area. So let's go do returns to do a boat. So after this, we will add one more div with the class, which is equal to Paul hyphen 2N. And we will add a plasmid turtle. And inside this dome, we will add Atlas, which is equal to all. I've seen LG hyphen for. It means that in the large screen it will occupy four columns. So if this green is less than that screen, it will take to alcohol and and we need to apply the right border. So for that we need to add border. I often write and I close this too. And I'll add one more div inside this with the class. We do the query to take center because we need that text to being tainted. And margin-bottom will be 0. Let's close this div tag. And inside I will add H1 tag with the title supplier. Let's save this and let's go to the browser and check the year. You can see the title supplier. And as you can see that right? So now we need to add up n was four the voltage chart. So let's go do though is we also do both. In order to reap isn't that chart, I will add a div tag. Third, we need to add a div tag with the class name, margin top 0, and bad important, ripen when point. And we need to close the bag. And intended deep dive, I will add a canvas tag that will have some ID, for example, supplier. And the spinlocks, we'll have a bit which is equal to 200 pixels, and Night, which is equal to 200 pixels. And let's close this fan laws. And in order to load the chart in the canvas, we need to write some JavaScript port with the help of chalk dot js. So about the body tag. So good about the body tag. We need to add a script tag. And inside the strip, legally declared a variable called var CT. It's 21 equals to document dot get element by ID. So getting the canvas object based on the id, which is supplier. So we need to create an object, namely Darwin. So y beta one, which is equal to, let's open and close curly braces and intend this. We will have a property named bar data set. And this property will have two data values. So for data that will be two values. First one is 61 and the second one is 39. And the first value of 61 should have a background pillar, which is equal to as me 00471. And a low value 39 should have a background pillar to have another background color. For that, we need to write as 78 f 783 AD. Now we need to provide labels. The labels. And the bead will for the first item is 61%. On track. There. Suppliers. And a label for the second item is unlisted. Suppliers. Now we have created the data. Now we will create the chart and inject into the endless by creating a new chart object. So we need to write var mine. Doing that. Dot one equals two new objects. New chart. And passing on texts. As the first argument. And type of the charge is blue inert. And data is the tau1 object that we have 300 before a moment. Now we need to import chart Dodge is in order to work with tar.gz so that for that we need to go to rather and this is the URL. Then we can get the GI ab.js CDNs that I'll probably this URL though you just need to go to tag Burj start o RG slash stops slash liter slays, getting started. And you will find this trip. I guess so I'd probably this and Algoe who? Adults viewport. And at the top of the page where all the scripts are holding, I'll paste this and say this. And so we are done with the chart. Let's check in their browsers. So you go on Browser and I, I'll refresh the page. Ok. So we need to click on blue light. You can see the getting the John, but there is no pillows, so we need to take y and this total is not applying. So let's put wisdom studio bulls and obey. So we need to write as let say this. And I forgot to write 39% unlisted supplies again. So let's go to desolder it. Now you can see that the letter had been applied and if I did, the chart is a fishing okay. In our posts and providing ready minimum explanation on giant boat is because our main goal of this course is that board. Until you want to learn more about the tar.gz, then you can use it this loop sage chart dot js dot analyzing. And you will get all the details and you can just say the documentation will. But my main goal is to work on Bootstrap boot. So this is it for this video, and I'll see you in the next video. We'll then take that and move on. 15. Lecture15 line chart: Welcome back to another video. A line chart is a way of plotting data points on a line. Often it is used to show trends of data. A line chart is a type of chart which displays information as a series of data points called markers, connected by straight line segments. That data property represents the actual data values including border color, and labels. The scales property represents data for X axis and Y axis. The background-color property represents color of items in the chart. The labels property represents an array of labels for each item. The point style property represents that typeof points shown in the chart. The legions display property represents whether you want to display the legend at the top of the Charter naught. Now what are we going to create? We're going to create this part which includes three line graphs. Now let's go to Visual Studio code. So after this div tag, which occupies four column, we will add one more div tag, which occupies eight columns with the class equals to fall hyphen LG hyphen eight. And we will close this div tag. And inside this div, we will take our table by using table tag. But glass table. Who apply Bootstrap styling. And I will add one more class table hyphen borderless. Between standard table will be without borders. And then close this table tag. And inside this table I will take row, the first row. And inside the first row I will take the first DD. That occupies two cells. All span equals to two. And we will add one more td. And inside that duty we will take our div with the class. Take Center will make the text align center. And in this div, we will take a heading tag, which is F6. And we will write the heading here, which is by a friend. And I will apply some color photos text by using inline style. And let me save this file and let's go to the browser and check. So we are getting this title by a spring, and it will look something like this. Now we will create another row for that. We need to go to rebuild Studio code. And here below this DR, we need to create one more. And inside we'll create a PD. And the first td will have the content, total spending. And we need to create one more DH. And that will contain some amount. So and in the last TED, we will have endless tag, which will have an id. Total, spending shock with a width of 100 pixels and I will keep it as 20. And let's lose this canvas tag. Now we will load Jack intent and was. So for that we need to write some JavaScript. So yo We need to copy this board which we have already written. And this was what charge one. So I'll add document chart one. And below this, we will write a comment for jog boo and yet I based on food. And then we change the name of variables, two instead of one. We will add two. And yet the idea of gammas will be total spending chart. So you can throw it any number of data. So I'll change it to as we apply weighting fires data. So I'll change it to ten. Then. It rains. And even though we don't declare background-color being renamed border, Calypso border, which will be required this added, we need only one water, that is e, one fourfold. And the labels I'll remove this. The labeled hu 10152016. 16. Lecture16 progress bar: Welcome back to another video. A progress bar can be used to show a user how far along the user is enough progress laser div tag that represent the progress bar, please another div tag inside it to represent the actual process inside the Laplace. By that process class, we visited the progress bar, the progress hyphen, but Glass represents step-load lists inside deployed this button. The role equals to roadways been, specify that the div tag is a part of progress been background hyphen color property represents the background color of progress bar. So let's see what are we going to build? We are going to create, we're going to create this section. So do create this section. We need to go to we drill studio pole. And after this do bladder can blend stat. After this div. We need to close this div and we need to create one more div with the class which is equal to Paul my to L. And inside this div, we need to add a table with the table tag. And we will use a glass table to apply the Bootstrap properties or table. Inside we will add one row. So we need to add the n inside their PR. We will add three heading rows. So this is the first one. And it will copy this and paste this basic device. So the first one will be category and top suppliers. And the second one is as suppliers. And the third one is share of managed suppliers. Let me save this and let's go to the browser and check how it looks. So I need to refresh the page. So this is how it will look. We got the three titles, category and tops up lab supplies and shed off manage supplies, which we can see. Ok. So moving further, now we need to add the rules to their table. For that, we need to go to Visual Studio Code and we need to add one more row. So for that we look to at D. And in the first UD refers to the will contain category one. And on the second line, we will invite supplier. So to get the content on the second line, we use played tag supplier 00, 5-6. And this frantically 13dB goal, what aggregate we use from tag. So I list used this. And the second 2D will have a class text center. And inside this dd we will add the number 610. And in the last TED, we will have our div tag with the class, which is equal to progress as we need province. But in order to replace and thank to progress and upload this balance, we need a div with the class, which is equal to progress. But you can apply the background color for that by using a florist and BCCI success in boot, bootstrap classes, okay? And we need to apply a rule which is equal to log this bot. And I'll close this div tag. And here we need to apply a bit. So I like an inline styling for that really close to 75%. And the content will be sandy. But let's save this fine. And let's go to the browser and said, what are we getting? Native fish. You need to stop. And the other does you can see the plug as bus. But we need to entries at the height of this. So for that we need to write an inline style. Style equals two with 25, which is $0.24. Okay, let's save this and let's go to the browser. Right now you can see the height is increased. Now similarly, we'd have to make all this in a similar way. And so we just need to be met. And we need to paste it here. And then we can change the content. So this is contiguity to lie, it is suited plan. And the text is 15. This is 27%. So 0.2 sentences. Let's do this. Let's set with another address. We need to change that dollar Vs, Vg one. Ok. And similarly, I will add, there is only one change here, but I'll show you that. It's easy to do video eight, ambiguity to legally this name. You then. And did any thing you want, the number you can put anything will sustain D. And the width is 63%. So 63, 62. And yo, we need to add one more class. Progress by iphone style. Progress happened by and strike. And let me save this and that is in the, well, it is a bit though now if I set, you can see that as types in tobacco. In this way you can add Skype's open. And well, this w equal, that is Vg info. Let me compute this so that you then have an idea. Doesn't spending 340, six, forty eight, twenty nine. Legos explored a. And this is 29. Bus on betas, 36 alleles BGN for doing so. One more activity, epically five to 2530, supplanting 0 for theta one. To find five. Vg is dot 0.71%. So you have until we need to change to 71%. Now let's save this and let's go to the browser open so we can see. So the text is black. So for that we need to go through, it feels to be on board and we can add a text, the language's text dot. And if you can see now another takes this lag. So in this way, you can add one more packet guilty for being so dry and add one more category. This VG is late, will be g hyphen light within either BG life on Lake on sort of BGI, thankfully, dark dust add VG hyphen late. Okay. So we will get back to LA. So the things you just need to change it so you are going to do this. This is our task. So this is it for this video, and I'll see you in the next video. 17. Lecture17 star icon: Welcome back to another video. In this video we are going to breed this section, store to be in this section we need to go do with also be abroad. And here in the third column, we need to remove dopamine band of 3 third. And yet I take a div with a class row. And inside the div, we will take one more day with a glass which is going to fall. Hyphen LG I offend, swells, margin doped one-point and battling Boredom 1. And border. Bottom. And color for border. The border bottom. Modern Light. Sorry, for the ladies. And I will I will close this div tag. And inside this div, I'll take one more day with a glass logistic where doodle. And inside this, we will take one more live with the glass balls. I dwell in Italy, Poland, and MY Python run. We need the margin. Sorry, MY, I've been one. We need the margin from y axis to be 1, which means from margin from dogs and Martin. And I will close this div tag. And then we need one more live inside that with a class row. And inside, now we need three columns, 123. So the bottle hyphen three pro-life and 3456. So we need to take one div with class equals two. Item three. Okay? And I'll take focuses and wasted voice for life at 3.6. Okay, so these are the three columns. And inside the first column we will add the start typing. So I boast classic bones to SBA, Font, Awesome Font, Awesome hyphen star. I fund. Oh, and I need the binding for that. So bedding hyphened blue and backed by an algebra background. The level for this, so style, background-color. There's a, E, B for B. And I need border-radius. So border radius within VS. And I will add the s And I will add upon bend off goal. Partner. Let me save this file and let's go to the browser. Getting some issue by putting the name of the agonists wrong. So not start with this dot hyphen o c. So we are getting some issues. So let's go in with studio board and sort of FA star and fear have fun stuff and oh, I'll remove and I will keep it as FA hyphen start and I'll remove the padding and let's save it and let's go to the browser. And now you can see we can have a start, but the, we will not be able to do. I'm not able to look at this style because FA hyphen star x and 0 is not hyphen o is not working. As you can see, Font Awesome, dude, seat. Let me search started. So I am not able to find the star. You can get only the start which is having a solid would let me put this SAS FSR, save this and we'll go to proudly say Lamb and getting the same thing. I think some editor. So let's use this star again. So let's use this data to be. So we have added one row and we need the background. So the villa which I've used here, I'll use same Valadier. Before that, I'll add a style equals to background. And the letters CCC, grayish color. So as against me and we can get the border and have the started began making it smaller, the size of style we can make it smaller. So what I will do is like I will add a width. It is like then dx, let's see. Two swapping or not. Then bx, so B, C. So with this getting smaller, but it did not looking good. So let's keep as it is. Okay. And now we need to add two more status again. So what we need to do is we need to copy this column will lead to update this column pasted ways because we need to stars. And the content for this is what is the content, let's say 55. And this is 55 and this is a 100. And the silver part not branch back up, so silver. And this is belongs. And the fellow we need so far, this lettuce. And for this, the burner. The last one is the ED 7X. Redo. Let's save this. Let's go to the browser. But as you can see, this valid is not visible. So let's make it right. For the padding is not working. The fact padding. So it is giving an error issue. But let's save this and let's keep it as it is. So we have successfully completed the section. Okay, so this is it for this video and I'll see you in the next video. 18. Lecture18 barchart: Welcome back to another video. In this video we are going to create this section, the bar chart section. So for that we need to go to a village to be occurred. And in this row, we need to add one more column like this. So x i close this. So we need to add more div with the class, which is equal to call hyphen LG hyphen, well, and inside those do I will take at six. And with a glass which is equal to text center. And the title will be average procurement cycle. Let's save this and let's go to the browser and check. So you that I am getting the title. And now we will add this bar chart. So for that, we need to again add one more lives with a glass bottle. I have an LG, Ivan wealth. And inside this div, I will take Denmark stag within IB, which is equal to procure. Procure main cycle. Shot. With a width of going deep, pixels and height. We'll be 100. Let me close this ten-mile stag and you load the charge inside this Dan was we need to add some Taoists flip. So you need to scroll down and you're really took off in this bowl. And we need to paste it. And we need to make some changes. So this exact bytes, you need two. Instead of forward, we need to rename it to five, being so your data for you need to change the due date of phi. And the id is broke your man. Cycle chart. In the dataset property, the label will be 2019. And in data, we need to add x. On x axis, we will have shot. And on y axis we will have 16. And the second property is x, xs, we will have medium and y axis. We will have 48. And similarly we need toward property, X axis would be long, and y axis will have the value of 36. We need the border color, so border color will be fc it 658. And we even need the background color. So background color very be different for all the three properties. So for that we need to take and add a. And the first background will be three e, 0 sevenfold. And the second background will be 47. Sardine for A3, A2, B2. And the third one will be a F15, 1F. And labels will be short, 16%. Secondly, bell will be medium, or do you 8%. And the third label would be long. Thirty-six percent puppy. And the remaining two we don't required, so we only have three. So let us save this file and you need instead of line chart, we will add bar chart five. Near that is, we need to change it to five. Type is bar beta five. We don't require this in options. And legend I, I'll keep it as display false. And on y-axis, I need stacked. You'll be true. Stack. To be true. Let me save this file and let's go to the browser and check. So here we go. We are getting the bar chart. So this is how we can create a bar chart. So we have successfully completed this section as well. So this is it for this lecture. And I'll see you in the next video. 19. Lecture19 accordion: Welcome back to another video. And this video we are going to create this section where I can take on any year off sales and you can find the details of that particular year. So to create this type of user expedience, We are going to use accordion. So let's go do we dwell pseudocode? And after those two, we need to create one more div with the class, which is equal to call hyphen LGN fn 2L. And inside this thing, we will add one more div with a class which is equal to a part in. And we need to give an ID, which is a motive to my guardian. You didn't give any name you want, but I'm giving my guardian. And inside of this div, we're going to take every day one more day with the glass guard. And we need to close this div and inside those every We'll take one more day with the class. Card. Is God. God is a box that has a header and some contents. So this is the header div. So we have given the class name and background color. We will need to write a class VG hyphens I can dream. And we need to give an ID which is equal to first heading. Again, you can give any name you want. And inside this div, we will take H2 tag with a class which is equal to margin bottom 0. And inside this x2 tag, we will take button. It's a glass which is equal to EDM, PDN, iPhone linked. And we need the white texts, so text hyphen light. And the type is equally to button. The direct and the other point to collapse. And then we need to write data-target, which is according to ID first name of diabetes first box. And we need to close this button tag. And inside, we will give sales 2019 the name of the year. Let me save this file and let's go to the browser and check. So let me refresh. So this is how the header will look. So we have completed the card header part, but we need to body part as well. So once you click that, you need to see the content for that we need to do before and after the hard-headed, we will add one more div with an ID which is equal to first. Box, the name of DID, which we have given the first bots. And he played the same idea as well. And the class, which is a query to collapse. And we need to, so when the page loads, that audience will be open. So for that we need to write a class, so reduce older contexts, and then we need to write data. Isn't patent, which is equal to my guardian. And we need to close this div and integrity Ziv, We will add one more with the class, which is equal to card hyphen body. And yet I had like some text, hello world. And let's say this fight and let's say that we are getting, so we're getting the content, but we are not able to expand and collapse. So let's see. So we forgot to write as because it is an ID. Once I say this find and if I go to the browser, now if again see the toggle, we are able to expand into our laps. Okay, so let's go to Visual Studio for and a guardian spelling as long so I'll just direct audience spelling. And, and, and then we can see this fight and it's Jake that we are able to toggle the god. And, and I put some extra text so I will remove the Hello World and I add a table. But the table tag and Atlas, which is a variable table, to add some boots type Bootstrap styling. And inside, inside this table I will add d here. And n-type the event I will add. And I'll add the edge table, the name, region. And second, third would be planned. We don't need anything in the third one. And then you need table body, D body. Okay? And so in d body, we need first dyad. And inside the DIV will FDD with East. And second duty will have amount which is 77391. You can add anything you want. Third one will be an i, then I plus equals two. And faint Font, Awesome Font, Awesome hyphen, CircleUp. And let's close this. And let's save this file and it's set in the browser. As you can see, we have created this first row. Okay? Similarly, we can add few more for list, like we did for at least pretend to exploit west and south. So east-west amount you can add anything you want just to maintain. Not and this is salt. So you can have anything you want me to go to the browser we tend to see is first knocks out the text has been added. And similarly, we need to more sales 20182017. So this is how we can duplicate. You can just copy this whole thing and we can paste it. And then we can just change the headings, the IDs. Again. The first heading is really being second heading. And then does this first box, which is a second one. That was the first one. This is the second month. Myocardium to yet is the ID. Okay. So we don't need to change anything. So the first box, so you need to change this. So second box. Okay. And what else? We need to change? Nothing. Let's save this. Okay, we need to change steadier sales 2018. I am keeping the content saying, let's see if the functionality is working or not, so it finish it, and then this is 2 thousand. Okay? Yet one more thing we need to be, need to remoteness because the first one, we have scepter Desso. So yeah, this is working fine. Without an earthiness Dr. Watts in time and change the text. We can change this whatever you want. So now we require one more, 2017. So this is a talent, you can just add the third one on your own. So this is a challenge, then you can do it on your own. Just copy the tag content, which has this whole div and then just glazed IDs and tied by yourself. This is it for this video, and I'll see you in the next video. 20. Lecture20 images: Welcome back to another video. In the last lecture, we have completed dashboard page. So in this video we will see how to display images on a webpage. So there are different style of image class in Bootstrap. So where are we going to place the image? But let see that. So this is the image which we are going to place on the homepage. So yard is our homepage which we want to display. This is the page which is already completed. So we need to place the image. This is index.html. We have completed dashboard page. Now we will see the homepage. So for that we need to go to Visual Studio code. And this is the index.html page. And after now we need to add a div tag. And inside there we will add an image tag. And we will write SRC equals two and we need to find the image. So this is the image and year is that class. So there are different types of classes. So first we will see image fluid class. So IMG I offend fluid. We need to add a Architects. So India bu. Okay, so let's close this tag, image tag and let's save this. And if I go to the home base year, you can see. So by using image fluid class, the size of the images a 100%. So if I inspect this, so here you can see image fluid and the width is Maxwell. There's a 100%, I didn't auto. So the width of the image will be a 100%. It means whatever the page size is, it win. Take that image to a 100% OK. And the second one is, let me give a with year. So if I give a width which is equal to, let say 600 pixels. And if I remove this class and the other glasses, image thumbnail. Okay, if I save this, and if I go to the browser. So here you can see the image is extended and there is a frame like border around the image. If I zoom a little, you can see there is a frame line border around the image like the Terminator. So he made some native class data frame like border around the image. Okay? And the next one is rounded. So if I save this and if I go to the browser. So as you can see, that image, Boehner's, I've been grounded. Okay? So the boundary class helps to create rounded around radius on the image. And the other class is float left. If I save this and if I go to the browser. So now the images on the left side, left aligned. So images left aligned again. And if I give a class float right? So the image will be on the right align to pin. And there are two more classes. One is MX auto. It displays the image at the centre. So let me refresh. Let's make the width of the image it unless I make it 300 and makes auto. And we need to add one more D block, OK, display block. So now the image will be in centre and, and D-block makes the position of the image individually. So these other classes which we can use for image. But for this pose and for this lecture, for this page, we need the class image fluid because we need a 100%. So let's demo this width. Let's save this and let's go to the browser. And as you can see, we have placed the image here. So this is it for this video, and I'll see you in the next video. 21. Lecture21 jumbotron: Welcome back to another we do. In this video we are going to talk about jumbotron. And where are we going to use the Jumbotron? But let's see, where are we going to use the jumbotron? So as you can see here, we are going to use jumbotron. So right now, this is the site which we are working on. So we need to add a Jumbotron in this area like this. So this is the jumbotron. And if I take you to bootstrap website, and if you search jumbotron year, okay? So this is the jumbotron which you will see. So here you can see everything is given. What are the classes which we need to use. So let use the jumbotron for this section, like this. Ok, so well that we need to go to regions to be bold and in container fluid, we need to add a div with the class jumbotron. And inside jumbotron, we will add H1 tag. And we will give a title, Welcome to India. And inside this we will add a p tag and n-type, p-type. We will add some text. So let's copy the text from here. So this is our dummy text. Option shift f to format the code. Let's save this. And let's see in the browser how it is looking. So the density, this jumbotron, we have successfully added a Jumbotron and we need to add few more classes. Okay? So here we need to add class which is equivalent to display one. So there are four types of glass. Display 1234, the size, the font size is different. So for display one, you can see the size is too big. So the difference between the H1 tag and the clouds display one is that the font weight is different. Ok? Display classes have less font-weight as compared to H1 tag. H1 tag has more font-weight, so the font weight will look heavy, but if we use this plate glass, so the font-weight is less. So if we, if I use display too, so you can see there is a change in that. So why not we use display for you. We will keep it as display to, okay? So yeah, in p tag also we need to add up last so that the font will look different. Right down the font is not looking that Barrett. So as you can see, the font has increased the size of font as NPS and the line-height paradox, OPM, please. There's two things and I want to add a learn more button here and an HR tag. This is line. We need to add this horizontal, horizontal line. So for that, after the p tag, we will add HR tag. Save it. So you can see this horizontal line has been added, and after that, we will add an a tag. Href equals two as tag. Because right now I want to keep, once the user clicked on this button, it should, it should remain on the same page. And we need to add Klaus is btn. Bt and success because we need green color and BTN notch so that the button should look big. Okay? And we will close this a tag, and inside this a tag we will write. And let's save this and let's go to the browser. Or success spelling is wrong. So as you can see, this button has been added of land more and if I click, it will remain on the same page. So this is how we can create a Jumbotron in the webpage. If you want to learn more about jumbotron, you can visit this website, getbootstrap.com, and you can search for jumbotron. As you can see if you want to add a class, MY hyphen full. So this is for y axis margin from top and bottom. So, so you can add that as well. And if you want to see if you can inspect and you can just see what, how the glass which we have added, how it behaves open. So if I click here, and if I open this jumbotron, here is the margin bottom it is 1.51.5, Adrienne, and margin top it is 1.5. So from top and bottom it take some space. So you can just go through this document if you want. Otherwise, I have explained you what is your MOOC on and how it looks. So this is it for this video and I'll see you in the next video. 22. Lecture22 media: Welcome back to another video. In this video we will create the remaining sections for the homepage. So these are the remaining sections. We have completed. The jumbotron. Okay, now we need to we need to create this sections. So for that we need to go to withdrawals, to viewport. And let me show you our homepage. So this is our homepage. And I would like to remove this for loops which we have viewed here earlier. This we don't require. So let's remove that post. So these were the four deals which we have created earlier. So I will remove this and I'll remove that weren't tag. We don't require this as well. And inside this I will use, I will add a div with a class called hyphen to L. And I'll use media or good. So what is media? So if you search the media, you needed this media object. And this is the media. For doing so, we need to take our div media. This will be done Media heading, and this will be the text of B. So as you can see, this is a media. I didn't enter text. So we will use this media object to create this sections. Okay? So let's go to results will be a pole. And your eye ladder div with the class equals two mediums. And I'll add image source, which is equal to the majors slash blues. And I'll add an alt tag will be Bruce. And I will add a width which is equal to 150 Vx. And I want to add a class. Okay, let me first complete this image. And after this, I will add one more div with the class which will equal to media body. And inside this i will add edge by bag, which is too much electronic copy. So this must be light off and yet upwind. Let's talk through this. And inside this, i will add some content. So after it's biotech, I will at some point there, which is this light pink opened this. Let's paste it here and need to format this, the optimum set clamp. Okay, so let's save this and let's go to the browser and check what are we getting there than image, title and a text. So if you can see there is no space in between amaze and vertex four. For that, we need to add a class which is equal to margin, right? Three points in this. And now if we can see that the space in between the emergence for what this media do, one simply is this glass media. And if you place the image inside it, and then the media body, the image will be on the left side and the text will be on the side of this image. It would really be like side-by-side. So as we can see, there's an image heading, enter text. Okay. So this is how we can use media. Who believed this section? Now we will delete this dipole popular destination. So for that we need to go to the studio. And I read, takes one more. After this bottom, the glass into the global fall. I felt dual. And I'll take H1 tag and Alibaba, Alibaba Beavis. And basically idea. And I add up a stone plus, which is equal to popular destinations. And let me copy this and I'll go do stylesheet. And here I will add that class and inside that bag some CSS property. So first one is background, background-color is open. Then we will add a dollar, which is one pixel solid, and the color is little clean. D9. Three. We need to add border radius, which is one grantee, dx from top left. And by this, by vx. Then five Bx bomb bottom light. And from bottom left, when Brandy beats text align. Center. Bedding is by BFS, font-size, DBAs, letter spacing, EBX, foreign family, Franklin Baltic medium. And then we need to add bach shadow, which is vx, ux, uy, vx, and the colorless five loops. And let's save this file and let's go to the browser and check. The styling is not proper, so we need to find out what's wrong with the styling. And let's go to region. So we need to remove this one, really big pixels and white pixels. And if we are, if I go to spell those up, we can see we are getting the exactly the same thing here. We are getting here, okay. This is top left and bottom right, stop left and bottom right, and top right and bottom electrodes by bits. So now I need margin, left hand margin lights. So I need to do index.html and I will add margin left for large device SAI points and marginal for large, diverse five points. Let me save this and let's do this. So as you can see, we are getting the margin from left and right. Now we will work on this section. So let's say after this popular destination, we will add that section will protect. We need to go to rebuild Sudoku. And after this, we will take one more div with the class, which is equal to, call it i and g six. And we need two more classes for that. That our padding top two points, guiding bottom two points. And I will close this div. And inside this do I even need a background color style dwelling given inline style background, which is equal to E view. And inside this, I will add one more day with a glass maybe. And we need to take the image, image, SRC equals two images, and I need reward or DPT. And architect will be Brewer. And glass will be margin-right. Three points with, I'll keep it as d 100 pixels. And let's close this tag and then I'll take a div with the class god media, media body. And in turn take h3 tag. And I need to add some classes though, classical school, margin top 0 and margin-bottom 1. And after this execute bag, I will take edge by egg. Beach Deputy of India. And I'll take one more day with a glass or two texts, does the pie. And in saying this, I add some text to, let me copy this text from the Earth. Let's distribute poll, and I'll paste it yet. And to bomb it of friendship as a field, we know that our chip dead puppet. Let's save this and let's see in the browser. But you can see we are getting an image, title, subtitle, and quantities. So I need a button for this, like the blend mode. So like we did earlier, we will take an ETag. Href would be S. And then plus, which is equal to VPN. But then success. And internal Right, learn vote. Let's see in the browser. So we are getting this lawn mowed button as well. Okay, this is primary colors, so primarily in this and let's go to the browser. So as you can see, the pellet is OK. This is something different colored part LP print this loop. Okay? Or maybe I can keep the same color. So let's keeping success. This is much better because they'll be up consistently with the colors. So in the same way, we need to add the remaining dels. Ok, so let's go to the browser and this is the depth which we need to copy that you copy this. And l is declared. If I see this and if I go to the browser, you can see, let me refresh. So as you can see, there is a paragraph here and the remaining texts is coming is two. For back. We need to go to the board and I'll show you how to do that as well. So let me cut this paragraph. And this is the media-body div, okay, after this div, I need to paste this. And let me poppy sometime ten from here. And let's go to the storyboard and I'll paste it here. Okay, let's save this and now let's go to the browser and check whether we are getting we are getting some issue. Let's check it. Which is a media body. So we need to remove this dip. Okay? We need to cut and paste after this, the medial negative. Okay? But let's save this and let's go to the browser and check. So now as you can see, do we have successfully added the content like this? And learn more should be offered at this lawn mode. And yet, now let effect, but you can learn more button is dead. Similarly, we can add the content for Pucci Varanasi. So I will do, I will complete this too, and I'll give you a task to complete this one. Okay? So you need to compute, or I compute the splotchy. And you need to compute what honesty and spinach. Okay, so let me complete Taguchi block. Ok. So this is their day which you need to copy. So just close this and copy this for loop and district yet. And we need to change the title. So I'll just copy and paste enough Arabian Sea. So let me copy this F. And let's go feed Baghdad. But the image is, let me search they made. Here is the image Pucci, let's save this. And let's go to the browser open. Here we go. I flip if Billy added this block. So the remaining two blocks you need to add. Okay. And then I'll move further and complete the second indent climate footprint. For that, we need to go to Visual Studio Code and the need to add one more after this. So I'll add one modal bills glass, which is equal to two. And inside the row, we will take one mole div with the class, all hyphens. And inside this, I will take one H1 tag and you're alert and then Climate. Let me save this file and let's go to the browser and check. So if you can see we have got buck title at an H1 tag, Indian climate. And now what we need is for poems. So for that we need to go to Visual Studio report and integ the rule. I will add one more div with the glass, which is equal to I think LG, See. And incentives. I lead one div. And inside that I will take one image tag with a source image slash someone. And I need a height of 200 pixels. But before that I will add an old type, so somewhat tied. So that I lead style equals to height a 100%. And after that, I will add a Despite tag. And inside that, I will write summit. And I need an inline style for font families. So styling bolts to font family impact. So let me save this. And after that I will add a p-type. So your need okay tag. And inside the p tag, I will add a class which is a Text justified. And here we need to add the content. So I'll go to a browser and I'll just copy this. Let's go back. And performance Option Shift F. Let me save this and let's go to the browser and check. So as you can see, we have got this box. And similarly we need to ask for this, all the three. So what I'm going to do is I'm going to copy this section and I'll paste it three then 123. And we need to change the title. Here it is when we need to add our type two. This is when I will just copy this type. This you can add anything you want. I'm just adding expert than me website so that an add this so the mean. So I am not adding the text. Yes, so spring because all this is dummy. So putting, let's save this and let's go to the browser and check. So someone wouldn't have Amy and focus. So let's change the title. To see this. As you can see, we've got the title and description has epilepsy. You can change it whatever you want. So now we will work on the footer. So this is the footsteps. So let's draw the width will still give food and we will add one module after this little. So let me add one modal, minimize this, and add one more. If after this class go an to row. Okay, then I'll feel more classes which I need to add. Padding, top two points, padding-bottom coupons. Stein equals to five, known as she 77678. And the color should be white. And intend this div, I will take one more, do that glass ball, hyphens. And D8. We need blows off eight columns and inside the inside edge for tag for contact. And after that, I'll take one more div. So I have this div and inside I have a little department of Buddhism and this is a dummy takes so it would be bored so strong. Now I will add a break tag. After the break. We'll need a text and g though. Okay. This is also doming and I'll add one more plate. And then I add a map like this. Sorry. If the map for nitrogen and he may lighten. So I plus equals two. Font, Awesome Font, Awesome essay, hyphen, hyphen maker. And I'll close this. And I need some space. So nb, SB Force Base. And after the space I late. And I need one mode, uomo, hyphens or FA, FA, hyphen. Phone seem nbsp. And phone number I will add some dummy, one number plus 91, and then I add some dummy for kids, that dummy, I need a glass. So plus equals to phi of a. And we look and nbsp And email is entered it. Let's me save this and let's go to the validation set. So we are getting this three, but not getting the map. So map, map icon and Font Awesome. So we do this though. Opsins, Herodotus, mapmaker, REP. But we need this, this, and let's go to the, now we can have this IF-THEN, so yielded this. Now we have an API and this three lines to be one below the other. So we need to add a break. Save this. And now you can see all the three on indifferent lines. Now we need to add this formulas. So after this dude. So after this div and should be close. To add one more david. Let say this entire div and paste it and then put as full go to Edit. And yet followers, so follow as a bit. So we required all this. And I can go to, we don't have bread dough. Text. We need forward, so a puppet is added. So as a Facebook and YouTube and started up. We save this and let's go to the browser. So let's set is booked. For Facebook. It is SAP, things that taught me this. Maybe Pontus on sort of we need to save this and let's go to the set M. So we are getting all this, what we required the space. Let's go to the Visual Studio Code and yoga to add margin, bright blue points. Fall indictments, we will add margin. Let's save this and still we need some more. So we will take five points. So we have come through your footer part as well and we have completed the homepage. This is their fathers were doing, and I'll say in the next video. 23. Lecture23 breadcrumb: Welcome back to another video. In this video we are going to create breadcrumb like this for all the pages apart from home and dashboard. Because on home and dashboard we don't require this. So if you can see destination page year, that is a bread crumb. So it helps to easily navigate from less than mission-based to homepage. Again, if I go to contact, you can see here there is a bread crumb. So it helps to navigate easily. If you can see on all the pages we have breadcrumb. So to clear the bread crumb, first, we need to create all look a this destination contact state MIC that disturbed and login. So let's go to Visual Studio Code and create the remaining pages. So I'll copy this goal. So once I copy this code, and I need to click on file new. And yet I have to paste the code. And you need to save with control S or command S. And we need to give the name as destination. Knowledge, GMM. Ok. So the spelling is destination. So we need to change this. So I'll rename it to destination. Okay? And I need to add a class active. Let me check in the browser. If I go to destination for gay, we need to start. Okay, once I click on destination, so you can see we're getting no content of homepage index page, so we need to change it. And the active class will make this bold. And if I go to dashboard, so we need to add active class here as well. So I'm on dashboard and yet I need to add a active class. So it highlights the navigation, okay, on homepage URL, we need to add active. So if I'm on homepage, so this glass is active. So for destination we need to change the let me close this and destination. We need to remove the voltage is not required and only keep. You need to really keep. Let me check what we need to keep. Okay, we need to remove everything apart from this image and the header. So we will remove everything. So first I will remove this row, then I'll remove this rule as well. Let me save this file and let's go to the browser and tick will give. So yeah, we are getting only the image, so we need to change the image as well. And you can see we got this amazing. And now we will add a breadcrumb on this page and then we can copy this base and base tip to that the meaning of remaining papers. Okay. So let me remove this and your I'll add a div with the class container fluid. And inside this div, I will add a tag with the class, which is a bread crumb. And I like glass, which is equal to bread crumb. Hyphen item. And inside we will add a tag and HREF equals to index dot HTML. And you're at home. And I'll add the second LA. Clouds will be again, breadcrumb. Iphone item, and a tag, a HREF equals to ash. And I'll add destination because we are on the destination page. Let me save this and let's go to the browser. And just so you can see Bowman destination. So if I click on home, it will take me to index.html, which is home base. Okay, so now we need to copy this board. And we need to create one more page which is contact. Or maybe we can create state. Okay? Or else we can really create contacts which are been so new file. And the other title should be pointing tag. Save this coding tag. Html. And the earlier definition that I need to change destination. So sorry for that. So in Gordon Tech, we don't require the image gets. So what I'll do is I'll demo this image. And yet I write on tag. And this is all. And URL change, OK. Everything is fine until it's both. Check. So here we go. Conformant contact. So we, we have created the bedroom flat, okay, fopen Dag, we need a image. So, so, so, so let me undo. So we need the image and I'll write contact. And the image will be, let's see, what does the image. And we need to add the active class. So now we will be dark state. Okay. So magically the page for state. So File New based to the board and go less state. We will act to title estates. And near the image will be spiritual. Let's see. Okay, so we will give computer does, and now MIC do they made will be seen. So let's copy this scholarly and let's create a new file. And we'll save this to MIC dot HTML. And we need to change the title to my Z. And he told him mode is active and we need to add the earth. Save this file and it's both roots. So yada, yada does MAC. We need registration and login. So this registration here, we don't require image and even login, we don't require image. So, but let's copy this and let's create a new file. Save this as registered or HTML. Here we need to write register. And Let's start from the top register. Active. We don't require this image, so the mothers save this segue for a because that is turned off and then we required login. So let's copy this. Let's create a new file. Save this as login dot HTML. And on the top will start from the top login. Active glands we need to add here. Then we need to write your login, saved it, and let us see a login. So get us working. Finally, all webpages are being created, designation contact state, MAC that disco login. So we have successfully created a Lepidus as well as the red graph. So this is it for this video and I'll see you in the next video. 24. Lecture24 nested list groups: Welcome back to another video. In this video we're going to create destination page, which looks something like this. This is a nested list group. If you go to getbootstrap.com and if you search list group, so you will see all the list groups, examples. Ok? So we will take some example and we create a one. But I will not refer this document if you want, you can refer it. I'm just showing you that we are going to use something like this. Okay, so to create something like this, we need to go to Visual Studio Code and in destination dot HTML. After the breadcrumb oil. After this tag, we will take one div with the class which is equal to list hyphen group, okay? And we need to close this div tag. And inside, we will take a div with a class which is equal to list, group item. And I'll give the name as popular destinations. Let me save this and let's go to the browser and check. So this is something which we are getting. Okay, popular destination. We need to add the color, we need to add the badge. So now moving further, we will add a badge. Who add a badge? We need to add a span tag with a class which is equal to batch. And the color of the badge will be light. And let give the content as 96. Let's save this and let's check in the browser. So you can see we are getting the batch. So if I zoom in, you can see that the letters light and the badges here, but we need the batch to be on the right side with the background and all this stuff. So let's go to the Visual Studio code. And inside. Let's group item. We need to add few more classes like the flex. Justify content between. Then align item center and BG secondary. Then we need to add text color white. Okay, so let's say this. And let's go to the browser. So your, it is popular destination the badges and the right side. And if you can see this Badges very down. Before that we need to go to middle pseudocode and year we need to add badge. I offend Bill. Let's save this and go to the browser. And if you can see here, we are getting the same thing. Ok. Now, we will add this content like this. For that, we need to go to visual studio code. And after this list item, we need to add one more live, but the class list Brooke. And inside this div we will add a tag and HREF will be ash. And here we need to add a class which is equal to list group item. And we need to add few more glasses. List group item action than flex column. Then we need to add a line item start. And when to close the beta. And inside a DAG, we will take one div with the class visited equal to the flux with which we, which will be a 100%. This divide on ten between. And we need to close this div tag. And inside this div tag we will take h5 tag and we relate the li. And inside that edge phi dagger, we will take a glass which is equal to margin bottom 1. And we need small bag and things to do. And we need to add a class which is equal to mu. No, did text, text muted. Okay, so let's save this file and we need one more thing. We need to add a paragraph. For the content. Glass will be, which is equal to more than, more than 1. And we need to add this content so I'll copy this noise. I am able to copy. So I am not able to look up in this. So next me. They leave the capital of India. Okay, I'm not writing the whole thing. Just for that effluents emulating our line. Okay, so this is it. And now, once I save this, let's go to the browser and check. So this Delhi, Delhi, the capital of India, and we are getting the whole section. Now. Similarly, we need to add four Mumbai 18 I had regarding CO2. Okay, so, so after p tag also, there is a small tag. And clouds will be text muted. Means curricular. Things do save this. So you are a distinct to do things to do. So we will add the remaining stuff, like my marriage and I had been abandoned, Gucci agora. So for that we need to go to Visual Studio pole. And here we need to copy a leader, a DAG from start to end, and we need to paste it. And here we need to change the text. They stop the things. We don't need to change the cooling, but we need to change the text on ways always of a mega city. So you can type anything you want. The content whichever you want. Okay, so I am just writing any references. Gabriel of India. Let's save this and let's see how it looks. For yesterday's Delhi, Mumbai. Similarly, we latch in, I had leveled Cauchy. So same thing. We just need to copy the ETag. How many of the aluminum much in 94 by six. Okay. 456. You can change the decks and just copy. I'm just copying and pasting it. Okay. Now similarly for spiritual destination, we need to copy the entire thing. I'll tell you what to copy because c from your main group list, Main Group and these other nested one. So we need to copy the entire div from no 1 second we need to be to close this. You just need to close this. Okay? So there's other things which we need to copy. This is a mainList group and this tag is for this container through. So I'll just copy this and I will enter. Let me save this file and let's go to the browser. And if again see popular destination, popular destination, we need to change our text to spiritual destination. Ok. So you're ibex, ritual destination this weekend change and frequency, spiritual destination T, The early, if you can see it's rich religious nation 50, unless you can change the decks. So I have created two. You can create as much as they want. And if you want to create more UPenn created. So this is like a task for you. Just copy and paste and create on your own. Doesn't remember the glass which is required Plaza which had acquired. Ok. So this is it for this video and I'll see you in the next video, the land ticket and mobile. 25. Lecture25 table: I'll come back to another video. In this video we are going to create state speeds, which looks something like this. So if I go to our application, there is nothing like now. So we will create something like this by using table. So let's go to Visual Studio poured. Ok, first let me show you get bootstrapped website. If you go to get bootstrap.com and if you search for table. So these are the some examples you can just go through it. So this is just for your reference, okay? And now you'll start what being on this. So if I were to states dot HTML, and after this bread crumb, we need to take table tag. And inside table tag, it will take table head and table head. We will take the app. And we need to have headings for table headings. So the first one is hash, okay? Then we need five more. So let me copy this and I'll paste in. So the second one is state. Third one is what he called Gold. Move forward. One is known then capital and then largest city. Let me save this file and let's go to the browser and check. So right now if you can see there's no styling, but we have given the headings like hash, they'd wake elbow zone, capital n, largest city. Now, to create this section, we need to create the body, the body and integrity body. We need to create DR. so there are eight states in India. Then if I go to this data, 28 states in India. So what I did is I created this t body. So the first data will, will be like this. So let me copy this and I'll paste it. So you will have an idea. Let me save this. First one is stable, the number one. So let's see in the browser, you can see first and it is under birthdays way, that'll oldies API, Dawn is sudden capitalism, routing and ladder cities with Shackelford. So let's copy the remaining details. So I will copy this. And after this DRL pastry, Let me say this and to format the code often shift and let me save this and let's go to the browser. So right time frequency, there is no styling, but we have added all the content for this page. Now. What I do is I like the CSS classes for this. So the Bootstrap classes per table are, first one is class equals two table. Let me save this and let's go to the browser. And now you can see we have added the styling for table. It looks much, much brighter and sleep. Okay. Then we need to add borders. So the second glass is payable, hyphened, bordered. Okay. Let me save this so that we can have an idea how it looks. So you can see this column, northern border. The other table actually brought about. It looks good. And then the third class is table. Or if I say it is, in fact we'll do browser. You can see once you hold on any rule, so it gets Highlight, okay? Now what we need is this 1 first, 1 is grey, second is wide, third one is striped pillar of what data do we need to add it last day. But I often say if this go to the browser, now you can see we have striped rows, okay? Then in DH we need this dark villa. So, so in th we need to add plus, plus equals to the head, dark. And text me to recenter. Let me save this and let's go to the browser. So as you can see, that takes citizens and dirt and the background is dark. Ok. So moving further, I need this column, this column for being good impeller like this. Ok? So we need to go to the state column 1 second, let me check. The first one is honorable addition. So this is the TD. Where do we need to add class? So plastic bowls to BG, success. And we need to copy this class and pasted on all lucky def. So if I save this and if I go to browse and you can see we have added this glass. Okay, let me add this class on HIV. On all the TDS. Sorry. Jammu and Kashmir. So let me direct this. And we don't require the steady 01234567, so I will remove this. This is by mistake. So let's pasted in there. And yet also I don't require this. Save this and let's check now. So now it is OP, correct when he states. So the color is different because that was a mistake in writing the glass interlock Vd success, we need to rights tables that says, so what I'm going to do is I will select all the BD success and anytime or didn't do. Okay. So for that we need to place command D. So it will select all the text, which again, if you are using Windows ten and bool b would be the option for you while I'm using Mac. So Command B. So I will remove this and the other leg table. Okay, they both sexes see tables exists is the last name. So right now you can see the aggregating this dollar as we are. Now, we need to add this batch new. So data can stay longer and I know that I can add a new states. So for Jonathan and Dylan Ghana, and we will add a batch new Su, var jargon. So after this, we need to add a span like we did earlier. Span plus will be badge, and the color is Badge. Second, close this tag. And inside this, i will write new. Save this, and let's go to the browser and check. And so as you can see, we have successfully added the batch in the state data and then we will like to mode for Telangana and Uttarakhand. So let me copy this badge and you need to go to London. And then automaton. So we have successfully added this badges. Now we need to add only one more thing. So if I make this model, we don't have any, if I make this model we don't have any responsive thing. Okay, so for that we need to add a class to make this table responsive. So let's do it. The other day. Every tag we will add a div tag. And inside the div tag we will add that last. So yeah, I will add a div tag with the class, which is equal to the bull responsive. And I got this DAG. And I'll paste it after their table dinosaur sign. Now, the bulb responsive again. Let's save this and let's go to the browser and Chen. Now there they believed responsive. You can see we can have exploded yet in tight that they would have us bool. So as you can see, we have completed the beads. But the speculation is the meaning that we go out in the, in the coming lectures. So this is it for this video, and I'll see you in the next video. 26. Lecture26 cards: Welcome back to another video. In this video we are going to complete MIC eBay's, which looks something like this. So to achieve this design, we will use guard. So right now you can see in our application this page is blank. So we will create something like this. But let's go to withdrawals to the authority. And let's go to MIC page. And after this red gum, we will take our div with the class. First, we need to take H1 tag for the heading. So it's one bank and the heading will be meeting incentive, one fencing and exhibition. Okay, the MIC for this. So I'll paste this year. And I'll save this and let's go to the browser and check. So we are getting this heading. Now. We, we read this Guards. Ok. So after H1 tag, we will take one div with the class, which is equal to guard, oligarchs, not guards. Okay? And in that div, we will take one more div with the class, which is equal to guard header. And inside I'll take h4 tags to give the title, which is the Bangalore International Exhibition Centers or the populace. And I'll paste it here. And after this edge for tag, after the deaths, the gardener div I will take one more live, but the glass guard body, so barred body. And inside this I will add this text. Paste this and options if f or digital format the text. So God body is also being added. So let's check. Right now you can see we have got header and bad body. Let's add the image. So image will be in the dark. So image source, which is equal to and I'll add one. I'll use garden. Let's build this. Let's add our ETag. God. One. Doll tech can be anything like you can put this title. So I'll put this title instead of darwin. Okay, let's save this and let's go to the browser. You can see we have successfully added the images image. So the image to be on top, we need to add one more plus, you're so last equal to image. I've signed up. Let's say this though image will be on the top. And then we will. If you do more guards, so let me copy this div. So when you're designing, your order, does ending lead based the ways? Because we need two more bags. And I'll say this and LC in the browser. So these are the three dogs, okay? Then we will add the content. This is Option Shift F to format. Formatting is important. So always remember to format your board. This is God one guard. Or a DAG is Bangla. Ben mentioned ten data quality data. So now lambda part body moves, it does, it's got $3. Save. And let's check in the browser. So we have flips us really change the image and the contents. So now we need this Guard's duty side-by-side. So for that, I'll go to the board and about the guards. I will add a div with the class and should equal to bar the blue. And I'll close this div. And inside this div tag, I will add all these facts. Okay, so let's back from your Delia advocate this and I pasted inside this activity then go to the builder. Now you can see we have successfully created duck guards, but now few things adding, meaning the size of the images, different, sizes, different. So we'll write n CSS for that. So I add one inline style. So I write style equals two. Max height, 200 or 250 beats. Very pulpy this styling. And I'll add in all the images. And then we will check how it looks. Let me refresh 1 second. Let's inspect and see because sometime you need to debug my exciters to 15. Let's keep it to a 100, I think so because the second major schools wall. So let's do a 100. Okay, let's copy this is taking the studios. And now you can see all the images are obscene. Height. Even you can make this a little smaller like instead of HBO, you can use h5. So that's four x five. X five. Okay, let's say this. Now you can see this is in one line. So it looks good. Remember H, I have H wave. And here also you need to change x by equal can lose in the closing tag. So now there are couple of things that I meaning bad lung mode, but then we need to add. So for that, we need to add a footer after God body in it, glad for them. So plus which is equal to four. And given a bag with HREF, ash and glass will be barred link. Let's close this tag and you write mode. Okay? And let's copy this for their part. And let's add in paula. This IS softer, dark body builders. And let's check. So we have successfully added the Learn More button as well. This looks much better. Okay, so this is how we have computed the MIC eBay's. So there's a link for this video and I'll see in the next video. 27. Lecture27 collapse: Welcome back to another video. In this video we are going to create this section which is on homepage. If I click on learn more, you can see this box expands. And if I click on this arrow, you can see some more texts is with a bone here. And if I close this, its collapse. And if I click this against prolapse, okay? So right now if I go to my homepage, URL, if I click on land mode, nothing happens. So to achieve this, we need to go to the board and we need to go to index.html page. And we need to search learn mode. Ok, so here is the Learn More button. And in below this, we will add a div tag with the class which is equal to collapse. And we need to add an ID which is equal to more about India. And yeah, we need to add some text. Okay, so let me go to home bits and year. I'll copy this text. And I studied. If I click on Learn more, open your sample site. So I will copy this text, okay? And I'll paste it inside this. So I've added the text here. So now this div is having an ID for the reference, for the reference purpose. In order to connect this particular div tag along with this button, we need to use data-toggle year. So urine, right? Data toggle with just collapse. And we are, we need to write data target. And we are targeting the ID which we have given it. So I'll copy this ID and your I will write as N. I'll paste the ID name. Okay? So let's save this unless secondly browser, I'll be able to get the collapse expand. Ok. So let's click on Learn mode. The year we go read Dan, this box has been expanded and we can see the x which we have pasted. So if I click again, it will toggle. So now we have achieved 50% of this. Now we need to add this arrow, and once you click on that arrow, it will show some more text. Before that, we need to go to Visual Studio code. After this div, we will add item so for IPE and we need to use AI. Plus it goes to S, a Font, Awesome Font, Awesome FAA, Chevron, hyphen down. And we need to write a style which is equal to pursue pointer. And we need to close this italic. And after the i tag, we will add one more div with the class, which is equal to collapse. And we need to add some more text. So for that we need to go to Visual Studio Code. And you're from Janelia, copy this text. And I'll add beer. And your, We need an ID for the reference purpose, so I will add ID, which is more about India too. So now to connect this with this adult, we need to write data toggle to collapse. And the data-target will be hash and the ID, which is this, say pasted here. And let's save this and let's go to the browser and check whether we are able to achieve this functionality or not. So one mole and then if I click on button opens, one mistake, we have that, we have delta arrow item outside the div. So what we can do is like weekend. But this whole, entire thing, and we need to paste it inside this div. Let's save this and let's go to the routers. Now if I click on Learn more Toyota's Dido, and if I click on this, you can see some vortex. So this is how we have achieved this functionality of toggling the data. So this is it for this video, and I'll see you in the next video. We'll then take that anyway. 28. Lecture28 pagination: Welcome back to another video. In this video we are going to create origination for our state page. So if I go to our application and if I go to state page here, the origination is missing, so we need to add that. So to create a pagination, we need to go to Visual Studio port, and we need to go to states dot HTML. And we need to stop at the end. And here, after this div, whether table is, we need to add UL. And inside the well, I will add a line and I'll write one. I'll go. Before giving classes, we need to give a tag, HREF, which is equal to hash. And I'll close this a tag. And this one should be inside this p tag. And let me copy this. We need four. We need four numbers. So of the 34. So I'll changes to, I'll change it to 23. And this throughputs. And now if I save this and if I go to the browser, and if we can see here, this will look something like this, but we wanted to, to look something like this. Okay, so let's go to Visual Studio Code. And yet we need to add a class which is equal to the origination. Okay? And in the LI we will add a class which is equal to the item. So let's copy this class and pasted it in all the allies. Let's save this, and let's go to the browser and check. So here as you can see, we are getting 1234, but even some styling is still missing. So let's the withdrawal studio poured. And inside a tag, we will write a class which is equal to Pj hyphen link. Let's copy this and paste it here. Let's save this and let's go to the browser. Now, as you can see, we are getting this 1234. Now we need to add previous and next. So let me copy this and paste it here. And Jada invite previous. And I rewrite next. Let me save and let's go to the browser. Now instead of previous and next I need this. Happens. So I will add LA. Do you Oh, okay. So Alibaba BY this metal base year and instead of LIGO, I would like party do you, and let's save this. And now you can see this arrows. Now we wanted the entire UL will be shifted on the right side. For that, we need to write one plus it is justified on dent. And let's say you didn't let go to the browser. As you can see, we have shifted the whole UL on the right side. Now we need to add one active class. For that we need to do with the studio Bold and your ad active class. And let's say this. So as you can see, we have completed the specialization. To create the functionality, you either need to use jQuery or the act or angular. So but in our course we are not covering that Bootstrap booths. So this is how you can create a static pagination. So this is it for this video, and I'll see you in the next video. 29. Lecture29 stackedform: Welcome back to another video. In this video we are going to putting it contact form. So right now if I go to our application and if I go to Pontiac as spades yearly benzene, that is no form. So we need to create a form. So for that we need to go to jail studio bowl. And we need to go Groupon Tag dot HTML. And after this oil tank, we will create one div with the class. It was too low. And intended is there we will be the class which is equal to L. I offend five with five columns. And to make don't form in the center, will make this div in the center, we will use a Mx auto. And let's blow this div tag. And inside this div, we will add a form tag. And inside the form time we will take a div with a class which is equal to form group. And inside this div, we will take Label. And here we need to write for and we need to give ID, which is dxdy name. Dxdy name. This ID. It means that when the user clicks on this label, automatically concern should be placed in textbooks, which is having the ID text me. And let's close this label tag and inside I will write name Boolean. And below this label tag I'll take import type, which is equal to text, and ID, which is equal to px name, which we have given. The label. And glass will be form. When bro, go apply Bootstrap style. And I'll give a placeholder, which is equal to name. And let's slow this input tag. Let's see this endless checked in the browser. So here we have achieved the first input. Now we will need even. So. Let's copy this form-group and paste idea. And instead of Namely we like email and email. Copy this and paste it here. Let's save this and let's go to the browser. Will we need to change placeholder image, say this, and this. And the earlier types would be email. Okay. Now we need, what we need is received new newsletter check box. Okay, so we will copy this. Input type will be text books. Id will be check, receive, news. Let me copy this idea and base two div. And the class will be bomb J. Input. Required placeholder for this. Label will be deceive newsletter. Let me save this and let's take into broader, too. Big. One thing we have to do is like we need this label below this input. So let's save this and let's go to the browser knife again. See this newsletter, we don't require Boolean. I again see the margin. There's a problem with the margin for that we need to add plus. So in the input. So in the label we need to add a glass plus, which is equal to form set hyphen label. Let's say this And let's forget about the need to add one more class. To insert form glue, we need form check. Let's save this and go to the browser. So now if we can see the margin issue has been resolved. Now we need, in this lecture we will not add gender. The coming up lectures, I will do that. But adults come into. So for that I need text area. So what do we do? Study abroad? And let's copy this and paste it here. And label will be text domain. So yeah, we don't require important. Instead of a, we will use text area. Okay? So text area ID will be text coming. And the other I lack domains. The placeholder will become aims. Let me save this and let's go to the browser and say that is a ASU TV or gotten some issue with the type is text. Nor we are getting some problem. We need to close this. Thanks Delia. Save this and let's go to the browser. Three opiate. So now v dot.com section as well, document input, okay? But this text area, now we need a dropdown for this export label. So I will add a drop down. So let's copy this and paste it here. And labeled four will be the drop expert. Expertises precisely when you need to copy this ID and a student here. And instead of import, we will leave select, so I will add select. We don't require input. So I'll close this. And I don't required a place holder, so I'll remove this. And we need to blow the select tag and then take the leg. This type is also required. Dictate your Lynyrd DID. And we need the glass. And really quite awesome. Opsin 11 will be bigger. And we need two more options. And then we did an end ones. Let's save this and let's check in the browser. So as you can see, this image to be expertises level. Let's say. In fact then if you can see it better, broke down. So this is also done now we will add this website and attachment or exposed to them good food bowl. And first I add dark basement. So let's copy this and paste it here. And this will be text attachment adopted, this base two. And input type will be filed. And glass will be bomb control, hyphened fight. This wouldn't be a detriment. Let's save this and I think we don't acquire this list order. Let's see. Okay, so we have successfully added detachment of the input type phi. Now we need this website or in a read-only format. So I'll copy this. These two website text, website. And learn we need to add a glass bomb control plain text. And I'll say this. If I go over the input type is text. I think we need the value. So the value is. 30. Lecture30 inineform: Welcome back to another video. In this video we are going to create this login page, which is having an inline form in our application. So if I go to our application and if I click on login, so right now this page is blank, so we need to create something like this. So for that we need to go to Visual Studio Code and we need to open login page. And after this, OL tag will create a div with a class which is equal to row. And inside this div, we will add one more div with the class, which is equal to call. I've been LG hyphen eight with eight columns. And we need to add one more class. And Max Otto, who make their div, centerline and integrity. We will add a form. To make the inline form, we need to add a class which is equal to form I fun in lane. And you're gonna need to add a label for it goes to text email. And we need that class which is equal to margin right, as m, two blue points and smartly weights. And we need to close this label and the label name will be emitted. And after this library tag, we will in put bag type, which is equal to email. You need to add some Bootstrap classes. So from hyphen control and margin bottom will be blue points and margin, right? And smartly ways, there'll be two points. And we need the ID, which is equal to text him. Place holder will be emitted. Let's close this input tag and let's save this and let's say in the browser. So yet at this label, and this is the input box. So you're, I need to add a colon. So after this input, let me place opsin shift f to format the text to fundamental goal. And I will add one more label far to do the text password. Plus my dendrite and small device, two points. And the label name will be password. And after that I will add input. Type will be password. Glass we need to add, which is form control. Margin bottom will be two points and margined right? In small devices with two points and id is equal to text password, password. And we need to add a placeholder, which is possible. Flows. There's an input tag to format option Shift F. Okay, let's save this file and let's go to the browser. Right now, you can see we have added the password PI led. Well, now we need the segue books. Remember me? So for that I relied label. Sorry, I need to add a div tag with the class. Rigidly ball2 form, hyphen check. Margin bottom is two points and margin, right? And it's one of the ways to points. And inside this div, I will take a little bit now. And plus, which is equal to form hyphen check, I felt labeled. And inside this liberal I'll take input type checkbox. And I remember me. And we need a plus. So plus p2 equal to form. I haven't checked hyphen input. Okay. Let me save this file and let's take him about it. So yes, we got just remember me. And now we need to add a button. So after this debris will add a button with class equal to btn, btn-primary submit. So this, we have added a button as well. So in this way, we then add an inline form in our applications. So this is it for this video and I'll see you in the next video. 31. Lecture31 horizontal form grid: Welcome back to another video. In this video we are going to complete this contact bomb. As in earlier lecture, I have created this farm, but the styling was something which we want to compute. This is a horizontal form, will be the label and the input box will be on the right side. For that, we need to go to Visual Studio Code and you need to come to contact dot HTML. And yet, in this form group we need to add bro and enabled we need to add a class which is equal to call Forum, label. And yell. This input. We need n year, we need to add one more class, paul S, M, I happened to points, ok, two columns. And yet we need to add a div with the class which is equal to S M. Ten means 1010 bombs, so ten plus two will be two. So I've got this div tag and I will base to deal. Let's formatted or Shift S. Okay. So now this 210, which is equal to 12, let's save this and let's check what are we getting? What are the output? So this is output name, and here is the name input, which is on the right side. So similarly we have Google for email. So let's do on withdrawals to report. And you are, we need to add the row label. We need to add this class. So just copy this class. And we need to copy this. Paste it here. But this is tricky. Algebra. Fs control command is need to save this and let's check email any medical. Similarly for this we need to do ooh, coalesce M2 is kill. So this we need to make two and this we need to make ten. So right now you can see the sea newsletter. Okay, we need to do some changes. So let's remove this rule we don't require and stirred we declared this form-group. And bro, I regarded this div and I will paste it in here. And after this, we need one more div with the class which is equal to. Sm. I often do. And this we need to remove because the whole form check will be in du plus x is equal to call as M ten. Call SM hyphen. Then let Scott. And we will paste ticked yet and we'll format of some shift f. And now let's check it in the browser. So this is, we are getting the result which is here. Okay? So now for comment will give for gender. What I have is I have this and then copy this and I'll paste it up to this farm blue. So the earliest form Brooke role, I have taken another div, but you can keep it nearly as well. That is not an issue. Then we need to be well legend thing and same thing called Pfam labels as M2 and Behlendorf, Zillow gender. Then we need a deal with the cloud store less than ten and Pfam check. And then under the Farm Tech, if I save this file, go to the browser, you can see gender, male tuning thing for coming. We will do it at all. And so farm. We need to copy this class. Okay? Then we need to offer this step. And we call this the deck. And then pasted here often shift f to format this. And as you can see, there's not that much. So what we can do is we will go on top and induce this call, iPhone six. If you can see that. Similarly, we have to do with the expertise level, that text file and website. So let me finish this 24 website. You can do it on your own and pride to finish. Okay. You can take it as a challenge. So what expertises are incomplete? Row label we need to add this class. And for select again. And it will still see this. Again. We are getting this. And if you increase the pro-life and six to call if an eight. So this will be in one line. So for attach, you can try it for a very simple goal than glass and put unit two. We'll add our dose OPM website also similarly you can do it is very simple, but 104 button, I'll do it. Okay? This is little tricky. So you might find a duplicate. So I lead one more, dove with the bottle plus called S, M and L. Close those div. And then again, I'll open a div with the class which is equal to ten. And any card does too. And basically it here. And I'll add a little. So let's say this. Let's go to the browser and see what this potential. So now these two are the meaning that you need to do. So this is a challenge, you just complete this. Okay? So this is it for this video, and I'll see you in the next video. 32. Lecture32 registration: Welcome back to another video. In this video we are going to create this form Ford Administration pays. As I go in our application, the speed is blank. So to create this fall, we need to go to the board and we need to open registration dot HTML. And after this oil tech, we will take a div with the class, which is equal to o. And in time this day we would take a div with a class which will equal to Paul iPhone 66 column and we'll make it in center, will use MAX auto. And we will close this div. And inside this div, we will take a div with the class which is equal to two and put hyphen Brooke. And margin-bottom will beat two points. Sorry, margin bottom will be three points. And inside this div we will take a class which is important to him, put elephant group beeping. And inside this we will take a span with the class as the query to import hyphen, hyphen text. And the text will be emitted. Let me save this file and let's go to the browser and check. So as you can see, we've got this text with email, and now we need to add an input beside this email. So let's do a build results for real cold. So after this, do we need to add in button type, which is equal to e-mail plus which is equal to bomb. Ivan control. And place holder is being made. Let's close this input tag. Let's save this and let's go to the browser. So we have done the mistake in it took out this input, and we need to paste your save this. And now you can see we've got this input, OK. Now, similarly, we need to do it for password. So let's copy this whole div and paste it here. And instead of emails we will we will write password. Please. Holder is password, type is password. And I think the rest of the things though. Okay, let's check. So yet it is password. Now we will do it far amount. So similarly, need to copy this code and paste it here. And your eye right amount. And input type number. Placeholder is amount. Let me check. Now we need this. This is instead up prepend. Now we will use.append, okay? So ALI cooperatives div and I'll paste it below this. And instead of, I will write append. And yet I add dots equal 0. So right now you can see we got this input similar to this. Now we will add a submit button. So we need to add a button with the glass btn, btn-primary. And submit this, and you'll get this button. Ok. So we have successfully completed the registration page. And this we have completed home. We have completed dashboard, destination contact states, and my CE, that illustration and login pages are complete and I hope you like this goes. And only thing which I wanted to say U is just practice and try to make a similar project like this and posted in the project section. Take us doing chart and post under budget section. So this is it for this video and this is it for this bows. And I hope to see you in some other lectures and in adipose lend they get and bovine.