custom shortcode will not display the wrapped content

Question

I'm trying to create a plugin to have some shortcodes utility for my custom bootstrap 4 layouts. I'm reading the shortcode API docs but I'm unable to display the contents wrapped inside the shortcodes I've created. The plugin class is loaded correctly but if I load the test page I've made, it will display only the header and the footer, the content inside the shortcodes will not be loaded. Is there a fix to this? What's wrong with the code?

<?php

/*
* Plugin Name: BootstrapGrid
*/


class BootstrapUtilsGrid {

  public function __construct()
  {
    add_shortcode('page_container', array( $this, 'pageContainer' ) );
    add_shortcode('page_col', array( $this, 'pageCol' ) );
  }

  public function pageCover()
  {
// code here
  }

  public function parallaxSection()
  {
// code here
  }

  public function pageContainer($atts, $content)
  {
    $output = '';
    $val = shortcode_atts(array(
        'type' => 'container'
    ),$atts);

    switch($val){
      case 'container':
        echo '<div class="container page-content"><div class="row">'.do_shortcode($content).'</div></div>';
        break;
      case 'container-fluid':
        echo '<div class="container-fluid page-fluid-content"><div class="row">'.do_shortcode($content).'</div></div>';
        break;
    }
  }

  public function pageCol($atts, $content)
  {
    $output = '';
    $val = shortcode_atts(array(
        'type' => 'col-12',
        'mobile' => 'display'
    ),$atts);

    if( $val['mobile'] === 'hide' ){
      switch($val['type']){
        case 'col-3':
          echo '<div class="col-md-3 col-lg-3 d-none d-sm-none d-md-block">'.$content.'</div>';
          break;
        case 'col-4':
          echo '<div class="col-md-4 col-lg-4 d-none d-sm-none d-md-block">'.$content.'</div>';
          break;
        case 'col-6':
          echo '<div class="col-md-6 col-lg-6 d-none d-sm-none d-md-block">'.$content.'</div>';
          break;
        case 'col-8':
          echo '<div class="col-md-8 col-lg-8 d-none d-sm-none d-md-block">'.$content.'</div>';
          break;
        case 'col-12':
          echo '<div class="col-md-12 col-lg-12 d-none d-sm-none d-md-block">'.$content.'</div>';
          break;
      }
    }
    else{
      switch($val['type']){
        case 'col-3':
          echo '<div class="col-sm-12 col-md-3 col-lg-3">'.$content.'</div>';
          break;
        case 'col-4':
          echo '<div class="col-sm-12 col-md-4 col-lg-4">'.$content.'</div>';
          break;
        case 'col-6':
          echo '<div class="col-sm-12 col-md-6 col-lg-6">'.$content.'</div>';
          break;
        case 'col-8':
          echo '<div class="col-sm-12 col-md-8 col-lg-8">'.$content.'</div>';
          break;
        case 'col-12':
          echo '<div class="col-sm-12 col-md-12 col-lg-12">'.$content.'</div>';
          break;
      }
    }
  }


}

$init = new BootstrapUtilsGrid;

?>

Answer 1

Because the shortcode must return a string. Avoid using the "echo" function in shortcode.

Instead of doing that:

function my_shortcode_function($content){

  echo '<div class="wrap">';
  echo '<div class="col">'.$content.'</div>';
  echo '</div>';

}

Do that:

function my_shortcode_function($content){

  $shortcode_return = '<div class="wrap">';
  $shortcode_return .= '<div class="col">'.$content.'</div>';
  $shortcode_return .= '</div>';

  return $shortcode_return;

}

Or use object buffering:

function my_shortcode_function($content){

  ob_start(); ?>

  <div class="wrap">
    <div class="col"><?php echo $content; ?> </div>
  </div>

  <?php
  $shortcode_return = ob_get_clean();

  return $shortcode_return;

}