Containers in the Bootstrap ("container-fluid" and "container")

Programming, development, testing

→

Bootstrap - buttons, menus, dialog, slider ... Containers for placing elements

→

Containers in the Bootstrap ("container-fluid" and "container")

Looked at 6711 times

Containers in the Bootstrap ("container-fluid" and "container")

last updated: 9 January 2019

container-fluid for such an element, the width is not limited and it is 100% of the screen.
In other words, it is a block element and it stretches to the entire width of the screen.
container-fluid does not contain left and right indentation.

container for such an element the maximum width is limited 1200px
container contains left and right indents.
If the screen is smaller 1200px then container will take the entire width of the screen minus left and right indents.

Example

Html

<html>

     
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     
     <body>

          
          <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>

          
          <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

          
          <div class="container" style='background-color:gold;'>
               container
          </div>

          <br>

          <div class="container-fluid" style='background-color:lightblue;'>
               container-fluid
          </div>

     </body>

</html>

Example we look, we test

Note!

container-fluid is not embedded inside container

Html this is not correct

container is not embedded inside container-fluid

Html this is not correct

Where it is used "container"

container used for row ...

Where it is used "container-fluid"

container-fluid used for row ...
as well as used for navbar ...

← Previous topic
Bootstrap where to download and how to connect?

Next topic →
Bootstrap 4 difference from Bootstrap 3