Bootstrap 4 Containers

Containers are the basic layout elements in Bootstrap. They wrap the site content and align it properly.

Types of Containers

.container – gives a fixed width, responsive layout
.container-fluid – gives a full-width layout

Fixed Container

<div class="container">
  <h1>Bootstrap Page</h1>
  <p>This is a fixed container.</p>
</div>

Fluid Container

<div class="container-fluid">
  <p>This is a fluid container.</p>
</div>

Container Padding

<div class="container p-3">
  <p>With padding</p>
</div>

Container Border and Color

<div class="container border bg-primary text-white">
  <p>Styled container</p>
</div>

Responsive Containers

<div class="container-sm">Small</div>
<div class="container-md">Medium</div>
<div class="container-lg">Large</div>
<div class="container-xl">Extra large</div>

Important Notes

Responsive containers adapt to different screen sizes using breakpoints.

Conclusion

In this blog, you learned advanced Bootstrap topics like the Affix Plugin, Filters, and Containers. These tools help you build dynamic, responsive, and user-friendly websites. Whether it’s sticking a navbar, filtering search results, or setting up proper layout containers — you now have a solid foundation to build on.

In our next blog, we will explore Bootstrap colors, spinners and more, which are the tools added on BS 4 for every aspiring developer. Stay tuned!

Request more information

Bootstrap 4 Containers