1

I'm learning Bootstrap and I want to create simple div which is centered on the page.

example of margins

I really like that auto-margin of container class, but it seems to be jump-changing based on breakpoints when resizing window width.

I want to make margins getting smaller smoothly until they become 0 when window is small enough.

I have tried to explicitly set one column layout like this:

<div class="container border">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

but the results are just the same and breakpoints all still used.

Mára Toner
  • 302
  • 2
  • 16
  • 1
    You're using Bootstrap's `.container` class, which defines max-widths for the itself at various breakpoints. Thus, the jumps as the window increases and decreases in available width. – Donkey Shame Apr 09 '19 at 23:00
  • Possible duplicate of [Container-fluid vs .container](https://stackoverflow.com/questions/22262311/container-fluid-vs-container) – showdev Apr 09 '19 at 23:05
  • I think you're looking for this: https://stackoverflow.com/questions/39032122/how-to-grow-the-width-of-a-div-as-the-width-screen-decreases-using-css or this: https://stackoverflow.com/questions/36506878/continuously-adjust-element-size-as-screen-size-changes .. otherwise it looks like you need to add more media queries. – Carol Skelly Apr 10 '19 at 01:35

2 Answers2

1

For that you shouldn't use bootstrap containers, because they have fixed width on breakpoints. For smooth transition you should manually set width to you container in % or vw and margin in same units.

Vsevolod Fedorov
  • 481
  • 1
  • 7
  • 20
1

There are two types of Bootstrap 4 Container: Fixed and Fluid.

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).

If you don't want the breakpoints, use the container-fluid class:

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid border">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

If you must, you can manually override Bootstrap's responsive max-width settings.

.container.nobreakpoints {
  max-width:100%;
  width:800px; /* maximum width before margins appear */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container border nobreakpoints">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73