How to create 8 columns in Bootstrap that has 12 grid system?

Question

Sorry, I am a newbie in both PHP and CSS...

I am trying to change Evolve (WordPress) theme to make it 8 columns on a frontpage but since this theme is using Bootstrap with 12 grid system, I cannot manage to create 8 even columns. I'm changing the file called basic-functions.php and I don't know what (and where can I do to have 8 even columns).

switch ( $BoxCount ):
            case $BoxCount == 8:
            $BoxClass = 'col-md-2'; 

            break;

        default:
            $BoxClass = 'col-md-3';
endswitch;

I can understand that when the $BoxClass = 'col-md-2';, then I will have 6 columns in a row and under another 2 columns...

Now, it looks like this:

How can I make 8 columns in a row? (with or without gap)?

Answer 1

You have to edit your template so you can generate something like this:

<div class="row">
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-3">
                        1
            </div>
            <div class="col-xs-3">
                        2
            </div>
            <div class="col-xs-3">
                        3
            </div>
            <div class="col-xs-3">
                        4
            </div>
        </div>
    </div> 
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-3">
                        5   
            </div>
            <div class="col-xs-3">
                        6
            </div>
            <div class="col-xs-3">
                    7
            </div>
            <div class="col-xs-3">
                    8
            </div>
        </div>
    </div>
</div>

Its basically 12 grid layout cut in half, then those halfs are made 12 grid layout and divided by 4, which ultimately results in 8 grid column. You can't do it with your solution, because you cant divide 12 to become 4 equal parts (it would be something like col-md-1,5 and you obviously cant make something like this in bootstrap)

source: 8 Columns in Twitter Bootstrap

UPDATE: It's not as easy as copypasting this code somewhere, you would have to modify the code on many places. We can maybe try more "dirty" approach. Try this:

Paste this code to the end of your .css file:

.col-8-custom{
width: 12.5%;
}

And change the code you originally pasted into:

switch ( $BoxCount ):
            case $BoxCount == 8:
            $BoxClass = 'col-8-custom'; 

            break;

        default:
            $BoxClass = 'col-md-3';
endswitch;

Answer 2

Welcome to stack overflow.

Bootstrap and it's grid got nothing to do with php though, it's all in the css and less files. Now you might not have any less files but otherwise you could customise the boostrap grid system to have 8 columns instead of 12. You can also rebuild and customise the framework on their website here

If you dont want to modify the grid and you want even centered columns you could work with an offset

<!-- First line has the offset -->
<div class="col-md-offset-2 col-md-2">