Bootstrap uses h t AML and C Ss elements that are specifically to be used with the HMO five Doc type.
For this reason it's important to specify the HMO five Doc type on the web page.
As you can see we've done that on line one of this sample page.
It's also important to note at the bootstrap 3 framework is a mobile first framework.
This means it is designed to be responsive to mobile devices to ensure that your web page is rendered
properly across all devices.
Make sure to include the following metadata in your head tag
in this manner.
Take the width equals device with instructs the web page to follow the screen width of the device the
initial scale equals 1 ensures that the web page does not automatically zoom out of the page in the
devices content area.
This is best illustrated with an example in this diagram.
We have an example of a web page with no viewport meditate and one with the viewport meditate.
Notice that in Figure 1 the mobile browser zooms the page out so it's compressed into the mobile devices
screen in Figure 2 the Web site does not zoom in follows the correct mobile responsive web page structure
that bootstrap is typically used for
next we need to create a container that will hold the content of our Web page the container is important
because it houses all the other elements of the page it also controls how the elements inside the container
will behave when the page is viewed on different devices generally.
There are two main types of containers fixed with containers and fluid containers also known as fill
with containers.
Let's take a look at an example.
This sample web page uses a fixed with container.
We can see that it does not scale to the full width of the browser windows content area.
This page on the other hand uses what's known as a fluid container or full with container.
It scales to the full width of the browser windows content area
in our document.
Let's start by creating a fixed with container to do so start with a div element and give it the class
Container
and that's it.
We don't have to define any of the style rules for this container because remember the bootstrap CSX
framework already includes that for us.
So everything is predefined.
We just have to give it the class Container.
Now let's go ahead and insert some content into our container.
We'll just start with the heading
and I'll just insert some sample text
and that's it.
Let's preview it in our web browser.
So this is the fixed with Leo
since it's difficult to see the fixed wing container because the background of the container is white
and so is the page background.
Let's add a background color to our container
we can modify the container class by creating
a style sheet
and just
select the container class is your selector and type in the following attributes
and after saving and refreshing our web page we can see that we've added a background color to the container
div.
So now we can more clearly see that it is in fact a fixed with container
if we wanted to changes to a fluid container.
We simply type in
dash fluid
and make sure to also update the selector in your style sheet
save the file and refers to page and we can see that the container now occupies the full width of the
content area so that's the difference between a fixed with and fluid with container.