Mani Mani - 4 months ago 7
CSS Question

Bootstrap maxcdn affecting my CSS.kindly help me to resolve

I tried this piece of code in jdFiddle

I changed the width of .numberCircle to 35px.

Without the Bootstrap CSS its working fine. However if I use Bootstrap CSS it's not working as shown in the jsFiddle output.

Without Bootstrap CSS:



.numberCircle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 35px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;
}
.numberCircle .height_fix {
margin-top: 100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
height: 100%;
width: 100%;
text-align: center;
margin-top: -16px;
/* Note, this must be half the font size */
}

<div class="numberCircle">
<div class="height_fix"></div>
<div class="content">1</div>
</div>
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content">100</div>
</div>
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content">10</div>
</div>





With Bootstrap CSS:



.numberCircle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 35px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;
}
.numberCircle .height_fix {
margin-top: 100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
height: 100%;
width: 100%;
text-align: center;
margin-top: -16px;
/* Note, this must be half the font size */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content">1</div>
</div>
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content">100</div>
</div>
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content">10</div>
</div>





Screenshot using Bootstrap CSS:

enter image description here

I tried the same code with Bootstrap CSS and with all divs in a single column & in a single row and it does not work still.

Kindly Help.

Answer

Update Css Class In With Bootstrap CSS

.numberCircle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 35px;
  padding: 40px;
  font-size: 32px;
  line-height: 1em;
  border: 2px solid #666;
  position: relative;
}

Demo JsFiddle