AndrewLeonardi AndrewLeonardi - 1 year ago 68
CSS Question

Issue with Bootstrap Rows throwing off Code

Here is what I am building. This works perfectly: The main goal is for the dots to connect to the prices but not be under the words.

When I add bootstrap to make it responsive for some odd reason the dots start going under the words see here:
Changed the color a bit to make it easy to see. For the life of me I cannot figure out what's causing the issue. Any thoughts?


<span class='descripcion'>Trócola</span>
<span class='precio'>56´72</span>
<span class='descripcion'>Junta la trócola</span>
<span class='precio'>0´33</span>
<span class='descripcion'>Gamusinos en oferta c/u</span>
<span class='precio'>6´47</span>

* {margin:0;padding:0;border: 0 none;position: relative;}

html, body {
background: gray;
padding-top: 1rem;
font-family: muli;
font-weight: 300;
font-style: italic;
color: black;
p {
background: inherit;
width: 70%;
max-width: 40rem;
min-width: 300px;
margin: 0 auto;
font-size: 1.2rem;
line-height: 1.5rem;
color: #fff;
padding-right: 4rem;
margin-bottom: .5rem;
color: black;
p:before {
content: '';
position: absolute;
bottom: .4rem;
width: 100%;
height: 0;
line-height: 0;
border-bottom: 2px dotted #ddd;
.descripcion {
background: inherit;
display: inline;
z-index: 1;
padding-right: .2rem;
.precio {
background: inherit;
position: absolute;
min-width: 4rem;
bottom: 0;
right: 0;
padding-left: .2rem;
text-align: right;
z-index: 2;

h1 a {
display: block;
text-decoration: none;
color: rgba(0,0,0,.55);
margin-bottom: 1rem;
text-align: center;
transition: .5s;

Answer Source

The issue is with background-color of .descripcion and .precio, in without bootstrap fiddle it's inheriting background-color of body which is grey, but in bootstrap fiddle it's inheriting transparent background-color.

Updated Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download