At the base of Bootstrap, as well as in any other Web page, using the access for its layout, that
must be apparent container, which will be referred to as container, able to give the page the capability
to expand in a certain way or to shrink.
Obviously, according to the device and therefore to the resolution it is supposed to have, we have
seen with the Fleck's boxes in one of the past lessons that there is the possibility for the contents
to adopt in a very simple way, using some success rules which within bootstrap have already been inserted
and can be retrieved into the age html page of.
So the first element we are going to insert will be a container inserted in the following way.
In the container related Dave.
There will be also the heading hello world, which we copied and pasted in the previous lesson.
Doing this way, we set and these through our bootstrap.
Containing some fundamental features.
We are able to set our page to be displayed on all devices, as you can read in the bootstrap official
documents, the containers, as you can see, have the capability to be inserted while also simply in
a generic way, that is with all the base settings, with the simple container attribute, which will
correspond to a hundred percent of the available space in devices with less than five hundred seventy
six figure salaries solution.
So the vast majority of the smartphones after that might have some limits set according to other resolutions.
Of course, there is also the opportunity to define the container based on other types of width setting.
So if I inserted, for example, and the as breakpoint of container, we would see that also for higher
than five hundred seventy six picks, but lower than seven hundred sixty eight pixel devices, we would
have one hundred percent of the space available.
And moreover, the fluid setting would enable us to have a hundred percent of the available space,
even in screens which are higher, for example, than one thousand nine hundred twenty pixel width.
So the Molen screens with very, very high resolution.
That's a case of the full HD screens and upwards with the aim of viewing our container inside the browser.
Let's insert an additional clause in our Dave called Big Primary, which will identify a background
color for our container so that save and refresh and when checking our container inside preview, see
by shrinking it would add up to all the various dimensions we mentioned before, giving 100 percent,
starting from five hundred seventy six pixel downwards.
Obviously the more we widen our screen, the more it will come up with the space limits up to one thousand
two hundred pixels, which would be the limit within which our container will be able to operate and
consequently even incrementing the dimensions to a full screen.
It would always talk to the preset dimension into container.
Then we might insert a variety of features.
We are going to help us create our first page with Bootstrap, which fits all the devices.
That start with adding a simple row within our container.
For D class E Quadro, which we are giving another Coleraine in this case, we cannot insert again big
primary or else it will not be visible.
Therefore, we're in search.
Beechy warning another caller created on purpose to be used within the stylesheets.
Therefore, let's close and let's insert into our row.
A new heading and this case age to which we are calling.
Yes, start.
That say refresh and we see them below our age one and you got inserted with the yellow background,
which after this will follow the same width, setting the container with our flex boxes, which add
up the content, obviously, in addition to the rows, also columns can be inserted.
And in this case, bootstrap will make things easier, giving us the opportunity to insert some classes
which are set for structuring the screen in 12 possible columns within every single row.
Therefore, as classical example.
We might insert a new clause which we are calling code to with a tart coloring, therefore black, within
which we are inserting our deep start.
The lead in here, H2 and inserted a second Kalume.
This time of 10 for a total of 12 spaces, therefore 12 cells, 12 actual columns inside the single
row, which we will call B.S. and and we'll insert a different coloring, for example, subsects.
In so doing, we have insight, our road to collude with the relative contents, saving and refreshing.
We will see that inside our new row.
Obviously, big warning would be ignored as the columns we have their own specific coloring and that
we contain what inserted.
In addition to the method of dividing our continuing to 12 columns, columns identified by call from
one to 12, as we've just seen, there are other useful methods that you can see in detail, checking
the official guide along the whole course when I am talking about bootstrap.
I will personally refer only to this method to avoid you getting mixed up in approaching the framework
for the first time.
In the next lesson, we will see some already mentioned components, such as, for example, the base
colourings inserted from bootstrap in addition to other text peculiarities, which will let you start
drilling down all the functions provided.