What is use of container-fluid Class in Bootstrap?
The .container-fluid
class in Bootstrap is utilized to create a full-width container that spans the entire viewport width, making it ideal for responsive layouts that extend across the entire screen.
Syntax
<div class="container-fluid">
<!-- Content goes here -->
</div>
Explanation:
- The
<div>
element with the classcontainer-fluid
serves as a wrapper for the content. - This class ensures that the container dynamically adjusts its width to fill the entire horizontal space of the viewport.
- Content placed within this container will scale accordingly, providing a responsive design that adapts to different screen sizes and devices.
Features
- Full-width Container: Unlike the standard
.container
class, which has a fixed width,.container-fluid
creates a fluid container that adjusts dynamically to the width of the viewport, filling the available horizontal space completely. - Responsive Design: The
.container-fluid
class ensures that content within the container adapts responsively to different screen sizes and devices, providing a consistent and visually appealing layout across various resolutions. - Versatile Usage: It is commonly used for creating hero sections, full-width banners, navigation bars, and other elements that require full-width presentation, enhancing the overall aesthetics and user experience of the webpage.