CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Catalin
Catalin

Reputation: 11721

bootstrap container max-width

Is it possible to set the max-width of a bootstrap container using the default settings? (without modifying the code)

I am trying to set the max-width of the container to 540px, but the css rule gets overwritten to 1140px;

Code:

<div class="container-sm">
  <div class="border border-primary">
    <p>This content should have max-width of 540px</p>
  </div>
</div>

Result:

enter image description here

https://codepen.io/catalingavan/pen/NWGapKa

Upvotes: 1

Views: 3046

Answers (1)

abhijat_saxena
abhijat_saxena

Reputation: 961

The bootstrap containers (container-sm, container-md, container-lg, container-xs) change their width based on the type of device and class used.

so in your case - since you're using container-sm, I simply created an override 

.container-sm {
    max-width: 540px;
}

Modified your codepen - https://codepen.io/AbhijatSaxena/pen/GRpMWZr

(I would also recommend setting the max-width for other types of containers as well for consistency)

Reference from bootstrap site enter image description here

Upvotes: 2

Related Questions