Create a .col-x-lg

[baptistedonaux]

Hi everybody. I use so much bootstrap that I have few problems at few moments.

In this moment, I work on a dashboard for my client. I use all of my screen because I have many informations to show. So, I use col-xs, col-sm, col-md and col-lg for a responsive design. It's awesome except that my dashboard own few items which are too fat when my screen is superior at 1500/1600px.

I would can develop a new custom col-xlg class for my app but I don't know if other people have this problem.

In the future, our displays will be most large and I ask me if that it's necessary to develope a feature like this.

Thanks for your response.

[mdo]

For the time being, we're going to pass on doing that. That said, it's decently straightforward to add new grid tiers on your own. Just check out what we do in grids.less, copy-paste, edit, and compile.

[cvrebert]

Approximate duplicate of #9256.

[bjohnson045]

We are trying to do the same. You mention it is a basic copy/paste job to do this so we tried and it seems to work fine. Could you confirm if we should be checking anything else? Is there anything special we need to do since "lg" was previously considered full width but now that we have xl is is considered full width (besides specifying screen-lg-max)?

We have done the in our custom less file:

1. Created visible-xl, hidden-xl, make-xl-column, make-xl-column-push, make-xl-column-pull, make-xl-column-offset
2. Edited .make-grid-columns() to add .col-xl-@{index} (2 instances)
3. Added the new variables and the media/container code from grid.less

I can paste all of the code here, but it is somewhat long (maybe 70 lines). Let me know if you would prefer this to help any other users wanting to do this on their own.

[cvrebert]

@atdev2 Have opened #13046.

[christhomas]

I appear to have done a similar thing: christhomas@09c94ab

[JoshMcCullough]

I'm surprised this isn't a higher priority as a lot of people have "XL" screens now-a-days!

[baptistedonaux]

I can see in v4.0.0-alpha.