CODEWITHSUNDEEP
twitter-bootstrap
iwis
iwis

Reputation: 1730

Difference between Bootstrap .container and .container-sm

What is the difference between Bootstrap .container CSS class and .container-sm CSS class introduced in Bootstrap 4.4?

There seems to be no difference in the comparison table included in the https://getbootstrap.com/docs/4.4/layout/overview/#containers section. I see also no difference in the Grid example included in Bootstrap documentation.

Upvotes: 0

Views: 1176

Answers (1)

iwis
iwis

Reputation: 1730

Generally, there is no difference between .container and .container-sm classes.

You can check it in the dist/css/bootstrap.css file, which contains among others this code (I've simplified it a bit):

.container-fluid, .container, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width:  576px) { .container, .container-sm                                              { max-width:  540px; } }
@media (min-width:  768px) { .container, .container-sm, .container-md                               { max-width:  720px; } }
@media (min-width:  992px) { .container, .container-sm, .container-md, .container-lg                { max-width:  960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }

The only minor difference I have found in dist/css/bootstrap.css is the code:

@media print { 
  .container { min-width: 992px !important; } 
}

which defines CSS property for .container class but not for .container-sm class. I am not sure if this minor difference is intended or not.

Upvotes: 4

Related Questions