Twitter Bootstrap Question posted in

Twitter bootstrap – How to achieve 15 columns in Bootstrap?

I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap. Is it even possible to transform Bootstrap into 15 cols layout? I havent seen such an example online. I’m not a huge fan of Bootstrap for small projects. It is a trend I honestly don’t understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.

But, this is it.

If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?

Tags:

2

Answers


  1. 0

    You can customize and download your own Bootstrap components by going to:

    http://getbootstrap.com/customize/

    and navigating down towards the “grid-columns”

    enter image description here

    Set your preferred number of columns and scroll to the bottom to click “Compile and Download”.

    I would generally recommend going with an even number of columns over odd however for easier math.

    Login or Signup to reply.
  2. 0

    If you can run a customized version of Bootstrap, xengravity’s answer is the way to go.

    However, if you’re using vanilla bootstrap (perhaps from a CDN or legacy code) you could create the desired effect with a little CSS tweaking and some nested rows/columns.

    Start with a 3 column layout of col-xs-4, then fill those with a row and 5 col-xs-* (I chose 3 as it was close) and tweak the width with some CSS. For example:

    <div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-3 fixed">1</div>
                <div class="col-xs-3 fixed">2</div>
                <div class="col-xs-3 fixed">3</div>
                <div class="col-xs-3 fixed">4</div>
                <div class="col-xs-3 fixed">5</div>
            </div>
        </div>
        . . .
    </div>
</div>

    and the CSS:

    .col-xs-3.fixed {
    width:20%;
}

    For an interactive example, see this fiddle.

    A cleaner way to go would be to include the CSS/LESS from the col-xs-3 and just make a fixed-col or similar class.

    Update
    The funkiness with the columns wrapping/spacing as mentioned in the comments is due to the columns’ default padding making it too large for the row and wrapping. As seen in this updated fiddle removing the padding for the .fixed columns fixes it. This may not be desirable, and as such tweaks will need to be made for your specific application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search