I have a div with bootstrap design material of size 4 col-md-4
that aligns to the right my texts using text-align: right
The problem is that in the same line of this text has an icon, which is also aligning to the right but with float: right
.
My text and my icon are very close, I would like to add a margin in my text to the left, so that it distances itself a bit from my "x" icon.
Here's a picture:
Following is my html and css responsible:
<div class="row">
<div class="col-12 col-md-4">
<span class="tituloAtributo">Tamanho</span> <i class="fa fa-close iconeexcluiatributo" aria-hidden="true"></i>
<br>
<span class="atributo">P</span>
</div>
<div class="col-12 col-md-4 alinhacentro">
<span class="tituloAtributo">Cor</span> <i class="fa fa-close iconeexcluiatributo" aria-hidden="true"></i>
<br>
<span class="atributo">Cinza</span>
</div>
<div class="col-12 col-md-4 alinhadireita">
<span class="tituloAtributo">Cor</span> <i class="fa fa-close iconeexcluiatributo" aria-hidden="true"></i>
<br>
<span class="atributo">Rosa</span>
</div>
</div>
My css:
.alinhadireita{
text-align: right;
}
.iconeexcluiatributo{
color: #C62828;
font-size: 14px!important;
float: right;
}
How can I add a margin between this x button so it does not destroy my responsiveness?