Word Search Spring Edition $8.24       Over 150 fun challenging family friendly Word Search puzzles (with answer sheets). This Spring Edition is loosely based on the "National Day Of" themes for the Spring months of March, April, and May. Two puzzles per day, One puzzle per page in efforts to reduce crowding which offers you large print for easier reading. Minimum of 40 words per puzzle. Answer sheets for each puzzle are provided in the back of the book. Fun for yourself and for the entire family.

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.

User Comments