Containers in Bootstrap with examples (original) (raw)
Last Updated : 20 Sep, 2024
In Bootstrap, containers are fundamental building blocks for structuring your webpage's content. They help to organize and encapsulate content within a defined device or viewport. By using containers, you ensure that your website is responsive, with elements aligned properly, and adaptable to different screen sizes for a smooth and consistent layout presentation.
There are two container classes in Bootstrap:
| Class | Description |
|---|---|
| .container | Fixed-width layout for webpage content, ensuring consistent padding and alignment. |
| .container-fluid | Fluid-width layout for webpage content, spanning the full width of the viewport. |
Let's look at each of the above two classes in detail with examples:
**1 .container: Fixed-Width Layout
The .container class creates a fixed-width layout that adjusts its size based on the current viewport or device. This class ensures that content within it is aligned and padded appropriately, providing a visually consistent presentation across different screen sizes.
**Example: In the example we utilize Bootstrap 5 to create a layout with a dark background, displaying "GeeksforGeeks" in green text and a description in light text, within a container.
HTML `
Bootstrap Example