Topic: How to reduce mdb carousel indicators size ?
Expected behavior Reduce carousel indicators size.
Actual behavior Big indicators.
Resources (screenshots, code snippets etc.)
<!-- Carousel -->
<mdb-carousel multi slide indicators :items="12">
<template v-for="(expertise, i) in expertises" #[i+1]>
<mdb-col :key="i" class="text-center">
<img :src="expertise.img" alt="Expertise" height="120" />
<h3 class="h3-responsive my-3">{{ expertise.tech }}</h3>
</mdb-col>
</template>
</mdb-carousel>
<!-- /Carousel -->
You can change indicators size via css:
.carousel .carousel-indicators li {
width: .4rem;
height: .4rem;
}
Keep coding, Mikołaj from MDB
It looks like an active element has changed size too. To fix it please add the following rule:
.carousel-indicators .active {
width: .4rem;
height: .4rem;
}
Keep coding, Mikołaj from MDB
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB4 6.7.2
- Device: Mac book pro
- Browser: Firefox developers
- OS: MacOs
- Provided sample code: No
- Provided link: No