Hello guys, I am Shahzad and welcome election number seven. Today we are going to discuss about the grid system. So basically we'll use the grid systems to create the responsive website. Like we have a single website and if you open this website as you can see, this is a particular website. So this is the example. So if you open this website in the desktop or in a large monitor, so the layout similar to this one, if you open this website in a mobile device like iPhone success, so click on this now as you can see, the website is showing the different layout.

So this is the beauty of the grid system. You don't need to specify the settings or you don't need To add the extra coding to change the layout, okay, so now before doing this, you have to familiar with some concepts, get bootstrap. It's a front end framework. If you're not familiar with bootstrap, it's fine. I'm just telling you if you are familiar with bootstrap, so it's possible for documentation, you have great systems in saying, great layout. Now, as you can see, they're saying grid systems.

So now we can see you have the role. And in the role, you have your column, in the column, you have your content. Now the content is string. You also have the images or audio video or something like that. So the rule is, you have to define your columns in the role and you have to define Find your content, or you have to add your content in the column. So this is the rule.

Now, I'm going to create a new page so you can easily understand I'm saying, great. So publish this page, make sure the URL is the composer. Now, click on the front end editor, because we have two type of editor, the front end and also the back end. You can also use the magazine editors totally depend upon, I always use the front end editor because if you use the back end editor, you always check the settings like we will discuss about this, but for now, I'm going to use the front end layout. Okay, now, click on the element. So click on this row, we have selected a row, make sure every row always have 12 columns.

So every row has always 12 columns, you have to define the 12 column, either the 12 column, if you are dividing your 12 columns into two parts, that means you have to define the six, six columns how like this. I'm saying you have a row, one row in the row you have two columns, six and six. So six plus six equals to 12. Okay, that means you always use you always use the 12 columns. Now, click on the Edit Row. As you can see, currently, you have few options, row, stretch, column gap, full height, and disabled.

Now I'm saying design. I'm just selecting the Pick it off. So you have the big room settings here, you can also use the border and also use the model side. Now I'm going to set the big rounds. This is a big round take on this. Now you can also use the color container move, repeat and repeat.

So now as you can see the image is in our bidding because image is too small, and the column width is large. So that's why it's repeating your image. So if you are selecting the logo, repeat the line, no repeat. Click on the Save Changes. So now as you can see, it's showing you the full width of the image. Okay, now I'm saying I don't need to specify that.

Repeat something default. Fine. So this is a full column. Now if you click on this one, so you can see you Same Change Layout. So the row layout, you have different kind of columns, you have the one column, so you can see you're seeing one by one, you have two columns. It's saying one by two columns, you have one, two columns.

It's you have this kind of layout, if you divided your column to three, so they can see you have three columns, four columns, and this layout this layout is I need the two columns. Click on that create button and remove this one. So now as you can see, you have two columns. Now I'm going to add the content in the columns. Now I'm going to use single image. Now, I'm going to use the text to text row.

Okay, fine. I'm also going to use the two text blocks here. See that's both okay now. So Drake textblock from here to here. So now you have your columns. Now if you click on the row, Edit Row, you have row is trash.

If you are saying stretch the road, just click on this save. So now as you can see, you are now stretching the row, you have stretched the row for the content at the same place if you click on this one, and once again if you're seeing stretch the row and also the content, so definitely, it will stretch your content and also the row. So now click on the this stretch row and content with no padding. Now click on this one save Okay. So now you can see you are using the stress law and the content with no bearing solely depend upon how you are Working. OK, now click on the if you click on this one, although both are the same things because you you are saying that you have a single row with two columns.

So this row and this role, so these are the same things, okay, but if you click on this one, so editing this column, and also editing this column is a different thing. Okay, now click on this one, Edit Row. Now click on this one I'm saying just use the default setting. Find this image is the big wrong image. Make sure this is the big home image. You can also use the big wrong color click on this one remove this one.

You can also specify the background color. Let's suppose I'm saying this is the big on click click I'm saying, oh, here's a border, sorry, it's a border. It's not a big brown color. So this is the wrong color. If I'm saying that I'm going to use this figure on color, but definitely it will add the wrong color. Okay, now it was my ministry, okay, you have different kinds of option options.

So if you save this one, and go to the back editor, open this page at the back end, so you can see you have two columns. And as you know, this is the single row, you don't have the two row here. So this is a single row with two columns. Click on this now, so you have the same settings. Okay, fine. Now, if you click on this one, you can define your columns here.

So generally, you're going to define your parallax settings you can assign the class and are add to your columns if you are altering or if you are customizing your columns. And if you click on this one, you have the same option. here under design that you can see you have the same options. So this is your column, make sure this is your column, settings, color, then you have the same options, you can set your borders based on colors and also the image. You have the responsive make sure now you are using six column here and you are using six column here. So that means 610 612.

So you are using the 12 columns here. Now if you click on this one, and you are saying, Oh no, I'm going to use the four. Click on this click. So now as you can see, you have your four column, and you have your six columns four and six equals to time. Still you have the one column space here You have to define one column is here. So, click on this, I'm saying like this.

So I have the columns like this, click on this. So go to the editor. I'm just showing you. So now you have two columns, one is large, the second one is small because you're using the four column here and each column here, so you can also select options from here, if you the two columns like this. So you have to now crash. Okay, now, you shouldn't use so now you have similar rows and columns going this way you can do Find your holes and column when you click on the homepage.

So now as you can see, they have two columns here, four column each columns. And they have this is a four column and the eighth column in the eighth column they are using different content. So now as you can see, go to the content side. I'm just telling you here, if you remove these things, now, you have your plus button, click on this, you have now click on the row. Now you are defining the in the sixth column you are defining the row here. You can also use them here, but if you are saying that you need two columns in the Here.

So now as you can see, you have two columns. So you have one row, in this row, you have this column, and you have six columns. Fine. And now in the sixth column, you have one row with two columns, six by six column. And definitely if you create the row here, that means you have to define the column like two column six, six call. So you have six columns, you can also define the other type of layout, and you can also Okay, now fine.

Now I'm saying this is the rule. And if you click on the this button, that means you are copying the row. So this is the first row, this is the second row, so don't miss this. So for now, it's fine. So this is the row and the column column. If you always use the row and column to create the layout in the WordPress or by using the visual composer so I think this is enough for Linux, we are going first on this thing.

So thank you for watching