HTML menu to PHP with Bootstrap not look the same

Question

I have my menu styled with Bootstrap. My dropdown menu was like that with html+bootsrap:

`

<div class="container">
   <div class="row">
      <ul class="col-sm-3">
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>                              
      </ul>
      <ul class="col-sm-3">
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>                              
      </ul>
      <ul class="col-sm-3">
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>                  
      </ul>
      <ul class="col-sm-3">
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>              
      </ul>
   </div>
</div>

I used the class col-sm-3 every 4 items to achieve that.

But i cant do that in php cause i am using foreach loop and the result is like this one:

I tried with col-sm-3 but not..

    <div class="collapse navbar-collapse btnCollapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <?php foreach ($navItems as $item) { ?>
        <li class="dropdown">
            <a href="<?php echo $item['slug']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $item['title']; ?><span class="caret"></span></a>
            <?php if(isset($item['dropdown'])){ ?>
               <ul class="dropdown-menu" role="menu"> 
                   <div class="container">
                      <div class="row">
                          <ul class="col-sm-3">
                            <?php foreach($item['dropdown'] as $subitem) { ?>
                               <li><a href="<?php echo $subitem['slug'] ?>"><?php echo $subitem['title'] ?></a></li>
                            <?php }; ?>
                          </ul>
                      </div>
                   </div>
               </ul>                     
         <?php   }; ?>
        </li>
        <?php }; ?>
      </ul>
    </div>

WHats the way to achieve that?

Maybe should I use For loop instead of foreach? I dont know..

Any feedback?

please post your output HTML as well.. From your current code and output I can assume that you're having one loop for all menu items while in Desired output HTML have multiple parent-child menu items. — Shaunak Shukla
– Shaunak Shukla, Commented May 22, 2017 at 10:15
The 1st image is my output of html, that the dropdown and when i turn it to php loop is like the 2nd one — Maria
– Maria, Commented May 22, 2017 at 10:17
You need extra css codes. here is a example bootsnipp.com/snippets/featured/large-dropdown-menu — Mehmet S.
– Mehmet S., Commented May 22, 2017 at 10:19
@MehmetSoylu i have it.. just the col-sm-3 in not applied to the array i have for the dropdown menu — Maria
– Maria, Commented May 22, 2017 at 10:20

Shaunak Shukla · Accepted Answer · 2017-05-22 10:29:38Z

1

<div class="collapse navbar-collapse btnCollapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <?php foreach ($navItems as $item) { ?>
        <li class="dropdown">
            <a href="<?php echo $item['slug']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $item['title']; ?><span class="caret"></span></a>
            <?php if(isset($item['dropdown'])){ ?>
               <ul class="dropdown-menu" role="menu"> 
                   <div class="container">
                      <div class="row">
                        <?php $i = 0; foreach($item['dropdown'] as $subitem) { 
                          if($i%4==0){ 
                             echo "<ul class="col-sm-3">";
                           } ?>
                               <li><a href="<?php echo $subitem['slug'] ?>"><?php echo $subitem['title'] ?></a></li>
                          <?php if($i%4==3){ 
                          echo "</ul>";
                          }
                          $i++;
                        }; ?>
                      </div>
                   </div>
               </ul>                     
         <?php   }; ?>
        </li>
        <?php }; ?>
      </ul>
    </div>

In your desired output you need 4 colums, so I devided menu items by 4 to put column i.e. if($i%4==0) for starting <ul> and if($i%4==3) for ending </ul>.

edited May 22, 2017 at 10:29

answered May 22, 2017 at 10:22

Shaunak Shukla

2,3472 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maria Over a year ago

Shaunak is working just for the last 4... Not for the whole dropdown

Shaunak Shukla Over a year ago

@Maria, I have updated my answer just now please check that.

Collectives™ on Stack Overflow

HTML menu to PHP with Bootstrap not look the same

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related