css - How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width -



css - How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width -

i looking know if there simple solution known alter gutter on fluid default 12 grid bootstrap scheme (2.3.0).

i not familiar less if answer, please describe how changed. same sass.

please note acceptable alter gutter width, by half or one fourth, illustration if may create things simpler.

the next goals must met:

must able update bootstrap in future. means not editing actual bootstrap files. functionality should remain other objects. must simple. less 10 lines of css. example, added class or something.

i have searched throughout stack overflow , still have no thought how may go doing this. best of understanding, downloading customized bootstrap renders custom gutter widths non-fluid grids. have coded own fluid grid scheme before, understand math, worried there may consequences , helpful if known issues on class overrides shared.

i promise give credit due.

update:

changing less variables described in yoda's reply way go. have experience changing these less variables? example, believe variables have changed following:

// fluid grid // ------------------------- @fluidgridcolumnwidth: percentage(@gridcolumnwidth/@gridrowwidth); @fluidgridgutterwidth: percentage(@gridgutterwidth/@gridrowwidth); // 1200px min @fluidgridcolumnwidth1200: percentage(@gridcolumnwidth1200/@gridrowwidth1200); @fluidgridgutterwidth1200: percentage(@gridgutterwidth1200/@gridrowwidth1200); // 768px-979px @fluidgridcolumnwidth768: percentage(@gridcolumnwidth768/@gridrowwidth768); @fluidgridgutterwidth768: percentage(@gridgutterwidth768/@gridrowwidth768);

how 1 go changing this? perhaps:

@fluidgridgutterwidth768: percentage(1.5);

if has done before, appreciate shove in right direction.

the easiest way utilize customizable download twitter bootstrap provides. alter @fluidgridgutterwidth variable suit needs in form. download less files here. can access variable.less file github bootstrap project , alter piece of code:

// fluid grid // ------------------------- @fluidgridcolumnwidth: percentage(@gridcolumnwidth/@gridrowwidth); @fluidgridgutterwidth: percentage(@gridgutterwidth/@gridrowwidth); // <= 1

i thought had access less files @ first, realized using customized gui on website. download less files, , create changes. compile less files give css file or utilize less development. can utilize css or min.css deployment.

css twitter-bootstrap sass less

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -