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
    Topic
  • #8235
    twitchylegs
    Participant

    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:
    http://www.themeblvd.com/demo/jumpstart/

    A screen shot highlighting the area. Need to increase the sidebar width (in blue highlight) and decrease the width of the gutter (orange highlight).
    http://i40.tinypic.com/e7dvzm.jpg

    What is the best way to approach this?

    thanks!

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

    Hello,

    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:

    http://dev.themeblvd.com/tutorial/sidebar-layouts/#widths

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

    http://codex.wordpress.org/Conditional_Tags

    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).

    #8281
    twitchylegs
    Participant

    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.

    #8287
    Jason Bobich
    Keymaster

    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.

    #15534
    Paul Littlewood
    Participant

    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:
    http://getbootstrap.com/customize/
    (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:
    http://dev.themeblvd.com/tutorial/overriding-a-framework-javascript-file/

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