MDB Bootstrap carousel indicators change position

Keywords: html css bootstrap-4 mdbootstrap

Question: 

I'm currently working on a site that uses MDB bootstrap for all the components. I've been working on a carousel that contains cards thats moved left and right based on the indicator being clicked.

The code for the carousel section is as follows:

<div style="align-items:center" class="carousel-container">
                            <div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">

                                <!--Controls-->
                                <div class="controls-top">
                                    <a class="btn-floating" href="#carousel-example-multi" data-slide="prev">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                    <a class="btn-floating" href="#carousel-example-multi" data-slide="next">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </div>
                                <!--/.Controls-->
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-multi" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-multi" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-multi" data-slide-to="2"></li>
                                    <li data-target="#carousel-example-multi" data-slide-to="3"></li>

                                </ol>

                                <!--/.Indicators-->
                                <!--carrosellll-->
                                <div class="carousel-inner v-2" role="listbox">

                                    <div class="carousel-item active">


                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in London, UK<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                            </p>

                                        </div>

                                    </div>
                                    <div class="carousel-item">
                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in Calgary, Canada.<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                                            </p>

                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in Canary Islands, Spain.<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in Bangkok, Thailand.<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.                                                <br><br><br><br />
                                            </p>
                                        </div>
                                    </div>

                                    <a class="carousel-control-prev" href="#carousel-example-multi" 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="#carousel-example-multi" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>

                                </div>
                                <br /><br /><br />
                            </div>
                        </div>

below is a short gif of what the carousel looks like when it's being processed.

enter image description here

(I know that the error is caused by the different sizes of text changing the size of the card, but I'm unsure as to how to make it a fixed size or make the indications a fixed position)

Answers: