Multi Item Card Carousel showing cards stacked instead of ho

Topic: Multi Item Card Carousel showing cards stacked instead of horizontal for md-6

ccravenbartle free asked 4 years ago

I am using the code taken from your Carousel React example https://mdbootstrap.com/react/advanced/carousel/#multi-item

I want to show 3 carousel pages of 2 card items instead of 3 carousel pages of 3 card items. So I have removed the third MDBCol element within each of the 3 MDBCarouselItem elements and I have changed the MDBCol grid class from md="4" to md="6" so that 6 columns are used for the 2 cards instead of 4 columns for the 3 cards.

        <MDBCarouselItem itemId="1">
          <MDBCol md="6">
            <MDBCard className="mb-2">

However, when I do that, instead of the cards appearing side by side they appear vertically stacked.

What am I missing?

Add comment

Jakub Chmura staff answered 4 years ago

0 0 Best answer

Hi <a href="/profile/?id=86092" target="_blank" rel="nofollow">@ccravenbartle</a>,

You propably did something wrong.

Below is working example. Please tell me if it didn't work in your case.

<pre class="prettyprint"><code>import React from 'react';
import {
 MDBCarousel,
 MDBCarouselInner,
 MDBCarouselItem,
 MDBContainer,
 MDBRow,
 MDBCol,
 MDBCard,
 MDBCardImage,
 MDBCardBody,
 MDBCardTitle,
 MDBCardText,
 MDBBtn
} from 'mdbreact';

const MultiCarouselPage = () => {
 return (
 <MDBContainer>
 <MDBCarousel
 activeItem={1}
 length={3}
 slide={true}
 showControls={true}
 showIndicators={true}
 multiItem
 >
 <MDBCarouselInner>
 <MDBRow>
 <MDBCarouselItem itemId='1'>
 <MDBCol md='6'>
 <MDBCard className='mb-2'>
 <MDBCardImage
 className='img-fluid'
 src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg'
 />
 <MDBCardBody>
 <MDBCardTitle>MDBCard title</MDBCardTitle>
 <MDBCardText>
 Some quick example text to build on the card title and
 make up the bulk of the card's content.
 </MDBCardText>
 <MDBBtn color='primary'>MDBBtn</MDBBtn>
 </MDBCardBody>
 </MDBCard>
 </MDBCol>
 <MDBCol md='6'>
 <MDBCard className='mb-2'>
 <MDBCardImage
 className='img-fluid'
 src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg'
 />
 <MDBCardBody>
 <MDBCardTitle>MDBCard title</MDBCardTitle>
 <MDBCardText>
 Some quick example text to build on the card title and
 make up the bulk of the card's content.
 </MDBCardText>
 <MDBBtn color='primary'>MDBBtn</MDBBtn>
 </MDBCardBody>
 </MDBCard>
 </MDBCol>
 </MDBCarouselItem>
 <MDBCarouselItem itemId='2'>
 <MDBCol md='6'>
 <MDBCard className='mb-2'>
 <MDBCardImage
 className='img-fluid'
 src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg'
 />
 <MDBCardBody>
 <MDBCardTitle>MDBCard title</MDBCardTitle>
 <MDBCardText>
 Some quick example text to build on the card title and
 make up the bulk of the card's content.
 </MDBCardText>
 <MDBBtn color='primary'>MDBBtn</MDBBtn>
 </MDBCardBody>
 </MDBCard>
 </MDBCol>
 <MDBCol md='6'>
 <MDBCard className='mb-2'>
 <MDBCardImage
 className='img-fluid'
 src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg'
 />
 <MDBCardBody>
 <MDBCardTitle>MDBCard title</MDBCardTitle>
 <MDBCardText>
 Some quick example text to build on the card title and
 make up the bulk of the card's content.
 </MDBCardText>
 <MDBBtn color='primary'>MDBBtn</MDBBtn>
 </MDBCardBody>
 </MDBCard>
 </MDBCol>
 </MDBCarouselItem>
 <MDBCarouselItem itemId='3'>
 <MDBCol md='6'>
 <MDBCard className='mb-2'>
 <MDBCardImage
 className='img-fluid'
 src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg'
 />
 <MDBCardBody>
 <MDBCardTitle>MDBCard title</MDBCardTitle>
 <MDBCardText>
 Some quick example text to build on the card title and
 make up the bulk of the card's content.
 </MDBCardText>
 <MDBBtn color='primary'>MDBBtn</MDBBtn>
 </MDBCardBody>
 </MDBCard>
 </MDBCol>
 <MDBCol md='6'>
 <MDBCard className='mb-2'>
 <MDBCardImage
 className='img-fluid'
 src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg'
 />
 <MDBCardBody>
 <MDBCardTitle>MDBCard title</MDBCardTitle>
 <MDBCardText>
 Some quick example text to build on the card title and
 make up the bulk of the card's content.
 </MDBCardText>
 <MDBBtn color='primary'>MDBBtn</MDBBtn>
 </MDBCardBody>
 </MDBCard>
 </MDBCol>
 </MDBCarouselItem>
 </MDBRow>
 </MDBCarouselInner>
 </MDBCarousel>
 </MDBContainer>
 );
};

export default MultiCarouselPage;
</code></pre>

Best, Kuba

Please insert min. 20 characters.

Hi @ccravenbartle,

You propably did something wrong.

Below is working example. Please tell me if it didn't work in your case.

import React from 'react';
import {
  MDBCarousel,
  MDBCarouselInner,
  MDBCarouselItem,
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBCard,
  MDBCardImage,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBBtn
} from 'mdbreact';

const MultiCarouselPage = () => {
  return (
    <MDBContainer>
      <MDBCarousel
        activeItem={1}
        length={3}
        slide={true}
        showControls={true}
        showIndicators={true}
        multiItem
      >
        <MDBCarouselInner>
          <MDBRow>
            <MDBCarouselItem itemId='1'>
              <MDBCol md='6'>
                <MDBCard className='mb-2'>
                  <MDBCardImage
                    className='img-fluid'
                    src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg'
                  />
                  <MDBCardBody>
                    <MDBCardTitle>MDBCard title</MDBCardTitle>
                    <MDBCardText>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </MDBCardText>
                    <MDBBtn color='primary'>MDBBtn</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
              <MDBCol md='6'>
                <MDBCard className='mb-2'>
                  <MDBCardImage
                    className='img-fluid'
                    src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg'
                  />
                  <MDBCardBody>
                    <MDBCardTitle>MDBCard title</MDBCardTitle>
                    <MDBCardText>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </MDBCardText>
                    <MDBBtn color='primary'>MDBBtn</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='2'>
              <MDBCol md='6'>
                <MDBCard className='mb-2'>
                  <MDBCardImage
                    className='img-fluid'
                    src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg'
                  />
                  <MDBCardBody>
                    <MDBCardTitle>MDBCard title</MDBCardTitle>
                    <MDBCardText>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </MDBCardText>
                    <MDBBtn color='primary'>MDBBtn</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
              <MDBCol md='6'>
                <MDBCard className='mb-2'>
                  <MDBCardImage
                    className='img-fluid'
                    src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg'
                  />
                  <MDBCardBody>
                    <MDBCardTitle>MDBCard title</MDBCardTitle>
                    <MDBCardText>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </MDBCardText>
                    <MDBBtn color='primary'>MDBBtn</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='3'>
              <MDBCol md='6'>
                <MDBCard className='mb-2'>
                  <MDBCardImage
                    className='img-fluid'
                    src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg'
                  />
                  <MDBCardBody>
                    <MDBCardTitle>MDBCard title</MDBCardTitle>
                    <MDBCardText>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </MDBCardText>
                    <MDBBtn color='primary'>MDBBtn</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
              <MDBCol md='6'>
                <MDBCard className='mb-2'>
                  <MDBCardImage
                    className='img-fluid'
                    src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg'
                  />
                  <MDBCardBody>
                    <MDBCardTitle>MDBCard title</MDBCardTitle>
                    <MDBCardText>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </MDBCardText>
                    <MDBBtn color='primary'>MDBBtn</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBCarouselItem>
          </MDBRow>
        </MDBCarouselInner>
      </MDBCarousel>
    </MDBContainer>
  );
};

export default MultiCarouselPage;

Best, Kuba

ccravenbartle free commented 4 years ago

Hi Kuba

Unfortunately I still get the same problem using your example code - which is identical to the one I have been using for testing.

As it is working for you I suspect that there must be something in the page wrapper css that the app is using that is interfering with the carousel css. The app is one that I generated via a react application generator template so I will have to dig into what the css is doing to isolate the problem. Maybe extra paddings or margins are being inserted that are causing the cards to wrap around.

Thank you for your quick response.

Charles

Please insert min. 15 characters.

ccravenbartle free commented 4 years ago

Hi Kuba

I got this working.

I found this web article which covered the symptom of Bootstrap 4 columns stacking vertically instead of horizontally: https://medium.com/wdstack/top-10-bootstrap-4-answers-50d8d73d95df

Item 2. Columns must be the immediate children of rows.Symptoms: * The grid (row>col) simply doesn’t work as expected. * Columns stack vertically, instead of horizontally. * Nested columns don’t work.This is simple, but often overlooked. Columns (col-*) must be the direct children of row.

It states that Columns must be the immediate children of Rows - this is not the case in your example code where the immediate child of MDBRow is MDBCarouselItem and not MDBCol. So, I modified the example code inserting a div className='row' element immediately after each MDBCarouselItem and it now works fine.

Please insert min. 15 characters.

Jakub Chmura staff commented 4 years ago

Hi, Nice to hear that you solved your problem!

If you ever need help don't hesitate to ask us!

Best, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.23.1
Device: HP laptop
Browser: Chrome / Edge
OS: Windows 10
Provided sample code: No
Provided link: Yes

ccravenbartle

35Support score
5Questions 1Answers 0Snippets