Content for Bootstrap carousel items can be divided into two separate divs arranged horizontally

I'm currently working with a bootstrap carousel that displays images and text on each carousel item. However, I want the content of each carousel item to be displayed horizontally, rather than vertically as shown in the image below.

Here is the current display: https://i.sstatic.net/dT2Yn.jpg

This is the desired layout for each carousel item: https://i.sstatic.net/SnkIj.jpg

Below is the source code containing two carousel items:

<div class="g-bg-img-hero" style="background-image: url(dist/images/newPage/svg-bg3.svg);">
    <div class="container g-py-50">
        <div class="row">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <div class="col-md-6 g-mb-0--md">
                            <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded"
                                 src="dist/images/newPage/biggest-expo-on-stem-cells-in-karachi.png" alt="Biggest Stem Cells Conference">
                        </div>
                        <div class="col-md-5">
                            <div class="mb-4">
                                <h4 class="g-color-black mb-3">$28m Funding Investment for New University of Unify Research</h4>
                                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                            </div>
                            <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-md-6 g-mb-0--md">
                            <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded"
                                 src="dist/images/newPage/hira-shaikh.jpg" alt="Nida Yasir Trust on AlKhaleej Clinics">
                        </div>
                        <div class="col-md-5">
                            <div class="mb-4">
                                <h4 class="g-color-black mb-3">$28m Funding Investment for New University of Unify Research</h4>
                                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                            </div>
                            <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

Answer №1

It appears that your structure is not correct. Each carousel item should have the following structure:

.carousel > .carousel-item > .row > .col-4 + .col-6

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="g-bg-img-hero bg-info">
  <div class="container g-py-50">
    <div class="row">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <div class="row m-0 p-0">
              <div class="col-4 col-md-4 g-mb-0--md">
                <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded" src="https://via.placeholder.com/300x200" alt="Biggest Stem Cells Conference">
              </div>
              <div class="col-8 col-md-8">
                <h4 class="g-color-black mb-3">Item 1 - $28m Funding Investment for New University of Unify Research</h4>
                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
              </div>
            </div>
          </div>

          <div class="carousel-item">
            <div class="row m-0 p-0">
              <div class="col-4 col-md-4 g-mb-0--md">
                <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded" src="https://via.placeholder.com/300x200" alt="Biggest Stem Cells Conference">
              </div>
              <div class="col-8 col-md-8">
                <h4 class="g-color-black mb-3">Item 2 - $28m Funding Investment for New University of Unify Research</h4>
                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

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

Styling with CSS: Enhancing list items with separators

Is there a way to include a separator image in my list using CSS? li { list-style: none; background-image: url("SlicingImage/button_unselect.png"); height: 53px; width: 180px; } This is the code for the separator image: url("SlicingImage ...

What steps should I take to fix my responsive media query?

I am currently working on fixing some responsive issues on my WordPress website. Previously, in mobile view, it looked like this: https://i.stack.imgur.com/vpvHy.jpg After adding the following code to the CSS of my child theme: @media only screen a ...

Move your cursor over a div element while utilizing NgClass

I'm currently working on implementing a hover effect on a div using an Angular ngClass directive. Within the template file, I have a div element with the class "list-item-container" that includes another div with the class "list-item." This "list-item ...

Unable to fix position: sticky issue following Angular 15 update

Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers. <div class="row"> <div class="col-12"> <di ...

Seeking assistance with sending data from a table row to a modal component in ReactJS

I'm looking to dynamically pass table row data to my modal class in React, but I am still in the process of learning. Currently, my modal class only has static data. I am eager to learn more about React and would appreciate any help on how to pass all ...

Steps to center an HTML canvas on the screen

I attempted to center my canvas horizontally using <div style="text-align:center;">, but the y axis remains unchanged. How can I position the HTML canvas in the center of both the x and y axes? Any suggestions on how to achieve this alignm ...

Rotating and moving two boxes using CSS3 transformations

I have two boxes, each measuring 200px by 200px, that I would like to animate using CSS animations. The first box (upper box) should rotate from rotateX(0deg) to rotateX(90deg) with a transform-origin of center top. The second box should follow the bottom ...

Highlighted text with CSS

For this exercise, I was provided with the following HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selected text</title> </head> <body> <div class ...

What is the method for choosing multiple IDs using CSS?

Is there a way to target multiple IDs in CSS? For instance: #test_id_*{ } <div id="test_id_10"></div> <div id="test_id_11"></div> ...

What is the best way to increase the padding in a Colorbox modal window?

Is there a way to increase the padding in a Colorbox modal window? I want some extra space between the edges of the modal window and the actual content. I experimented with the innerWidth and innerHeight properties, but unfortunately, I didn't notice ...

"Implementing interactive arrow buttons in a horizontal navigation bar using HTML, CSS, and JavaScript

Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...

Reposition DIV elements using only CSS styling

I'm attempting to switch the positions of two divs for responsive design (the website appearance changes based on browser width, ideal for mobile). Currently, my setup looks like this: <div id="first_div"></div> <div id="second_div"&g ...

An issue arises when trying to loop using a while loop within an HTML structure

I have a small project with a predefined format, where I need to select a value from a dropdown menu and use that value to fetch data from a database and display it in HTML. While I am able to retrieve the data from the database based on the selected value ...

A guide on updating the appearance of a list of comma-separated tags using HTML, CSS, and jQuery

Is there a way to replicate the functionality of the tag section on this website for creating question entries? How can this be achieved? ...

Issue with React MUI V5 causing theme not to display properly within shadow-root element

After trying to attach the shadow root using the MUI createTheme function, I encountered rendering issues. Despite following the instructions in this helpful guide on the MUI website, my problem persists. // App.js const cache = createCache({ key: ' ...

Overlaying content: Innovative dropdown menu design

My goal is to create a dropdown box that overlays the content of a div when an icon within it is clicked. However, currently, the dropdown box is pushing down the content of the div instead of overlaying it. I have tried adjusting my CSS by setting some el ...

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

BASH-SHELL SCRIPT: Display a specific portion of content from a file

Recently, I stumbled upon a text file containing a snippet of HTML code: >>nano wynik.txt which includes the following text: 1743: < a href="/currencies/lisk/#markets" class="price" data-usd="24.6933" data-btc= "0.00146882" My goal is to extr ...

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change. To see this ...

Is there a way to process the output of phantom.js in PHP efficiently?

I have successfully retrieved output from a phantom.js request via the command line and it meets my expectations. Now, I am interested in invoking phantom.js from a php script and then analyzing the output for specific content. My phantom.js script appear ...