Bootstrap 4 Layout:
Bootstrap 4 layout uses container classes to wrap the webpage contents. It contains two container classes as shown in the following:
- .container: This class represents a responsive, fixed-width container.
- .container-fluid: This class represents a full-width container.
Containers:
- Containers are the basic layout element in Bootstrap 4.
- Containers are required when using a bootstrap default grid system.
- The .container class is used to wrap the webpage content with a fixed width (means max-width changes at each breakpoint) based on screen size.
- The .container class has a max-width pixel value.
- The .container class is used to create a boxed content layout and set the content's margins and paddings dealing with the responsive behaviors of your webpage layout.
- The .container class resizes in chunks at several certain widths or sizes and controlled by media queries.
You can create a fixed-width container by using the .container class as shown in the following:
<div class = “container”>
// Put content here
</div>
Container-fluid:
- The .container-fluid class will take the full width of the viewport or screen.
- The .container-fluid is max-width 100%.
- If you use the .container-fluid class and resize the window or browser, you may notice the content inside it will adjust with every pixel to take the full available width.
You can create a full-width container by using the .container-fluid class as shown in the following:
<div class = “container-fluid”>
// Put content here
</div>
The following example shows a simple web page with a full-width container:
<div><p>this is my first demo</p></div>
Responsive breakpoints
As Bootstrap is developed to be mobile-first, we use media queries to create responsive breakpoints for our layouts and interfaces. These breakpoints are based on minimum viewport widths and it allows us to scale up elements as the viewport changes. Bootstrap uses the following media query ranges or breakpoints for layout, grid system, and components.