No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Basic Container
   
 
 
<MDBContainer>
  <!-- Content here -->
</MDBContainer>

 

  Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose
  from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning
  it’s 100% wide all the time).
  
 
  

  While containers can be nested, most layouts do not require a nested container.

 
Container fluid
   
 
 
<MDBContainer fluid>
  <!-- Content here -->
</MDBContainer>

 
Use fluid prop for a full-width container, spanning the entire width of the viewport.
 
Container with different Size
   
 
 
<MDBContainer size="sm">
  <!-- Content here -->
</MDBContainer>

<MDBContainer size="md">
  <!-- Content here -->
</MDBContainer>

<MDBContainer size="lg">
  <!-- Content here -->
</MDBContainer>

<MDBContainer size="xl">
  <!-- Content here -->
</MDBContainer>

  
The table below illustrates how each container’s max-width compares to the original
  .container and .container-fluid across each breakpoint.
 
 
    
      Extra small
 
      <576px		 
    
      Small
 
      ≥576px		 
    
      Medium
 
      ≥768px		 
    
      Large
 
      ≥992px		 
    
      Extra large
 
      ≥1200px
 
  
.container 
    100% 
    540px 
    720px 
    960px 
    1140px
 
  
.container-sm 
    100% 
    540px 
    720px 
    960px 
    1140px
 
  
.container-md 
    100% 
    100% 
    720px 
    960px 
    1140px
 
  
.container-lg 
    100% 
    100% 
    100% 
    960px 
    1140px
 
  
.container-xl 
    100% 
    100% 
    100% 
    100% 
    1140px
 
  
.container-fluid 
    100% 
    100% 
    100% 
    100% 
    100%