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: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class=" col-xs-6 ">
      <p class="item dots ">Cheese</p>
      <p class="item dots ">White</p>
      <p class="item dots ">Special</p>
    </div>
    <div class="col-xs-2">
      <p class="item ">$8.99</p>
      <p class="item ">$9.99</p>
      <p class="item ">$13.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item ">$10.99</p>
      <p class="item ">$11.99</p>
      <p class="item ">$15.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item ">$12.99</p>
      <p class="item ">$13.99</p>
      <p class="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

<div class="container">
  <div class="row">
         <div class="col-xs-6">
              <p class="item dots">Cheese</p>
              <p class="item dots">White</p>
              <p class="item dots">Special</p>
         </div>

         <div class="col-xs-2">
             <p class="item">$8.99</p>
             <p class="item">$9.99</p>
             <p class="item">$13.50</p>
         </div>

         <div class="col-xs-2">
             <p class="item">$10.99</p>
             <p class="item">$11.99</p>
             <p class="item">$15.50</p>
         </div>

         <div class="col-xs-2">
             <p class="item">$12.99</p>
             <p class="item">$13.99</p>
             <p class="item">$17.50</p>
         </div>
    </div>
</div>

CSS

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