You currently have JavaScript disabled on your browser.

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

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

Container



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


Page Contents:



 


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:


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:

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


example1


 


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.



example2


Final Thoughts

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


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022