Check out example codes for "bootstrap container-fluid". It will help you in understanding the concepts better.

Code Example 1

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">

Code Example 2

Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

<div class="container">
  <!-- Content here -->

Code Example 3

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
While containers can be nested, most layouts do not require a nested container.

<div class="container">
  <!-- Content here -->

Code Example 4

Bootstrap Container Width			 					| Size        | Class Prefix
Extra small devices Phones (less than 768px)  			| None (auto) | .col-xs-
Small devices Tablets (greater than equals 768px) 		| 750px       | .col-sm-
Medium devices Desktops (greater than equals 992px)     | 970px       | .col-md-
Large devices Desktops (greater than equals 1200px)     | 1170px      | .col-lg-

Code Example 5

In Bootstrap, container is used to set the content's margins dealing
with the responsive behaviors of your layout. It contains the row elements
and the row elements are the container of columns (known as grid system).

The container class is used to create boxed content.

Code Example 6

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Learn ReactJs, React Native from