I have spent approximately 2 hours searching and attempting over 15 solutions, but none of them have been successful. The issue involves a slick-slider structured as follows:
<section id="testimonial-section" class="pt-4 pb-0 px-4 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-4">Student Evaluations</h2>
<div class="row">
<div class="col slide-col">
<div class="slider">
<div>
<blockquote class="blockquote text-center">
<p class="mb-0">"Text Paragraph 1"</p>
</blockquote>
</div>
<div>
<blockquote class="blockquote text-center">
<p class="mb-0">"Text paragraph 2."</p>
</blockquote>
</div>
<div>
<blockquote class="blockquote text-center">
<p class="mb-0">"Text paragraph 3."</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>
I am in need of a solution where each div without a class is vertically centered within the enclosing slider frame when displayed on the screen. The current layout has these divs positioned at the top of the slider, resulting in unnecessary space at the bottom.
I have experimented with using d-flex on the slider itself along with align-items-center and align-self-center on each div without a class.
Additionally, I have attempted to make the slider display as an inline block and apply the my-auto command to each classless div.
Efforts to use table cell have also been made, but to no avail.
Despite these common suggestions, I am curious if there are any "bootstrappy" methods to quickly resolve this issue. Alternatively, are there any built-in slick-slider features that can address this problem? If not, what is the simplest approach to achieve the desired result?
EDIT: The complete section code is provided above. There is no additional CSS or JS impacting the section. The classless divs and the slider itself have a test1 class to identify any issues, but it has been excluded from this post as it is not part of the final code. The test1 class adds a small red border around the classless div and the slider div directly above it, resulting in the image shown below:
https://i.sstatic.net/H27er.png As depicted, the classless div is pushed against the top of the slider div.