Bootstrap 4 Carousel columns instead of carousel-item

Question

Does Bootstrap support displaying grid columns or rows in Carousel instead of carousel-item -s? The idea is to have a complex grid column structures that interchange with each other just like carousel-items. For example if we have the following grid:

<div class="container">
  <div class="row" id="row1">
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
  </div>
  <div class="row" id="row2">
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
  </div>
  <div class="row" id="row3">
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
  </div>
</div>

I would like to be able to represent row1, row2 and row3 divs as carousel-items. Or perhaps if carousel-item supports having nested grid elements within its container I can simply wrap the grid hierarchy within the carousel-item ?

Solution

The Bootstrap 4 carousel still needs the carousel-item class to work, but it can be tweaked to work along with the grid columns. Just contain the row>col in each carousel-item...

https://www.codeply.com/go/ojz5BDpOej

     <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item py-5 active">
                    <div class="row">
                        <div class="col-sm-6">slide 1</div>
                        <div class="col-sm-6">slide 2</div>
                    </div>
                </div>
                <div class="carousel-item py-5">
                    <div class="row">
                        <div class="col-sm-6">slide 3</div>
                        <div class="col-sm-6">slide 4</div>
                    </div>
                </div>
                <div class="carousel-item py-5">
                    <div class="row">
                        <div class="col-sm-6">slide 5</div>
                        <div class="col-sm-6">slide 6</div>
                    </div>
                </div>
                <div class="carousel-item py-5">
                    <div class="row">
                        <div class="col-sm-6">slide 7</div>
                        <div class="col-sm-6">slide 8</div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
    </div>

Comments

[Pavan Rajput]

can It be responsive ? with "col" class ?