Container is undocumented

[wmertens]

trafficstars

The doc site doesn't mention container or container-fluid, nor what to do with them and if they are necessary.

(likewise, the use of the box class in the documentation is confusing, as if it's needed)

[kristoferjoseph]

Thanks for filing this issue! I realized that the container class was added to conform with the bootstrap grid api better. I have not added it to the docs yet because I needed to look into some issues that cropped up due to the addition. It currently works just like the container class in boostrap if you want to assist in documenting it.

[dandv]

:+1: for documenting or removing the box class.

[lgg]

@kristoferjoseph still no update? :(

[kristoferjoseph]

@littleguga ya, I am doing away with the container class for the next update so I didn't want to document how Bootstrap does it. Like I said in another closed issue, it was added in a PR and it mimics Boostrap 3 functionality exactly. If you want to read on how to use it look at their docs. :/

[db0sch]

I agree with @wmertens : box is confusing. and container must be specified in the documentation. Just a quick reminder... in order to avoid to go back to Bootstrap doc. That would be perfect. Thx

[kristoferjoseph]

I hear you loud and clear buddy

[db0sch]

@kristoferjoseph : ahah. thanks buddy. I really like to use FlexboxGrid. I have a project of making a small css framework for me, based on flexbox grid. keep up the good work.

[mralexgray]

box is super confusing. container's would be nice... are they staying? what's up with the docs? they are sort of counterproductive.... i need to go look at the source.. the docs confuse me.

[darylknight]

Also found it confusing that .container is in the docs source, but not documented. I'm coming from Bootstrap 3, so I can tell what it's meant to be used for. Originally I came here to report an issue that .container doesn't work properly - if you add it to the page, you get horizontal scroll bars at certain breakpoints; only container-fluid works correctly.

I fixed this with:

.container { // Emulates Bootstrap 3
    margin-right: auto;
    margin-left: auto;
    padding-left:  15px;
    padding-right: 15px;

    @media (min-width: 768px) { width: 750px; }
    @media (min-width: 1024px) { width: 970px; }
    @media (min-width: 1200px) { width: 1170px; }
}

[AustinGil]

I posted on this a while back too. Coming from Bootstrap 3, there are some expectations that are not handled the same in Flexboxgrid. A big one is that their container and container-fluid have padding left and right, and the row's have negative padding to offset that. I really like how this works because it seems to me the best way to handle columns so that the content lines up if its in a container, or in a column

div class="container"

    Content just in the container

    div class="row"

        div class="col-md-6"
            Content in a column. Lines up niiiice.
        /div

        div class="col-md-6"
            Content in a column Lines up niiiice.
        /div

    /div

/div

Not sure how the author feels about this, but I really like it, and if anyone else is interested in doing the same, here's some CSS to set it up.

.container, .container-fluid {
    max-width: calc(100% - 2rem); // Fixes containers from stretching too wide for the screen
    padding-left: 1rem;
    padding-right: 1rem;
}
.row {
    margin-left: -1rem;
    margin-right: -1rem;
}

Would love to hear what you guys think

[jp-vibrenthealth]

also, why do container-fluid and container not mimic bootstrap's naming convention as far as which one adds the padding and which one doesn't? In my project I took out the '-fluid' on line 50:

.container {
  padding-right: $outer-margin;
  padding-left: $outer-margin;
}

and now it mimics boostrap's usage.

[gluteusmaximus69]

the documentation is poor

[i-break-codes]

.container doesn't have padding around, and hence, the content sticks to both the ends on the mobile screen.. any fix for that?