Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap 5 circular background for bootstrap icon

Can I implement a bootstrap icon with circular background area in Bootstrap 5?
Currently I produced this ellipse. I want to implement it circularly

.green{
  background-color:green;
}
.i1{
  border-radius:50%
}
.i2{
  border-radius:9px 9px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"/>
<i class="i1 bi bi-check-circle green"></i>
<i class="i2 bi bi-check-circle green"></i>

Thanks in advance

Tags:

2

Answers


  1. 0

    .rounded-circle bootstrap you’re looking for.

    Actually that <i> tag is coming that way only. You can try <span class="rounded-circle"><i class="bi bi-check-circle green rounded-circle"></i></span> still that will come that way.

    I have added a new div with background red and it is circular. The container element should be of block property to make it rounded.

    .green {
  background-color: green;
}

.btn-circle {
  height: 24px;
  width: 22px;
  background-color: #F00;
  text-align: center;
  color: #FFF;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

<i class="bi bi-check-circle green rounded-circle"></i>
<i class="bi bi-check-circle green rounded-circle"></i>

<div class="btn-circle rounded-circle">
  <i class="bi bi-check-circle rounded-circle"></i>
<div>
    Login or Signup to reply.
  2. 0

    surround each icon inside a parent div. I do this by using ul li and giving it a border radius that is sufficient for the height, border color, etc.
    Please refer my code ther i commented every

    .green{  background-color:green; padding: 0; margin: 0;}
.round-list { display: flex; flex-direction: row; gap: 20px;} /*--- to align list one after another --- */
.round-list li { width: 60px; height: 60px; border-radius: 50%;  display: flex; align-items: center; justify-content: center;  border: 2px solid #000; }  /*--- with and height for perfect circle, display flex to align child elemnt to perrfect center (align-items: center; justify-content: center;)  --- */
.round-list li .bi-check {    font-size: 30pt !important; color:#FFF } /*-- to change icon size and color ---*/
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />


<ul class="round-list">
<li class="green "><i class="bi bi-check"></i></li></li>
<li class="green " ><i class="bi bi-check"></i></li>
</ul>

    details i done

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search