Bootstrap container and container-fluid: what is the difference?
The Bootstrap container and container-fluid classes
For developing a web project in the Bootstrap framework, you need to specify a containing element that houses the Bootstrap grid system. The grid system is used to define the layout of the web pages by using a series of rows and columns.
For the containing element, you may specify either of these two classes:
- container
- container-fluid
An example showing the difference
The difference between these two containing classes is:
The .container class is the fixed width container. That does not mean it is not responsive. It is responsive; however, it is fixed based on screen size. The screen sizes include:
- xs for extra small devices (used for less than 768 e.g smart phones, mobile etc.)
- sm for small screens (From 768 pixels and up e.g. tablets)
- md for the medium screen (>= 992 pixels. Desktops/Laptops)
- lg for large screens (>= 1200. Pixels e.g. large desktops)
If you use the container class and check the webpage in a browser, it will adjust according to the screen and browser size. For example, if your current browser width is more than 1200, it will adjust to the 1170px wide. If you resize the browser to small size, it will remain same until it reaches 992px. At this point, the container class will adjust to 970px wide.
On the other hand, the container-fluid class will take the full width of the viewport. If you use the container-fluid and resize the browser, you may notice the content inside it will adjust with every pixel to take the full available width.
To make it clearer, have a look at a demo below.
A demo to understand the difference between container and container-fluid Bootstrap
To demonstrate that, I have used the same number of Bootstrap buttons in two rows. The first div is assigned the container class while the second div is given the container-fluid class.
For distinction, I am using an outer div with a non-Bootstrap class. It is just given the border and margin. See the difference initially, as well as, by resizing the screen if you are using a desktop/notebook:
See online demo and code
The markup for this example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div style="border: 1px solid green;margin: 15px;"> <div class="container"> <div class="col-md-6"> <h1>Bootstrap simple container</h1> <p>Normal Size</p> <p> <button type="button" class="btn btn-primary">container demo</button> <button type="button" class="btn btn-danger">container demo</button> <button type="button" class="btn btn-warning">container demo</button> </p> </div> </div> <div class="container-fluid"> <div class="col-md-6"> <h1>Bootstrap fluid container</h1> <p>Normal Size</p> <p> <button type="button" class="btn btn-primary">container demo</button> <button type="button" class="btn btn-danger">container demo</button> <button type="button" class="btn btn-warning">container demo</button> </p> </div> </div> </div> |
You can see, the buttons contained in the container class div moves and adjusts after certain resize or as the width of browser changes while buttons used inside the container-fluid div stays the same.