CODEWITHSUNDEEP
htmlcssbootstrap-4
Johnny Apple
Johnny Apple

Reputation: 189

Vertically Aligning Slides Within Slick Slide using Bootstrap 4 Beta

I have done about 2 hours worth of searching, tried over 15 solutions, and none of them have worked. I have a slick-slider 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 need each classless div to be vertically centered within the containing slider frame as it shows up on the screen. Right now, these divs are shoved up against the top of the slider, leaving lots of unnecessary room at the bottom.

I have tried using d-flex on the slider itself with align-items-center and align-self-center on each classless div.

I have also tried making the slider display as inline block and using the my-auto command on each classles div.

I have also tried using table cell to no avail.

These were by far the most common suggestions.

Are there any 'bootstrappy' ways to quickly solve this? Are there any built-in slick-slider ways to solve this? If no to both questions, what is the simplest way to do this?

EDIT: The full section has been posted above. No extra CSS or JS is affecting the section. There is also a test1 class on the classless divs and the slider itself to ascertain what's going wrong, but I left it out here because it won't be a part of the final code. It puts a small red border around the classless div, and the slider div immediately parenting it, producing the following picture (for example):

enter image description here As you can see, the classless div is being shoved up against the top of the slider div.

Upvotes: 0

Views: 679

Answers (1)

webdevdani
webdevdani

Reputation: 1102

Codepen here: https://codepen.io/webdevdani/pen/KXJqKb

Since you say you have remaining space in the slider, I'm assuming it has a height.

Here's a simple solution with adding just a few Bootstrap4 classes on the slider:

<div class="row">
  <div class="col">
    <div class="slider d-flex justify-content-center align-items-center h-100">
        <div>
          <blockquote class="blockquote text-center">
            <p class="mb-0">"This is a bunch of random works, and each slide is of varying length."</p>
          </blockquote>
        </div>
        <div>
          <blockquote class="blockquote text-center">
            <p class="mb-0">"This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length."</p>
          </blockquote>
        </div>
        <div>
          <blockquote class="blockquote text-center">
            <p class="mb-0">"This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length."</p>
          </blockquote>
        </div>
    </div>
  </div>
</div>

Styling added in my codepen: 

.col {
    height: 400px; // Random, taller height for example
}

Documentation of added flexbox helper classes: https://v4-alpha.getbootstrap.com/utilities/flexbox/

Upvotes: 1

Related Questions