Bootstrap 4 utilized for creating a dynamic carousel of quotes that adjusts to

I am in the process of recreating a captivating Quote carousel from Bootsnipp, showcasing:

  1. An image on the left
  2. Text on the right
  3. Dark chevrons that stand out against a white backdrop

The original design was achieved using Bootstrap 3, and my goal is to replicate the same appearance and functionality with BS4.

Here is my attempt (using BS 4):

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6c0b69293d0"><strong>[email protected]</strong></a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">        
    </head>
    <body>
        <div class="container">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div style="text-align: left">
                        <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.
                        </p>
                        <img src="https://source.unsplash.com/pWkk7iiCoDM/400x300" width="200" /></div>
                
                </div>
                <div class="carousel-item">
                    <div style="text-align: left">
                        <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.
                        </p>
                        <img src="https://source.unsplash.com/aob0ukAYfuI/400x300" width="200" /></div>
                </div>
                <div class="carousel-item">
                    <div style="text-align: left">
                        <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.
                        </p>
                        <img src="https://source.unsplash.com/EUfxH-pze7s/400x300" width="200" /></div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            </div>        
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43414545635353514554414e44454170835258015504414154514256494845">[email  protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>        
    </body>
</html>

In my code snippet, the text aligns to the top of the image - a result that falls short of my expectations. While I attempted an inline display for the p element to achieve the desired layout, I believe there might be a more sophisticated approach available.

So, my query is:

  1. How can I position the image on the left and the text on the right correctly?
  2. What styling adjustments are needed to make the chevron indicators distinct against the white background?
csstwitter-bootstrapbootstrap-4

Answer №1

By using CSS to style the container div as a grid, I was able to position your image on the left and text on the right with this code snippet:

.carousel-item div{
 display: grid;
 grid-template-columns: auto auto;
}

I also adjusted the HTML structure so that the image appears before the p element.

To customize the color of the chevrons, you can utilize the following code and modify the fill attribute to change the color:

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
}
      
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}

Check out the functioning example below:

.carousel-item div{
 display: grid;
 grid-template-columns: auto auto;
}


.carousel-control-prev-icon {
   position: absolute;
   left: -50px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
}
      
.carousel-control-next-icon {
  position: absolute;
 right: -50px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}

.carousel-indicators {
  margin-block-end:  -40px !important;  
}

.carousel-indicators li {
 background-color: black !important;
 top: 0;
}
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0b1109110f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">        
    </head>
    <body>
        <div class="container">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div style="text-align: left">
                     <img src="https://source.unsplash.com/pWkk7iiCoDM/400x300" width="200" />
                        <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.
                        </p>
                       </div>
                
                </div>
                <div class="carousel-item">
                    <div style="text-align: left">
                    <img src="https://source.unsplash.com/aob0ukAYfuI/400x300" width="200" />
                        <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.
                        </p>
                        </div>
                </div>
                <div class="carousel-item">
                    <div style="text-align: left">
                    <img src="https://source.unsplash.com/EUfxH-pze7s/400x300" width="200" />
                        <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.
                        </p>
                        </div>
                </div>

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

        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252263c243c22">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>        
    </body>
</html>

UPDATE:

To improve the alignment, I included position: absolute;, left: -50px; for the left chevron, and right: -50px; for the right one. Additionally, added styling in CSS for the .carousel-indicators.

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

JavaScript - Interactive sidebar that expands and collapses upon mouseover, maintaining its state when navigating between different pages

I am currently developing a multi-page web application using HTML, CSS, JavaScript, and jQuery. My focus is on creating a sidebar component that expands and collapses when the user hovers over it or moves the mouse out. This sidebar contains links to vario ...

javascripthtmljquerycsssidebar

What is the best way to position a collection of images together for optimal

I'm a new web developer and I'm struggling with aligning images on my page. I've added the images successfully, but I want them to fill the entire space of the previous div. I'm not concerned about the aspect ratio, just the alignment. ...

htmlimagebootstrap-4thumbnails

What is the best way to make the sidebar occupy the entire space?

Learn about creating sticky footers using this method and check out an example here. * { margin:0; } html, body { height:100%; } #wrap { min-height:100%; height:auto !important; height:100%; margin:0 0 -47px; } #side { float:left; backgro ...

javascriptcss

beginning the process of aligning the select element with the label in a form

.surveyform-class { background: yellow; margin: 0 25%; width: 50%; border-right: 40px solid yellow; } .main-div{ background: lightgrey; width: 50%; height:100%; margin: 0 25%; border-right: 20px solid yellow; border- ...

css

Concerns with the height of CSS containers

I've encountered an issue where my container doesn't touch the footer in most cases, and I can't figure out what's causing it. Let me share my CSS code: html { min-height: 100%; position: relative; } body { margin: 0; width: ...

htmlcss

The image seems to be misaligned inside the DIV, and interestingly, this issue appears to be

http://jsfiddle.net/Bzpj4/ The situation depicted in the DIV above is quite puzzling. A 120x120 image is contained within a 120x120 DIV, which is then placed inside a larger DIV with a height of 120px. Strangely, the image within the larger DIV seems to b ...

csshtml

Utilize the grid system from Bootstrap to style HTML div elements

I am working on my angular application and need help with styling items in a Bootstrap grid based on the number of elements in an array. Here's what I'm looking to achieve: If there are 5 items in the array, I want to display the first two items ...

htmlcssangular

How can I target all ul elements except those contained within a div with a specific class using CSS?

In my global.scss file, I have defined global styles for ul elements as shown below: ul { list-style: none; margin: 0; padding: 0; } However, I am trying to find a way to style all ul elements except those within a specific jodit-wrapper class ...

htmlcsssass

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

javascripthtmlcss

Transitioning Between Div Elements Using Jquery

I am stuck with the following HTML code: <section> <div id="first"> ---content </div> <div id="second"> ---content </div> </section> When the page loads, the second div and its contents are not visible (I'm uns ...

jqueryhtmlcss

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

The feature to select a cell on a Bootstrap table is not functioning as expected

Is there a way to retrieve the Cell value from a Bootstrap table when clicked? I have a method set up, but for some reason, after clicking on the table heading, the tdOnClick() function stops working. It seems to only be functional before clicking on the t ...

javascripthtmljquerybootstrap-4html-table

Get rid of the inner image border using CSS

Can someone assist me in removing the border inside this image using CSS? The border of the image is problematic. Here is an example: https://i.sstatic.net/dcnpS.jpg Thank you..! ...

imagecss

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9

After creating a CSS3 gradient using ColorZilla, I noticed an issue with the DATA URI that seems to be causing problems. Check out my fiddle link here: http://jsfiddle.net/cY7Lp/. In WebKit & Firefox browsers, the rounded corners display correctly. Ho ...

internet-explorer-9gradientcss

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...

javascriptjqueryhtmlcss

How to Arrange Multiple Divs in a CSS Grid Layout without Using Floats

I've been working on structuring a webpage with multiple divs containing images in a grid layout, but not using CSS Grid. Here's an example of what I'm trying to achieve: <div class="some classes"> Some Text </div> < ...

htmlcssalignment

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...

cssreactjsmaterial-uistyled-components

triggering the submission of the contact me form with a different button in bootstrap

I'm currently using the bootstrap contact_form with the contact_me.js and contact_me.php for my contact form submission. I've encountered an issue where on my one-page site, there's a Paypal button located further up the page. Whenever I cli ...

jquerytwitter-bootstrappaypalcontact-form

Scroll to make the div slide in from the bottom

I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in). Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity ...

javascriptjqueryhtmlcss

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This m ...

javascripthtmlcss