Adapting a Bootstrap 3 carousel to Bootstrap 5 causes CSS to malfunction

I found a Bootstrap 3 testimonial slider on Codepen that I am trying to recreate. You can view the original here https://codepen.io/frontendor/pen/abBpXWj

After adapting the code to work with Bootstrap 5, the carousel functions correctly but the CSS is no longer working as intended. Here's the link to my updated version using Bootstrap 5 --

<div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" data-bs-ride="carousel" id="quote-carousel">
                    <!-- Carousel Slides/Quotes -->
                    <div class="carousel-inner text-center">
                        <!-- Quote 1 -->
                        <div class="carousel-item active">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 offset-sm-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 2 -->
                        <div class="carousel-item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 offset-sm-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 3 -->
                        <div class="carousel-item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 offset-sm-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                    <!-- Bottom Carousel Indicators -->
                    <ol class="carousel-indicators">
                        <li data-bs-target="#quote-carousel" data-bs-slide-to="0" class="active"><img class="img-responsive " src="https://randomuser.me/api/portraits/men/46.jpg" alt="">
                        </li>
                        <li data-bs-target="#quote-carousel" data-bs-slide-to="1"><img class="img-responsive" src="https://uifaces.co/our-content/donated/1H_7AxP0.jpg" alt="">
                        </li>
                        <li data-bs-target="#quote-carousel" data-bs-slide-to="2"><img class="img-responsive" src="https://randomuser.me/api/portraits/men/36.jpg" alt="">
                        </li>
                    </ol>

                    <!-- Carousel Buttons Next/Prev -->
                    <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                    <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
        </div>

The corresponding CSS for this code is:

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}

You can view the modified code here -- https://codepen.io/yaddyvirus/pen/BadajPb

While the carousel and indicators are functioning properly, the controllers seem to be affected by the CSS. The expected output should look like this - https://i.sstatic.net/MvvHO.png

However, what I am currently seeing is different from the expected result - https://i.sstatic.net/Xodoi.png

If anyone could provide insight into what might be causing the issue with the CSS, it would be greatly appreciated. I'm puzzled as to why the styling has been impacted after transitioning to Bootstrap 5 without making any changes to the CSS.

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-5

Answer №1

When comparing the code side by side, it appears that adding the following lines would make it match. In case there are any layout discrepancies on mobile devices, checking the bootstrap css file for all rules related to those used in your Codepen example could be beneficial:

.carousel-inner>.item>a>img, 
.carousel-inner>.item>img, 
.img-responsive, 
.thumbnail a>img, 
.thumbnail>img {
   display: block;
   width: 100%;
   height: auto;
}

#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}
.carousel-control-next:focus, 
.carousel-control-next:hover, 
.carousel-control-prev:focus, 
.carousel-control-prev:hover {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
blockquote .small, 
blockquote footer, 
blockquote small {
    display: block;
    font-size: 80%;
    line-height: 1.42857143;
    color: #777;
}
blockquote .small:before, 
blockquote footer:before, 
blockquote small:before {
    content: '\2014 \00A0';
}
button.carousel-control-prev,
button.carousel-control-next {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
    align-items: flex-start;
}

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

Is it possible to dynamically change a form's input value using a JavaScript keyup function based on input from other form elements?

My form utilizes the keyup function to calculate the total value of 3 input fields by multiplying them and displaying the result. Below is a fiddle showcasing this functionality: $(document).ready(function () { $(".txtMult1 input").keyup(multInp ...

javascriptjqueryhtmlformskeyup

Ways to exit out of all TinyMCE Inline Editors

I'm currently working with TinyMCE 4 in its inline mode, but I'm struggling to figure out how to close the windows programmatically when performing other specific operations on the page. Is there a method or solution to achieve this? ...

javascriptjqueryhtmlasp.net-mvc-4tinymce

Embedding a stylesheet into an HTML document can be done automatically

Currently, I am working on creating standalone error pages (404/503) as individual HTML files. My server-side setup involves Node.js, but these specific files will be hosted directly in Nginx. One of the challenges I am facing is automatically including a ...

javascripthtmlcssbuildgulp

Tips for arranging two divs from a single column to display side by side on smaller screens instead of stacked on top of each other

My knowledge of CSS, HTML, and bootstrap is quite limited. I'm trying to figure out how to split a single column on a large screen into two columns on a smaller screen so that the content in two divs appears side by side instead of stacked on top of ...

htmlcssbootstrap-4

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

javascripthtmljquerycsssharepoint

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity

Taking pictures with the camera in three.js on an iPhone

While working on a project that required capturing the camera video stream as a texture in three.js for mobile phones, I encountered an issue. The code I was using ran smoothly on Android devices but not on iPhones. Ideally, when the user grants permission ...

htmlthree.jshtml5-video

Discover an HTML element using Selenium based on its sibling relationship as determined by the program

Trying to find a specific report link but struggling with the generic information provided. The key lies in identifying a span element that can differentiate the link from the rest. Currently, I am using xpath's preceding-siblings method to locate the ...

pythonhtmlseleniumfirefox

Creating rounded corners in Firefox can result in a gap between the border and the background

I'm trying to round the corners of a div, but in Firefox there seems to be an issue with whitespace between the border and background color. Check out my demo fiddle. <div>&nbsp;</div> div { margin: 20px; width: 250px; ...

htmlfirefoxcss

"Responsive modal with dynamic height based on percentage and a minimum height constraint

My goal is to design a modal dialog that adjusts its height based on a percentage of the browser window height. The modal should maintain a minimum height to ensure it doesn't become too small, and it should dynamically grow, shrink, and re-center as ...

jqueryhtmlcss

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

htmlcssiphonenext.jsfrontend

What steps do I need to take in order to make the navbar-collapse function properly with an animated

After successfully implementing a collapsible navbar with a hamburger icon for mobile view, I decided to add some extra styling and animation to the hamburger button. However, now the hamburger button remains visible even in desktop view, which is not what ...

javascriptjqueryhtmlcsstwitter-bootstrap

Exploring ExtJS: A guide to accessing a specific DIV element using its unique id

I have a variable in EXTJS containing the following HTML code: var test = '<html><body><div class="myDiv"> This is a test div. </div></body></html>'; I am struggling to access the class or id of this element ...

htmldomextjselement

:hover does not activate the animation forwards

Why won't the animation: forwards work on :hover? The animation itself is functioning properly, but the command "forwards" isn't. The Issue: Here's the HTML code snippet: <img src="images/notebook_desk.svg" class="notebook-cover"> ...

htmlcssanimationtransform

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

htmlcsssassbulma

Increment the text counter following the uploading of an image file with html format

I have a form in which I am checking the character limit that a user can input into a text field using the 'onkeyup' attribute to update it in real time. Now, I want to achieve a similar function for image uploading. When a user selects an image ...

javascriptphpjqueryhtml

Scaling divs proportionately using a container

I have numerous elements enclosed within a <div class="wrapper">. My aim is to resize this outer div and ensure that the inner elements scale proportionately along with it. For instance, when dealing with a group of SVGs, adjusting the transform pro ...

javascripthtmlcsssvgwrapper

Exploring deep nested elements with Beautiful Soup in Python

My webpage has a specific layout: <div id ="a"> <table> <td> <!-- many tables and divs here --> </td> <td> <table></table> <table></t ...

pythonhtmlbeautifulsoup

Ways to manipulate external CSS classes with styled components without direct access

Currently, I am utilizing react-table and wanting to implement CSS rules for the class rt-td, which is not accessible or adjustable through their API functionalities. In traditional CSS practice, I could easily override the CSS class within my stylesheet. ...

cssreactjsstyled-componentsreact-table