How can I align Bootstrap Carousel indicator icons and arrow controls on the same line?-CodePudding

I use this carousel and love it: https://mdbootstrap.com/snippets/jquery/ascensus/135508#html-tab-view

The only thing is, I want the control to be around the indicators.

Currently, it's like this:

                  <            >
   SLIDE               SLIDE              SLIDE
                        ...

What I want:

   SLIDE               SLIDE              SLIDE
                 <      ...     >

already tried:

<!--Controls-->
<div >
    <a  href="#multi-item-example" data-slide="prev"><i ></i></a>
    <!--Indicators-->
    <ol >
        <li data-target="#multi-item-example" data-slide-to="0" ></li>
        <li data-target="#multi-item-example" data-slide-to="1"></li>
        <li data-target="#multi-item-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <a  href="#multi-item-example" data-slide="next"><i ></i></a>
</div>
<!--/.Controls-->

Anyone knows how I can achieve this with bootstrap classes without any wild css?

CodePudding user response：

Changing the enclosing div of the carousel to a flex, changing the flex-order, and managing the extra margins did it.

The code becomes:

<div id="multi-item-example"  data-ride="carousel">
    <div >
        <a  href="#multi-item-example" data-slide="prev"><i ></i></a>

        <ol >
            <li data-target="#multi-item-example" data-slide-to="0" ></li>
            <li data-target="#multi-item-example" data-slide-to="1" ></li>
            <li data-target="#multi-item-example" data-slide-to="2" ></li>
        </ol>

        <a  href="#multi-item-example" data-slide="next"><i ></i></a>
    </div>

    <div  role="listbox">
        // carousel images and stuff
    </div>
</div>

Refer here: Snippet