How to create dynamic columns with Bootstrap and PHP?

Asked

Viewed 758 times

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 are marrying 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

  • Where is your <ul> or <ol>? In Bootstrap we have the list classes that display it horizontally

  • @lvcs sorry for typo. I am not using lists.

  • I think it would be better to use list or paragraph or put <br> at the end of each one

  • I cannot get a logical idea of how to solve this @lvcs problem ...

  • I’m mounting one here, it would be three columns with 10 elements each in alphabetical order?

  • This !!!! :)

Show 1 more comment

2 answers

4

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>

  • So, cool, +1, but I was looking here that opens a div most (empty), see here at Ideone, and this in bootstrap will give problem because the maximum is 12 grids... tried a few things here like including a && ($i < count($array) + 1)in the if, but did not solve... how would you solve it (not to open this last column)? Thanks.

  • 2

    +1 For the elegant array() structure and just use an if to close/open the div instead of two (one to open and close). :-]

  • 1

    @Gustavox just put and ($i < count($array)-1) in the if, so when you get to the last element of the array it will not enter the if and will not create this div.. However, there is no problem, as the HTML is structured, from top to bottom it would ignore the div. I edited the answer

  • Cool, got it, thanks for the supplementary explanation!

0

If you want everything to stay inside a column of bootstrap size 4 you can do so 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 I have helped, by my understanding of the part of your code, in this way would solve.

Browser other questions tagged php array twitter-bootstrap foreach

You are not signed in. Login or sign up in order to post.