skip to Main Content

I want to know that how we know that where to use container or container fluid and also what to do or what to avoid while using container & container fluid ?

need a clear clarity on diiference between container anf container fluid

2

Answers


  1. container sets a fixed max-width at each responsive breakpoint, while container-fluid sets the width to 100% across all breakpoints, spanning the entire screen viewport.

    Read more on this here: https://getbootstrap.com/docs/5.0/layout/containers/#:~:text=Bootstrap%20comes%20with%20three%20different,100%25%20until%20the%20specified%20breakpoint

    Login or Signup to reply.
  2. To use the .container or .container-fluid depends on the layout you want to achieve.

    .container:

    • This class provide a responsive fixed-width container.
    • This class adjust to different screen sizes with specific breakpoints but maintains a maximum width depending on the viewport or screen size.
    • You can avoid using this class when you want the content to stretch the full width of the viewport.

    .container-fluid:

    • This class provide a full-width container.
    • This class adjust to the screen size without any predefined maximum width, allowing the content to take up the entire width of the browser window.
    • You can avoid using this class when you need a consistent maximum width or when you don’t want your content to span the full width of the screen.

    For more detail: https://www.geeksforgeeks.org/what-is-the-difference-between-container-and-container-fluid-in-bootstrap-5/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search