Bootstrap Containers
Containers
In Bootstrap 5, containers are fundamental building blocks used to create responsive web layouts. They help to manage the width of the content and align it in a structured manner. There are three types of containers in Bootstrap 5,
i).container
This is a responsive, fixed-width container. It changes its width at different breakpoints based on the viewport size, ensuring optimal spacing and alignment across various devices.
ii).container-fluid
This is a full-width container that spans the entire width of the viewport, regardless of the screen size. It’s useful when you need content to stretch across the full width of the screen.
iii).container-{breakpoint}
This is a responsive container that’s fixed-width until a specific breakpoint is reached. Beyond that breakpoint, it becomes fluid. The breakpoints available aresm,md,lg,xl, andxxl..container
The.containerclass creates a responsive fixed-width container that adapts to the viewport size. It’s centered horizontally with automatic margins.<div class="container"> <!-- Content here --> </div>.container-fluid
The.container-fluidclass creates a full-width container, spanning the entire width of the viewport.<div class="container-fluid"> <!-- Content here --> </div>.container-{breakpoint}
These containers allow you to have a responsive fixed-width container that becomes fluid at a specified break-point.
.container-sm: Fixed width untilsm(small) breakpoint (576px), then full-width..container-md: Fixed width untilmd(medium) breakpoint (768px), then full-width.
.container-lg: Fixed width untillg(large) breakpoint (992px), then full-width.
.container-xl: Fixed width untilxl(extra-large) breakpoint (1200px), then full-width.
.container-xxl: Fixed width untilxxl(extra-extra-large) breakpoint (1400px), then full-width.<div class="container-md"> <!-- Content here --> </div>Example Usage
Here’s an example to illustrate the difference between these container types,<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Containers Example</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="bg-primary text-white p-3">.container</div> </div> <div class="container-fluid"> <div class="bg-secondary text-white p-3">.container-fluid</div> </div> <div class="container-md"> <div class="bg-success text-white p-3">.container-md</div> </div> </body> </html>In this example, you can see how each container behaves differently. The
.containerwill have a responsive fixed width, the.container-fluidwill span the full width of the viewport, and the.container-mdwill have a fixed width until themdbreakpoint, after which it becomes full-width.