Bootstrap 4 carousel feature that allows for smooth responsive design with breakpoints and column widths that cater to various screen sizes

Any idea why the second slide is causing such a drastic change or shift on desktop view? It seems to be related to adding d-md-flex align-items-md-center to the enclosing div. Am I missing something here, or should I try a different approach?

 <div class="container-md py-5">
  <div class="testimonial-circle rounded-circle bg-white px-n2 px-sm-0 mx-n2 mx-sm-0 d-md-flex align-items-md-center">
    <div class="row align-items-center">
      <div class="col-12 col-md-4 offset-md-1 mt-5 text-center">
        <h2 class="font-weight-bold">People LOVE<br />the&nbsp;This Product<sup>&reg;</sup>&nbsp;</h2>
        <p class="d-none d-md-block"><a class="btn btn-outline-primary" href="#">Read Reviews</a></p>
      </div>

      <div class="col-10 col-md-5 offset-1">
        <!-- start carousel -->
        <div id="testimonialSlider" class="carousel slide mt-2" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
            <li data-target="#testimonialSlider" data-slide-to="1"></li>
            <li data-target="#testimonialSlider" data-slide-to="2"></li>
            <li data-target="#testimonialSlider" data-slide-to="3"></li>
            <li data-target="#testimonialSlider" data-slide-to="4"></li>
            <li data-target="#testimonialSlider" data-slide-to="5"></li>
          </ol>
          <div class="carousel-inner pt-2 d-block">
            <div class="carousel-item active">
              <blockquote class="blockquote">
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet. Ut viverra ex velit velit sit.</p>
                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote class="blockquote">
                <p class="mb-0">This brakes the layout Why?</p>
                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote class="blockquote">
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote class="blockquote">
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet. Ut viverra ex.</p>
                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote class="blockquote">
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet.</p>
                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote class="blockquote">
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros,</p>
                <footer class="blockquote-footer"><cite title="Source Title"&... (truncated)
htmlcssbootstrap-4flexbox

Answer №1

Your row's width is being affected by the content because it is nested inside the testimonial-circle division. To fix this, make sure the row is a child of the container. You can apply custom styles to the container for further customization.

Another issue you might face is inconsistent heights due to the text-only carousel. One way to prevent the boxes from jumping around is to use jQuery to normalize the heights of all slides.

Update: To vertically center the blockquote in the carousel-item, follow the instructions in this answer How to vertically center a Bootstrap carousel-caption?.

function normalizeSlideHeights() {
    $('.carousel').each(function() {
        var items = $('.carousel-item', this);
        // reset the height
        items.css('height', 'auto');
        // set the height
        var maxHeight = Math.max.apply(null,
            items.map(function() {
                return $(this).outerHeight()
            }).get());
        items.css('height', maxHeight + 'px');
    })
}

$(window).on(
    'load resize orientationchange',
    normalizeSlideHeights
);
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d09130b130d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d2c8d0c8d6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<style>
    .carousel-indicators {
        bottom: -9px;
        margin-bottom: 0;
    }
    .carousel-indicators li {
        background-color: #C7C7C7;
    }

    .carousel-item {
        padding: 4px 0;
    }
    .carousel-item.active {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .blockquote {
        top: 50%;
        transform: translateY(-50%);
        position: relative;
    }
</style>

<div class="container-md py-5">
    <div class="row align-items-center">
        <div class="col-12 col-md-4 offset-md-1 text-center">
            <h2 class="font-weight-bold mb-4">People LOVE<br />the This Product<sup>®</sup></h2>
            <p class="d-none mb-0 d-md-block"><a class="btn btn-outline-primary" href="#">Read Reviews</a></p>
        </div>

        <div class="col-10 col-md-5 offset-1">
            <!-- start carousel -->
            <div id="testimonialSlider" class="carousel slide mt-2" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
                    <li data-target="#testimonialSlider" data-slide-to="1"></li>
                    <li data-target="#testimonialSlider" data-slide-to="2"></li>
                    <li data-target="#testimonialSlider" data-slide-to="3"></li>
                    <li data-target="#testimonialSlider" data-slide-to="4"></li>
                    <li data-target="#testimonialSlider" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner pt-2 d-block">
                    <div class="carousel-item active border" style="height: 150px;">
                        <blockquote class="blockquote">
                            <p class="mb-0 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet. Ut viverra ex velit velit sit.</p>
                            <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                        </blockquote>
                    </div>
                    <div class="carousel-item border" style="height: 170px;">
                        <blockquote class="blockquote">
                            <p class="mb-0 text-justify">This breakes the layout Why?</p>
                            <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                        </blockquote>
                    </div>
                    <div class="carousel-item border" style="height: 150px;">
                        <blockquote class="blockquote">
                            <p class="mb-0 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                        </blockquote>
                    </div>
                    <div class="carousel-item border" style="height: 150px;">
                        <blockquote class="blockquote">
                            <p class="mb-0 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet. Ut viverra ex.</p>
                            <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                        </blockquote>
                    </div>
                    <div class="carousel-item border" style="height: 150px;">
                        <blockquote class="blockquote">
                            <p class="mb-0 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet.</p>
                            <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                        </blockquote>
                    </div>
                    <div class="carousel-item border" style="height: 150px;">
                        <blockquote class="blockquote">
                            <p class="mb-0 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros,</p>
                            <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                        </blockquote>
                    </div>
                </div>
            </div>
    </div>
    <p class="d-md-none w-100 mt-4 text-center"><a class="btn btn-outline-primary" href="/oral-health/products/dental-water-flosser/WF-11W010-1/">Read Reviews</a></p>
    </div>
</div>

Answer №2

Give this code a try:

<div class="container-md py-5">
    <div class="row align-items-center" style="border: 1px solid blue;">
        <div class="testimonial-circle rounded-circle bg-white d-flex justify-content-start">

            <div class=" text-center" style="width: 25rem; border: 1px solid red;">
                <h2 class="font-weight-bold">People LOVE<br />the&nbsp;This Product<sup>&reg;</sup>&nbsp;</h2>
                <p class="d-none d-md-block"><a class="btn btn-outline-primary" href="#">Read Reviews</a></p>
            </div>

            <div class=" " style="flex: 1; border: 1px solid green;">
                <!-- start carousel -->
                <div id="testimonialSlider" class="carousel slide mt-2" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
                        <li data-target="#testimonialSlider" data-slide-to="1" ></li>
                    </ol>
                    <div class="carousel-inner pt-2 ">
                        <div class="carousel-item active">
                            <blockquote class="blockquote">
                                <p class="mb-0">This breaks the layout Why?</p>
                                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                            </blockquote>
                        </div>
                        <div class="carousel-item">
                            <blockquote class="blockquote">
                                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum fringilla eros, sed accumsan odio semper sit amet. Ut viverra ex velit velit sit.</p>
                                <footer class="blockquote-footer"><cite title="Source Title"&``>t;Verified User</cite></footer>
                            </blockquote>
                        </div>
                        <div class="carousel-item">
                            <blockquote class="blockquote">
                                <p class="mb-0">This breaks the layout Why?</p>
                                <footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <p class="d-md-none text-center"><a class="btn btn-outline-primary" href="/oral-health/products/dental-water-flosser/WF-11W010-1/">Read Reviews</a></p>

    </div>
</div>

Explanation

  • I moved the testimonial-circle inside the row tag.
  • The flex arrangement inside the carousel was adjusted. The left tag should have a fixed size and the right tag should take up all available space to prevent layout issues.

The main issue was with the flexibility that resulted in inconsistent sizing behavior.

Note: Borders are included for visualization purposes.

Run the code here

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

javascripthtmlcss

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

I need help creating a navbar that displays the active site using HTML and JS code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=& ...

javascripthtmljquerycss

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...

javascripthtmlangularjsangular-gettext

Utilizing Bootstrap 4 in ASP.NET MVC Framework

Greetings! Currently, I am working on implementing an ASP.NET web app using Bootstrap 4. However, since ASP.NET currently supports only Bootstrap 3, the templates are designed to fit Bootstrap 3. Upon upgrading, all the code logic changed and a new < na ...

htmlasp.net-mvcbootstrap-4

Background image that is vertically responsive

I'm struggling with getting a full-page background image to maintain a consistent margin around all sides, especially at the bottom. I want the image to be vertically responsive using only CSS, without relying on Javascript. Any suggestions on how to ...

javascripthtmlcssresponsive-design

"Having issues with resizing Bootstrap buttons, they are appearing too tiny

Calling all web development pros! I'm new to this world and need some help with Bootstrap. I'm having an issue with two buttons placed at the end of my page. They're coming out tiny and the value attribute isn't showing up. Any assistan ...

htmlwebbuttonbootstrap-4

What is the reason for the request to accept */* when the browser is seeking a JavaScript file?

The html source appears as follows: <script type="text/javascript" language="JavaScript" src="myscript.js"></script> Upon debugging the http request using Fiddler, it is evident that the browser (Chrome) sends a GET request for myscript.js wi ...

javascripthtmlhttp

Concealing a table row if a different row is devoid of content

In my table, I have dynamic rows that are either date rows or content rows. This allows me to display news items below the corresponding date row. <table class="channel-data"> <tbody> <?php $current_date = ""; while($programs=$ ...

phpjqueryhtmlcss

Mastering card sliding and spacing in React NativeLearn how to effortlessly slide cards horizontally in your React

My aim with the following code snippet is to achieve two objectives: Apply a margin of 20 units to each card Display all four cards in a single row, allowing users to swipe horizontally Unfortunately, I have not been successful in achieving either of th ...

javascriptcssreactjsreact-nativejsx

Angular utilizes boolean variables to determine if an attribute is required

Hey there! I'm currently working on a project where I need to make an input form field required or optional based on the value of a boolean variable in my component. This is what my component looks like: public showField: boolean = true; Here' ...

htmlangulartypescript

In PHP, is it possible to group all the numbers generated from a "For loop" into a single array

I am facing an issue where I need to store all the numbers generated in a loop into an array outside of the loop. The structure of the HTML code is as follows: <div class="col-md-2 px-1 mb-1"> <input type="text" class="form-control" placeholder ...

phphtmlarraysinput

Revamp the hues of numerous elements simultaneously using just a single click!

Is there a way to change the colors of various elements (footer, divs, text) background and text color at once using just one button? I attempted to use JavaScript buttons, but I'd prefer not having to name each individual object's button in orde ...

javascripthtmljquerycss

Positioning the close button on the top right edge of a Material-UI Dialog: A step-by-step guide

https://i.sstatic.net/ARTtq.png How can I include a close icon in the top right corner of the header section? I'm using the Material UI Dialog and everything works well, but I need a close button in the top section. Can anyone assist me with this? ...

javascripthtmlcssreactjsmaterial-ui

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

A unique feature of my DIV is that it remains fixed at the top of the page as you scroll. This is achieved by setting its position to fixed. However, within this main container, I have another div with a relative position. While the content in the relative ...

javascriptjqueryhtmlcsspositioning

Having difficulty with submitting a modal form via Ajax Request in Laravel

Attempting to delete a user based on input from a modal form, but encountering difficulty. No error message is showing in the console. As a beginner, struggling to pinpoint the mistake. Error: Ajax request issue. Code snippet below: Blade modal section: ...

phphtmljqueryajaxlaravel

Error encountered while trying to upload a file using PHP on a hosting platform

Hey everyone, I'm feeling really frustrated right now because I'm facing a file upload error in my PHP code. The issue is that the file is not getting uploaded to my folder and no error messages are being displayed. I've been working on cr ...

javascriptphphtmlfilesystems

Is the PHP Ajax parameter missing during the upload process?

I'm attempting to do a simple upload, but I seem to be struggling. It could be that I'm not understanding it properly, or perhaps it's just too late at night for me to figure it out. After doing some research, I came across this example on ...

javascriptphphtmlajax

What is the best way to determine if my table does not have any data stored in

Is there a way to detect when my table is empty so that I can display an error message rather than showing an empty table? Here's the code snippet in question: <?php $search = $_REQUEST['search']; if ($search == "") { echo "Please e ...

phphtmlhtml-table

Reducing the Bootstrap Navbar Collapse Width

After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...

cssasp.nettwitter-bootstrap

"Transitioning from Bootstrap version 3.3.7 to the latest Bootstrap version 4.1.3

Everywhere I look, it says that Bootstrap 4.1 is compatible with Bootstrap 3, but when I update my project to the newer version, a lot of things stop working, such as this cookie consent feature. @{ Layout = ""; } @using Microsoft.AspNetCore.Http ...

cssbootstrap-4