Tip: Fluid Container with Width Control
Standard containers offer you a controlled layout with fixed widths at breakpoints. Fluid containers always stretch to the full available width and continuously adapt to screen size changes.
Advantages and Disadvantages Based on Container Type
| Class used | Advantage | Disadvantage |
|---|---|---|
.containeur |
Controls the maximum width used. | Unused left and right margins for screen sizes between two breakpoints. |
.container‑fluid |
No unused left and right margins. | Container often too wide on large screens. |
Purpose of the Tips
You can combine the advantages while neutralizing the disadvantages. You achieve a fluid behavior while controlling the maximum width. This balanced approach between fluidity and control allows you to meet the challenges of the modern web, where adaptability and visual consistency are essential.
Bootstrap Already Offers This Possibility with a Standard Class
Use the responsive container .container-xxl to achieve fluid functionality with a width limited to 1320 pixels, as with default containers.
The following tips allow you to manage more possibilities by adding very simple CSS code.
First Tip
Add a simple CSS rule to define the maximum width of fluid containers.
Use this tip to set a maximum width greater than 1320 pixels.
/* CSS code to limit the width of fluid containers */
.container-fluid {
max-width: 1500px;
}This solution applies to all fluid containers.
However, you can override the maximum width of certain containers with another CSS rule.
Second Tip
Create one or more user classes that allow you to limit the maximum width.
This approach allows you to design multiple templates and define varied layouts.
/* CSS code: User classes to limit the width of elements */
.mw1500 {
max-width: 1500px;
}
.mw1650 {
max-width: 1650px;
}<!-- HTML code: Fluid container limited by a user class -->
<div class="container‑fluid mw1650">
<h1>Welcome to our website</h1>
<p>Fluid container with defined maximum width.</p>
</div>By adopting this solution, you gain greater flexibility in designing your pages.
Third Option
To determine the maximum width suitable for most fluid containers on your website, use the first tip. This allows you to simplify your HTML code writing.
Create one or more classes to handle special cases.
Redefining Default Behavior
o redefine the default behavior of a particular fluid container, use the class .mw-100.
This class will apply 100% of the maximum width to your container based on the width of its parent element.
<!-- HTML code du bouton -->
<button class="text-bg-warning navbar-toggler"
type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-label="Toggle navigation">
<span></span>
</button>Conclusion
The controlled use of fluid containers represents an effective strategy to optimize the layout of your websites. By combining the advantages of standard and fluid containers, you manage to create designs that are both adaptable and aesthetically coherent.
The tips presented, such as adding CSS rules to limit the maximum width of containers, offer you valuable flexibility in design.
By applying these techniques, you can not only improve the user experience but also meet the varied demands of modern screens. By integrating custom classes and redefining default behavior, you ensure that every element of your site displays optimally, regardless of the device used. Adopt these practices to make the most of Bootstrap and create interfaces that combine fluidity and control.