Bootstrap Fixed Width Container

Diwakar Chauhan
1 min readFeb 25, 2024

Bootstrap containers are an essential element in the Bootstrap grid system. It plays an important role during grid formation. Since the grid uses containers, rows, and columns. Hence, it layouts as well as aligns the content anywhere on the web page. The container is a wrapper for rows, and rows are a wrapper for columns.
Containers center the content, create left and right padding, and generate left and right margins for the container horizontally.

It is a Bootstrap default container, and it has a fixed width at all the breakpoints or screen sizes, like small(sm), medium (md), large ( lg), extra large (xl), or extra, extra large (xxl). After that, the container width will be changed for the next breakpoints. For example, the container width for the smaller device (>576px) is 540px and 720px for the medium size (>768px) screen, and so on.

In the given below table, the width of the container is mentioned for different device size.

How To Make Bootstrap Default Container ?: — To make a default container in the bootstrap, simply add the .container class to the <div> element.

General Syntax
<div class="container">
<!-- Default Container -->
</div>
Source Code
<div class="container bg-warning text-center mt-5">
<p class="text-white">
Bootstrap Default Container
</p>
</div>

To learn more about Bootstrap fixed width container, click here.

--

--

Diwakar Chauhan

I am a full-stack web developer, web designer, graphics designer, dba, search engine optimizer, passionate entrepreneur. https://sudhakarinfotech.com