Display Bootstrap 4 Carousel thumbnails on the right side rather than the bottom

I have implemented the Bootstrap 4 carousel slider with the help of this example.

In the example provided, I am trying to align the bottom thumbnails to the right side along with the thumbnail text, similar to the image attached below.

https://i.sstatic.net/aVcQ4.jpg

Here is my code :

<div class="row" id="slider">
    <div class="col-md-5">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner" style="float:left;">
                <div class="active item carousel-item" data-slide-number="0">
                    <img src="http://placehold.it/1200x480&amp;text=one" class="img-fluid">
                </div>
                <div class="item carousel-item" data-slide-number="1">
                    <img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
                </div>
                <div class="item carousel-item" data-slide-number="2">
                    <img src="http://placehold.it/1200x480&amp;text=three" class="img-fluid">
                </div>
                <div class="item carousel-item" data-slide-number="3">
                    <img src="http://placehold.it/1200x480&amp;text=four" class="img-fluid">
                </div>

                <a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                <a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <ul class="carousel-indicators list-inline" style="float:left;">
            <li class="list-inline-item active" data-slide-to="0" data-target="#myCarousel">
                <a id="carousel-selector-0" class="selected">
                    <img src="http://placehold.it/80x60&amp;text=one" class="img-fluid">
                </a>
            </li>
            <li class="list-inline-item" data-slide-to="1" data-target="#myCarousel">
                <a id="carousel-selector-1">
                    <img src="http://placehold.it/80x60&amp;text=two" class="img-fluid">
                </a>
            </li>
            <li class="list-inline-item" data-slide-to="2" data-target="#myCarousel">
                <a id="carousel-selector-2">
                    <img src="http://placehold.it/80x60&amp;text=three" class="img-fluid">
                </a>
            </li>
            <li class="list-inline-item" data-slide-to="3" data-target="#myCarousel">
                <a id="carousel-selector-3">
                    <img src="http://placehold.it/80x60&amp;text=four" class="img-fluid">
                </a>
            </li>
        </ul>
    </div>
</div>

/*******In Bootstrap CSS*******/ .carousel-indicators {display:inline-block;}

Answer №1

Experiment with this:

.slideshow {
  display:flex;
}

 .slideshow-indicators {
  display:flex;
  flex-wrap: wrap;
}

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

The frameset is not detecting the CSS styling

Is it typical for a frame src page to not apply the CSS that is referenced in the container page? For instance, if the external style sheet defines an id #divbody that specifies the text color, and Header.aspx contains a div with the id divbody. <!DOC ...

Utilizing if conditions within loops in a Jade template

Hey there. I am attempting to create a `tr` element at the start and after every 9th item. I am using the modulo operator as shown in the example above. However, if I want to include `td` elements inside that same `tr`, with an `else` condition for inst ...

Leveraging grunt in combination with php for the front end

Excuse me, I am new to using Grunt and I am not very familiar with PHP coding. I have started a new project and I am attempting to incorporate Grunt, which I find to be amazing, with some HTML files that contain minimal PHP code. Initially, I installed the ...

Arranging content within columns according to their column position

As I design a grid with three columns, each grid box contains a div with a maximum width of 280px. Sometimes the grid columns exceed this width. To achieve my desired layout, I aim to align the content in the grid boxes so that the left column aligns to th ...

Certain components display with greater height on Internet Explorer

When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though ...

What are the best practices for preloading images, JavaScript, and CSS files?

Back in the late 90's, I was really passionate about creating websites from scratch. However, as I dove back into web development recently, I realized how much the landscape has changed since then. As more of a designer than a developer, I opted to us ...

Storing information in a database with multiple entries

Displaying a list of inactive users from a mysqli database in a table format, each user has a row with three drop-down menu options - admin, delete user, and activate user. The table is populated using a prepared statement to fetch data from the database. ...

Tips for maximizing responsiveness with display:flex in Bootstrap?

I have a row with 3-cols containing a dropdown menu within each column. The dropdown menu appears below when an option is selected. Clicking the option button causes the height of the columns to extend, flex, or increase as intended. To achieve this effec ...

Steps for displaying a loading image during the rendering of a drop-down list (but not during data loading):

Using jQuery's autocomplete combobox with a large dataset of around 1,000 items. The data loads smoothly from the server, but there is a delay when expanding the drop-down list to render on screen. Is there a way to capture the initial click event on ...

Utilizing external CSS to style an SVG file within an HTML document

Hello there, I have a collection of SVG files that I need to dynamically modify the fill color of, preferably using CSS. Here is the structure: <div> <svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin m ...

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

Altering the href text within a script causes the text to disappear instead of updating

Function Triggered by Button Click: function LoadEnglishText() { document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here."; } HTML Link to be Updated: <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier ...

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

Exploring the Link Between jQuery and HTML

Is it possible to connect between an HTML file and a jQuery file? Here is an example scenario: jquery-test.js: $(document).ready(function(){ $('#inputForm').submit(function(){ $('#inputForm :text:not("#submit")').each(func ...

Transforming the text to a new line

I have been attempting to format lengthy texts from a JSON file, but I haven't been successful. The text keeps displaying as multiple sections within a single response, which can be seen in the image below. I've tested solutions like word-break a ...

Retrieve the Latest Information from the Asp.Table

My table setup is as follows: <asp:Table ID="model" runat='server'> <asp:TableRow> <asp:TableHeaderCell class="col-xs-2"> Name </asp:TableHeaderCell> <asp:TableHeaderCell class="col- ...

Assistance for Hypertext Transfer Protocol in Webkit

I've been researching how webkit enables web browsers to display web pages. It's great to know that my HTML, CSS, and JavaScript code will work on any device that supports webkit. But one question still remains - does webkit also have built-in su ...

displaying the identical image from various perspectives

I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...

How to align items to the left and center within a div?

How can I position the items inside a div in such a way that one element is centered and the other is aligned to the left? I attempted using flexbox, but found it difficult without introducing a hidden third element or justifying content. Another approac ...

Look up and input information into the dropdown selection list

Is there a way to search for and input text in a select drop-down menu? Generally, we are unable to write inside the select drop-down menu. Is there a method that allows me to type inside this drop-down menu and as I am typing, if a similar word appears, I ...