Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Leon 101 posts 489 karma points
    Mar 09, 2015 @ 18:05
    Leon
    0

    Bootstrap 5 column Grid

    Hi.

    Can someone suggest a good way to achieve a 5 column layout using the grid?

    My boss and the designer have just come up with a wonderful visual, but the dang thing uses 5 columns and I can't convince them them not to (the bootstrap grid works in variations of 12 total columns right?)

    Leon

    Copy Link
  • Matthew Kirschner 323 posts 609 karma points
    Mar 09, 2015 @ 20:32
    Matthew Kirschner
    0

    Try using a custom template view with html and css specific to a five column grid. The link below should give you an idea of how to do this in bootstrap:

    http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap

    Copy Link
  • Paul 4 posts 75 karma points
    Mar 10, 2015 @ 11:34
    Paul
    0

    The issue here is the the standard bootstrap columns in a grid is 12 which isn't divisable by 5 to a whole number.

    If you have the less source of bootstrap and are using less you can try in your less file

    @import '/core/bootstrap-3.2.0/variables.less';
    @import '/core/bootstrap-3.2.0/mixins/grid-framework.less';
    @import '/core/bootstrap-3.2.0/mixins/grid.less';
    @grid-columns: 10;
    /* The next import will acutally generate the 10 columns */
    @import '/core/bootstrap-3.2.0/grid.less';

    This will generate the css for col-xs-1 to 10 with the correct sizes, so for 5 columns you want to use

    EDIT: alternative and easier, goto http://getbootstrap.com/customize/ and set grid-columns to 10 and generate a new bootstrap.css

     

     

     

     



     

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies