Search code examples
bootstrap-4containers

Bootstrap 4 Container width set as a percentage

What is the correct way to set a main page container to be percentage of the screen?

I note that a "container-fluid" should fill the entire view point, so by definition this is out of the question. So is it valid to set a % on the "container" class? Otherwise margins and padding could be set with to be the inverse of the target width percentage.

It seems there are many ways to achieve the goal, but which is correct and the cleanest?

Solution

  • Just override the max-width on the container since the container width is controlled by responsive breakpoints.

    .container {
    max-width: 80%;
}

    https://www.codeply.com/go/HAaDMSGtOp