Change the width of a Bootstrap column in percentages without breaking the rest of the grid

Question

I'm using Bootstrap. The grid overall fits my design, except one column. My design asks for a column to be 800 pixels wide, whilst Bootstrap provides either 700 or 850 (in percentages of course, I converted to example fixed numbers.

Is there a scalable and efficient way to redefining the PERCENTAGE width of a column (for example the '8' col-*-8 for all screen sizes) without breaking the rest of the columns? (through a mixin for example)

Or would I have to re-create all column classes from scratch?

Or would I just add a class to that specific element and override this specific column? (would have to adapt all other columns next to it anyway..)

it's not needed for this question. I am not asking about a specific hack/solution but rather a general method of overriding default bootstrap column widths without breaking the rest. — George Katsanos, Sep 01 '16 at 13:16
That's easy just add another class there and give that class whatever width you want. How difficult is this — Edison Biba, Sep 01 '16 at 13:34

score 1 · Answer 1 · answered Sep 01 '16 at 13:17

In Bootstrap all columns(for example col-*-8) widths are percentage specific. It is not advisable to edit the width directly to the columns width.

You can edit the width of .container class in your style.css file to override bootstrap class, which will let the bootstrap to calculate the individual column class width automatically.

Change the width of a Bootstrap column in percentages without breaking the rest of the grid

1 Answers1