Containers in Bootstrap with examples

In bootstrap, container is used to set the content’s margin. It contains row elements and the row elements are container of columns. This is known as grid system.

There are two container classes in bootstrap:

  1. .container
  2. .container-fluid

Let’s look at each of the above two class in details with examples:



  • .container: The .container class provides a responsive fixed width container.

    In the below example, the div with class “container” will have a fixed left and right margin and will not take the complete width of it’s parent or the viewport.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Bootstrap container class -->
    <html>
    <head>
      <title>Bootstrap Container Example</title>
        
      <!-- Add Bootstrap Links -->
    </head>
      
    <body>
          
        <!-- Since we are using the class container, the below
            div will not take complete width of it's parent. -->
        <div class="container" style="background: green;">
          <h1>GeeksforGeeks</h1>
          <p>A computer science portal for geeks.</p
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

  • .container-fluid: The .container-fluid class provides a full-width container which spans the entire width of the viewport.

    In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Bootstrap container-fluid class -->
    <html>
    <head>
      <title>Bootstrap Container Example</title>
        
      <!-- Add Bootstrap Links -->
    </head>
      
    <body>
      
        <!-- Since we are using the class container-fluid, the below
            div will take-up complete width of the viewport and 
            will expand or contract whenever the viewport is resized -->
        <div class="container-fluid" style="background: green;">
          <h1>GeeksforGeeks</h1>
          <p>A computer science portal for geeks.</p
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.