Using Dot Leaders For A Food Menu With Bootstrap Grids

I'm creating a food menu using the grid column system with bootstrap 3, and I'm trying to create dot leaders between the menu item and the price. I kind of got it to work, but I ca

Solution 1:

You could do a display: flex trick with these 2 rules

.dots {
  display: flex;
}
.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

Stack snippet

.dots {
  display: flex;
}
.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><divclass="container"><divclass="row"><divclass=" col-xs-6 "><pclass="item dots ">Cheese</p><pclass="item dots ">White</p><pclass="item dots ">Special</p></div><divclass="col-xs-2"><pclass="item ">$8.99</p><pclass="item ">$9.99</p><pclass="item ">$13.50</p></div><divclass="col-xs-2"><pclass="item ">$10.99</p><pclass="item ">$11.99</p><pclass="item ">$15.50</p></div><divclass="col-xs-2"><pclass="item ">$12.99</p><pclass="item ">$13.99</p><pclass="item ">$17.50</p></div></div></div>

Solution 2:

Would this do the trick for you? http://codepen.io/panchroma/pen/YZBZRx

As you'll see the important detail is that I've used a border style of dotted and made a few fixes to your HTML

I hope this helps!

HTML

<divclass="container"><divclass="row"><divclass="col-xs-6"><pclass="item dots">Cheese</p><pclass="item dots">White</p><pclass="item dots">Special</p></div><divclass="col-xs-2"><pclass="item">$8.99</p><pclass="item">$9.99</p><pclass="item">$13.50</p></div><divclass="col-xs-2"><pclass="item">$10.99</p><pclass="item">$11.99</p><pclass="item">$15.50</p></div><divclass="col-xs-2"><pclass="item">$12.99</p><pclass="item">$13.99</p><pclass="item">$17.50</p></div></div></div>

CSS

p.dots{
  border-bottom:1px#333 dotted;
}