Topic: Multi Item Card Carousel showing cards stacked instead of horizontal for md-6
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?
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 commented 5 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
ccravenbartle commented 5 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.
Jakub Chmura staff premium commented 5 years ago
Hi, Nice to hear that you solved your problem!
If you ever need help don't hesitate to ask us!
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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