Bootstrap carousel indicators are square; I want them round
Add border-radius:
.carousel-indicators > li {
border-radius: 50%;
}
Note that you have to target the li tags within the carousel-indicators class and also do 50% not 100%.
So you don't have to use !important to override the default border-radius:
#myCarousel-indicators > li {
border-radius: 50%;
}
<ol id="myCarousel-indicators" class="carousel-indicators"></ol>
Change Bootstrap carousel dot indicators to squares
Set the border-radius to 0 on .carousel-indicators li
How can I change Bootstrap carousel indicators into dots?
Yes, I think you need to write custom CSS for doing lines into dots.
You just need to override two properties (width and height) and add a new one, border-radius, to .carousel-indicators li.
Make width and height values equal eg: 10px each and give a border-radius of 100%.
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
HTML: Change the Bootstrap Carousel Icon from Horizontal Bar to Circle
Try this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.carousel-indicators li {
box-sizing: content-box;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
margin-right: 3px;
margin-left: 3px;
text-indent: unset;
cursor: pointer;
background-color: #fff;
background-clip: unset;
border-top: 0;
border-bottom: 0;
opacity: .5;
transition: opacity .6s ease;
}
</style>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">1</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1489216317223-a88355bd0e38?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1474932525110-07bf2cd0de87?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1475010040281-9c4f94108f91?ixlib=rb-1.2.1&auto=format&fit=crop&w=624&q=80" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Can't change Bootstrap 5 carousel indicator border radius
Try
.carousel-indicators [data-bs-target] {
border-top: none;
border-bottom: none;
border-radius: 5px;
height:6px;
}
The elements have a transparent border which are being styled with a border radius, but can not be seen because they are transparent.
Bootstrap's carousel indicators positioned at bottom of image when description is below
Can you please check with these, add this small jQuery code in document.ready(). hope it will help you out.
var newmargin = $('.carousel-item.active p').height();
$(".carousel-indicators").css("margin-bottom", newmargin);
$('#carouselIndex').bind('slid.bs.carousel', function (e) {
var newmargin = $('.carousel-item.active p').height();
$('.carousel-indicators').css("margin-bottom", newmargin);
});.carousel-item.active p { margin-bottom: 0px;}
.carousel-indicators li {
background:orange;
color:purple;
height:auto;
text-indent: 0;
text-align:center;
margin-right: 8px;
margin-left: 8px;
border: none;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="carouselIndex" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carouselIndex" data-slide-to="0" class="active">1</li>
<li data-target="#carouselIndex" data-slide-to="1">2</li>
<li data-target="#carouselIndex" data-slide-to="2">3</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2019/10/18/17/42/season-4559795_1280.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption0">
<p>This is very long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2010/12/13/10/09/abstract-2384_1280.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption0">
<p>2Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2012/12/09/00/16/smoke-69124_1280.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption0">
<p>3Late night Dance ritual during summer solstice festival in Sigulda. 3Late night Dance ritual during summer solstice festival in Sigulda 3Late night Dance ritual during summer solstice festival in Sigulda 3Late night Dance ritual during summer solstice festival in Sigulda 3Late night Dance ritual during summer solstice festival in Sigulda</p>
</div>
</div>
</div>
</div>Carousel Indicator shape
The circular carousel indicator isn't made with CSS borders, it's the "bullet" character •, just use e.g. "black small square" ▪ instead:
<style>
.pic{
width:100%;
height:100%;
}
.carousel {
border-style:solid;
border-width:1px;
border-color:rgba(0, 0, 0, 0.05);
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
widht:100%;
height:335px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
height:335px;
}
.carousel-open:checked + .carousel-item {
position: absolute;
opacity: 100;
background-color:white;
width:100%;
height:335px;
}
.carousel-item {
position: absolute;
opacity: 0;
padding-top:10px;
text-align:center;
}
.carousel-control {
background: rgba(0, 0, 0, 0);
border-radius: 50%;
color:#008c6c;
cursor: pointer;
display: none;
font-size: 30px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.05);
color: #008c6c;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3{
display: block;
}
.carousel-indicators {
margin: 0;
padding: 2px;
position: absolute;
bottom: -40px;
left: 0;
right: 0;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: rgba(0, 0, 0, 0.05);
cursor: pointer;
font-size: 100px;
}
.carousel-bullet:hover {
color: rgba(0, 0, 0, 0.1);
}
.HRConnectImage
{width:375px;
padding-top:50px;
display:inline-block;}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet{
color: #008c6c;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
#p
{
text-align:center;
font-weight:bold;}
</style><div class="carousel">
<div class="carousel-inner">
<input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/>
<div class="carousel-item">
<img class="pic" src="">
</div>
<input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true"/>
<div class="carousel-item">
<img class="pic" src="">
</div>
<input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true"/>
<div class="carousel-item">
<img class="pic" src="">
</div>
<label class="carousel-control prev control-1" for="carousel-3">‹</label>
<label class="carousel-control next control-1" for="carousel-2">›</label>
<label class="carousel-control prev control-2" for="carousel-1">‹</label>
<label class="carousel-control next control-2" for="carousel-3">›</label>
<label class="carousel-control prev control-3" for="carousel-2">‹</label>
<label class="carousel-control next control-3" for="carousel-1">›</label>
<ol class="carousel-indicators">
<li>
<label class="carousel-bullet" for="carousel-1">▪</label> </li>
<li>
<label class="carousel-bullet" for="carousel-2">▪</label> </li>
<li>
<label class="carousel-bullet" for="carousel-3">▪</label> </li>
</ol>
</div>
</div>How to maintain border-radius when animating element size?
I have managed to overcome this using radial-gradient from here
$('li').click(function(sender) {
$('.active').removeClass('active');
$(this).addClass('active');
}).carousel-indicators li {
width: 12px;
border-radius: 12px;
border-color: #2E8B57 !important;
height: 24px;
border-width: 1pt;
margin: 1px 3px 1px 3px;
padding: 1px;
transition: opacity 0.6s ease, background-size 1s ease;
background-image: radial-gradient(circle, #2E8B57 50%, transparent 51%);
background-position: center;
background-size: 0% 0%;
background-repeat: no-repeat;
}
.carousel-indicators li.active {
//background-color: #2E8B57;
border-radius: 12px;
background-image: radial-gradient(circle, #2E8B57 50%, transparent 91%);
background-size: 100% 100%;
background-clip: content-box, padding-box;
padding: 1px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>Related Topics
Display:Inline with Margin, Padding, Width, Height
How Remove Border Around Image in CSS
Border Corner Shape Scoop Doesn't Work
Grails: Displaying Created Image in Gsp
How to Make Images Stay Within the Rows of a CSS Grid Container
How to Have HTML Text or Cdata Inside an Xml Attribute
Cross-Browser Embedded Font in Svg Image
Three Divs Side by Side with Spacing in Between
CSS Wrong Appearance of Border-Radius on a Nested Div
Restoring the Value of a Input Type=File After Failed Validation
Can Xhtml and HTML Class Attributes Value Start with a Number
How to Add a Margin Between Bootstrap Columns Without Wrapping
Flexbox Layout Does Not Work in Internet Explorer 10
Why Isn't This Element Rotation Working