How to create dynamic columns with Bootstrap and PHP?

Question

How to create dynamic columns with Bootstrap and PHP?

Navigation

#1 by (4 votes)
#2 by (0 votes)

2

I have 30 itens that will come in alphabetical order.

I need to distribute these items in 3 columns in alphabetical order VERTICAL .

The problem is that in Bootstrap , the blocks will marry next to each other causing the items to be in horizontal alphabetical order and not VERTICAL .

I'll show you what I need:

<div class="row">
    <div class="col-md-4">
        <span>aa</span>
        <span>ab</span>
        <span>ac</span>
        <span>ad</span>
        <span>ae</span>
    </div>  
    <div class="col-md-4">
        <span>af</span>
        <span>ag</span>
        <span>ah</span>
        <span>ai</span>
        <span>aj</span>
    </div>  
    <div class="col-md-4">
        <span>ak</span>
        <span>al</span>
        <span>am</span>
        <span>an</span>
        <span>ao</span>
    </div>
</div>

My items come from here:

<?php 
     foreach ($qartie as $bairros => $bairro) {

     } 
?>

php array twitter-bootstrap foreach

asked by anonymous 12.01.2016 / 21:03

2 answers

Verify that the dynamic name file exists on disk When should an attribute be a table or vice versa?

score 4 · Answer 1

A simple example:

<!DOCTYPE html>
<html lang="pt">

    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    </head>

    <body>
        <div class="row">
            <div class="col-md-4">
            <?php 
            $array = array( "b","a","j","k","l",
                            "x","q","j","t","c",
                            "q","e","z","u","o",
                            "e","t","h","e","p",
                            "r","d","u","z","m",
                            "t","y","u","n","y"); //array com 30 posições

            sort($array); // ordem alfabetica

            for($i = 0; $i < count($array); $i ++) { // vai percorrer todo o meu array
                echo "\t<span>{$array[$i]}</span><br/>\n"; //printa meu elemento (\n e \t apenas para formatação do html) 

                if((($i + 1) % 10 == 0) and ($i < count($array)-1)) { // como é separado de 10 em 10, quando o resto da divisão do meu contador atual por 10 for 0, quer dizer que ele fezou no item 10 daquela coluna
                    echo "\n\t</div>\n\t<div class='col-md-4'>\n"; // assim ele termina a coluna anterior e incia outra
                }
            }

            ?>
            </div>
        </div>

    </body>

    </html>

score 0 · Answer 2

If you want everything to be inside a bootstrap size 4 column, you can do that too.

<div class="row">
    <div class="col-md-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <span>aa</span>
                    <span>ab</span>
                    <span>ac</span>
                    <span>ad</span>
                    <span>ae</span>
                </div>
            </div>
        </div>
    </div>
</div>

I hope to have helped, by my understanding of the part of your code, this way would solve.