JavaScript Error

Container

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

Page Contents:

• About


• Fixed Width Container


• Full Width Container

About

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:

• The .container class provides a responsive fixed width container, which is centered on the page and adds empty padding to the left and right sides of the pages viewport.
• The .container-fluid class provides a full width container, that spans the entire width of the pages viewport.

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>
</div>

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:

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>
</div>

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)
	(0)