This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Edit Bootstrap column and gutter width

  • Creator
  • #8235

    What would be the best practice for editing the column and gutter width without blowing things up? This is only necessary for a single home page layout.

    Here is a real simple example of what I’m trying to achieve – from the Jump Start demo page:

    A screen shot highlighting the area. Need to increase the sidebar width (in blue highlight) and decrease the width of the gutter (orange highlight).

    What is the best way to approach this?


Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
  • #8236
    Jason Bobich


    It’s not going to be all that easy to actually mess with Bootstrap’s grid system CSS (i.e. column and gutter widths). However, you can adjust the sidebar layouts of the theme to work within the constraints of the Bootstrap scaffolding system pretty easily from your Child theme’s functions.php.

    Start by checking out this article:

    When you filter in your changes, you’d use WordPress conditionals to apply them to certain pages only.

    After you’ve read here: Now, if you really wanted to blow up the columns and put them into your own full control, you’d probably just want to filter in your own column classes, and style those yourself — floating the columns, declaring widths, desclaring gutter margins, etc. You’d be filtering in your own column classes to style that aren’t the Bootstrap classes (i.e. span2, span4, etc).


    So, is it safe to say the important lesson here is – When designing a site to be developed using JumpStart, its advisable to use a design that fits into a 12 column grid system using 60px columns and 20px gutters.

    Jason Bobich

    Jump Start provides you the Bootstrap grid system, out of the box. So, if you want to stick with that, then yes this is the case.

    However. if you want to incorporate your own grid system, you can totally do that, too. Just filter in your own classes for the columns and style them.

    Paul Littlewood

    I’m a bit late on this but a relatively easy way I have used to customise the Bootstrap grid used by Jumpstart is:

    Compile a new, customised copy of Bootstrap using:
    (There is a field for changing the gutter size)

    Copy the customised Bootstrap to your child theme and overwrite Jumpstart’s copy of Bootstrap using this method:

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.