How to change the size of bootstrap popover arrow

Question

I am trying to implement popovers onto elements on my page for use in a tutorial level. However, I can't seem to figure out how to increase the size of the arrow. I am using bootstrap 3.4.0.

currently it looks like this:

Here is my current CSS :

.popover {
  background-color: rgb(214, 245, 233);
}
 /* Right */
.popover.right .arrow:after {
  border-right-color: rgb(97, 95, 3);
}
.popover.right{
  border: 5px solid rgb(10, 10, 10);
}
/* Left */
.popover.left .arrow:after {
  border-left-color: rgb(10, 10, 10);
}
.popover.left{
  border: 5px solid rgb(10, 10, 10);
}
/* Top */
.popover.top .arrow:after {
  border-top-color: rgb(10, 10, 10);
}
.popover.top{
  border: 5px solid rgb(10, 10, 10);
}
/* Bottom */
.popover.bottom .arrow:after {
  border-bottom-color: rgb(10, 10, 10);
}
.popover.bottom{
  border: 5px solid rgb(10, 10, 10);
}

And here is the HTML :

<div class="blocklyDiv" id="blocklyDiv" data-container="body" data- 
html="true" data-toggle="popover" data-placement="right"></div>

With the content being added through Jquery using

$('#blocklyDiv').popover({ content: getPopContent('blocklyDiv') });

I am quite new to this, so if you could assume I don't know a lot id be grateful.

Answer 1

Twitter is based on less

// Tooltips and popovers
// -------------------------
@tooltipColor:            #fff;
@tooltipBackground:       #000;
@tooltipArrowWidth:       5px;
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:       #fff;
@popoverArrowWidth:       10px;
@popoverArrowColor:       #fff;
@popoverTitleBackground:  darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  rgba(0,0,0,.25);

If sass is used try to understand this SASS Variables .

Kindly mention your HTML also , for more clarification