The predicted schedule, we were working with images, so in this video, we are also going to continue
working with images and I will tell you how you can show images on the front end part of your application
and observe.
So today we are going to work with images.
So in the future to show you how to show an image.
And I applied some bootstrap classes to show that image on the page.
So today, before we start, we are going to basically have an overview of the bootstrap group system.
So and this group system, I will show you that there are some predefined classes with extra small,
small, medium, large and extra large and see the same text for them.
Call.
Some call me, call LG and call Excel for respective classes and for extra extras.
We only need to we don't need to define anything with the practical implementation.
Will get to know one thing you need to observe in this.
That bootstrap container has a column of total 12 columns.
So what you need to do, you can define columns either in the multiple.
You need to define them in the multiple of 12, like you can define, for an example, a column of it
for that again, for then again for all, then six and against six.
Focus, focus, focus for is a recall.
And again, six plus six is equal to 12.
Also of you.
If you want to define any other issue, you can define a column of the ten and the next to the two plus
two is equal to.
And this way you can define a column of 12 columns by defining them and giving a proportion with your
desire what you want to give to your front in application.
So this is a syntax how you can make columns plus rules.
So we will have some idea.
This was what I was explaining that it got rid of.
The column is equal to what you can do do like it has been mentioned.
The first is of column eight and another is of column four.
So this was total about 12 and this was a total betrayal.
And this will help you and will up and just you to help have responsive design of the application.
Like in the previous article I showed you how you can render an image using bootstrap and help it with
how you can render an image with Django and then with the help of bootstrap classes, how you can make
it responsive.
So let's get started with distribution.
So I would tell you first I would go to my RESCORED editor, then I would run myself over with the command
python, manage dot be white run server.
So this would start the summer on my local machine and what we can do till the time I can show you one
thing.
So this is our template, which we had made it yesterday, so I would move to the local server.
So what, you can do it.
So this is my local server.
So I would move around with the name I had defined in the schedule.
So I would good move to my file and my image page I had defined so I would move to that route.
My image page.
OK, you can see an image had been already uploaded on this route and on this page.
So basically I showed you how you can see the responsive design, you can press control shift, i.e.,
or you can write, click and go to inspect.
So this will lead you to come developer tools.
And from here you can see the response of the design of our application like iPhone X display and iPhone
six, then pixel to excel.
Then it's fine to show the responsive design.
So one thing you notice as to when I was on on a big screen, the nav bar used to add expanded view.
But as soon as I move to a small screen so you can see the number had been collapsed.
So this is a beautiful natural bootstrap.
So this would help you in designing your front end application.
So today, what I'm going to do, I'm going to define apart my image.
Page two.
And in the short profile, I also define views toward my image.
Page two with the name is A to my image, page two.
OK, so this looks pretty fine.
So inside my file I'll define I quickly copied
and pasted here and one changes.
I need to make my image page two and it will have a image page to an estimate as well.
So inside my template, I need to define image page to that e-mail.
OK, I will move to my template folder.
OK, so.
So this is my image and I'll quickly copy this control pasted here.
Image page two.
OK, this looks pretty fine.
OK, so in the time what I do, I remove this code
and I'll see it as my image.
Page do dot estimate.
This was pretty wild, and I will move to my image page to.
It is my image page to that estimate does not exist or I made a mistake here, so I read it as an image
page.
Do sorry for the error.
Now, I'll quickly refresh this page here.
This is image page two.
So what I'm going to show you the beautiful nature of most of it.
So this is a container fluid, which you always mention.
Then inside this container, I have a rule then now I'm telling my bootstrap to divide this rule into
two columns of glass
and the glass is a good call and sticks.
And I'm also defining another column of which book, as I told you, the bootstrap will have six plus
six as well as a column weight.
So I'll also define another column.
Div Plus is a good call and six.
And this what?
Not this you can see.
Now I have a column of two six six six with each and this would sum up well.
Now I told you yesterday that this is the syntax you are going to use because I told you that I have
a static folder inside.
There are there are two images.
So in order to look at images from the static folder, possible defined, both include static and then
you need to define the syntax, the person static and static with the image, name and person again
with the calibrates.
So I'll quickly copy this.
And this image through it is an bootstrap class which helps you to make a responsive page.
Look, in this first line, I would I would put this image, OK, so this is the image I'm going to
put.
And one shortcut you can see, I can replicate and click on my document with HTML language features.
So what will it do?
It will format my source code and it will help you to better maintain the indentation of the code.
And in the next, I'll copy this.
So since I'm showing you a demo, we had done this in the previous to how to load and image.
So let me give another image that might not PNG.
I'll give this a name as a python, not PNG.
And I will move to my page and and refresh this page so you can see now I'll quickly I'll click inspect
and I'll show you.
Let me do this.
OK, so you can see here have expansion view.
This is my rule all OK.
This is not this will really help you to have a clear understanding, understanding how bootstrap works.
This is my container and this is my number.
OK, this is a no, this is the container.
I go inside a rule to disarm.
I wrote the column of the six you can the left portion is the column of six.
Then this is the image.
OK, ok, this is the column of six.
OK, and then I move to the second column over six.
Here it is that this was the second column on the six and this is the first column of six.
First second.
And that was the image.
But now as soon I change my display, I move to a Galaxy S5.
See the magic.
Yeah, it automatic collapses the image and it can help you to make much design much responsive.
So you need to inspect element in order to learn about this that this is again, call me six six with
and this is six oh, call me six in another.
So we are going to continue with this in the next lecture as well.
I'll tell you how you can render images and how what will be the responsive design of our application.
So let's catch you up in the next lecture.
So thank you, guys.
Thank you so much.
And thank you, guys.