JavaScript Error

You currently have JavaScript disabled on your web browser.

This website uses JavaScript, and This web page needs JavaScript activated to work correctly.

Please active JavaScript on your web browser and then refresh this web page.


In this blog post I am referring to the Container class feature that is available with Bootstrap version 5.

Page Contents:



When using Bootstrap, Bootstrap requires that a Container class be used to contain and auto-wrap web page content in. There are currently two Container classes available to choose from:

To use either of these Container classes, place a <div> </div> element into the Body section of the web page, and then specify which Container class that Div element should represent by setting the Class attribute within that Div element.


Fixed Width Container

To use the .container class, for creating a responsive, fixed-width container, use the following syntax:

<div class="container">
  <h4>Hello World</h4>
  <p>Have a nice day.</p>

By using the .container class, the div's max-width value will automatically change based on different screen sizes, even as the screen is resized:

Extra small <576px Small >= 576px Medium >= 768px Large >= 992px Extra Large >= 1200px XXL >= 1400px
max-width 100% 540px 720px 960px 1140px 1320px



Full Width Container

To use the .container-fluid class, for creating a full width container that will always span the entire width of the screen, use the following syntax:

<div class="container-fluid">
  <h4>Hello Again World</h4>
  <p>Have a wonderful and awesome day.</p>

By using the .container-fluid class, the div's width value will always be 100% and stretch the entire width of the page.


Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

(0) pollYesResult
(0) pollNoResult

     About   |   Contact Us   |   Privacy   |   Terms & Conditions   |   © 2024 - T&J Divisions, LLC, All Rights Reserved