Bootstrap 4 puts columns under each other

Question

I am using Bootstrap 4 for my website.

But my columns are going under each other and not next to each other. Here is a screenshot of my problem

I want to have 4 columns next to each other and the other ones to go under that row.

Here is my HTML code:

<section class="menu">
    <div class="container">
    <div class="row">
        <div class="menu-slider">
            <div>
                <div class="text-center">
                    <h1 class="text-center">Dranken</h1>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/introduction-image.png" class="menu-img-seperator">
                    <?php
                    $args = array(
                        'post_type' => 'menu',
                        'categories'=> 'frisdranken-per-glas');

                        $my_query = new WP_Query( $args );
                        ?> <div class="col-md-4"><h3>Frisdranken per glas</h3> <?php
                        if( $my_query->have_posts() ) {
                            while ($my_query->have_posts()) : $my_query->the_post(); ?>
                                    <span style="font-weight: bold; font-style: cursive;"><?php the_title(); ?></span> - €<?php the_field('menu_price'); ?>,-<br>
                        <?php
                            endwhile;
                        }
                        ?> </div> <?php 
                        wp_reset_query();
                    ?>
            </div>
         </div>
      </div>
  </div>
</section>

Would you be able to show us the outputted HTML rather than the PHP, then we can see exactly what's going on without having to figure out what the PHP would be rendering. Also you've shown us a very small screenshot, are you sure the width is not the problem? Using `col-md-4` means they WILL stack when the screen size goes below the `md` breakpoint — Rob Quincey, Jun 27 '18 at 12:22

score 0 · Answer 1 · answered Jun 27 '18 at 12:28

ok, I don´t understand very well your question, but if you want to put 4 cols in yhe same row you ned to use col-md-3 instead of col-md-4 (12/4=3); by the other side bootstarp 4 was made to put the cols in a row container and i know that is tricky create a row container in a loop, so you can separate your representation in functions or templates, I supous that you are using wordpress

function visual_presentation($key, $nama){ //$key = frisdranken-per-glas $name = Frisdranken per glas
    $args = array(
        'post_type' => 'menu',
        'categories'=> $key);

    $my_query = new WP_Query( $args ); 
    if( $my_query->have_posts() ) : ?> 
        <div class="row">
            <div class="col-md-12">
                <h3><?= $name ?></h3>
            </div>
        </div>
        <?php       
        while ($my_query->have_posts()) : $my_query->the_post(); ?>
            <div class="row">
                <div class="col-md-3">
                    <span style="font-weight: bold; font-style: cursive;">  
                        <?php the_title(); ?>
                    </span> - €<?php the_field('menu_price'); ?>,-<br>
                </div>
            </div>
        <?php endwhile;
    endif;

    wp_reset_query();
}


<img src="<?php echo get_template_directory_uri(); ?>/assets/images/introduction-image.png" class="menu-img-seperator">
<?php
visual_presentation('frisdranken-per-glas', "Frisdranken per glas");
visual_presentation('frisdranken-per-fles', "Frisdranken per fles");
?>

Bootstrap 4 puts columns under each other

1 Answers1