me pudieran ayudar:
Estoy tratando de colocar el siguiente código de colores tal como se muestra a continuación:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h4>Codigo de colores</h4><br>
<div class="row" style="display:inline;">
<div class="col-sm-2 bg-info" style="width:20px; display:inline;">x</div>
<div class="col-sm-2" style="display:inline;">1 a 5</div>
</div><br>
<div class="row" style="display:inline;">
<div class="col-sm-2 bg-warning" style="width:20px; display:inline;">x</div>
<div class="col-sm-2" style="display:inline;">6 a 8</div>
</div><br>
<div class="row" style="display:inline;">
<div class="col-sm-2 bg-danger" style="width:20px; display:inline;">x</div>
<div class="col-sm-2" style="display:inline;">9 a 10</div>
</div>
</div>
y quiero mostrarlo dentro de un popover de Bootstrap pero no me sale porque me toma el código anterior como texto. a continuación muestro el popover donde quiero colocar el código de colores:
$(function (){
$('[data-toggle="popover"]').popover()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Codigo de Colores" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<script src="https://unpkg.com/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>