Using dot leaders for a food menu with bootstrap grids

Question

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 can't seem to get the dot leaders to extend to the right of the item, instead it breaks the line and continues under the menu. Here's what I'm getting:

I tried

display:block; display:inline-block; display:inline;

in the CSS. The only way I seem to be able to stop it from breaking is shortening the

content: '...'

Is there a way I can get this to work, or do I have put the content in a table or use list items?

Here is the rest of my code, if anyone could help, I would appreciate it, thanks.

 <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>

    .dots::after {
       display: inline-flex;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: clip;
       content: 
        " . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . "
     }

score 1 · Accepted Answer · answered Apr 02 '17 at 09:00

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>

Hey thanks for your help I posted a follow-up question if you're interested. [link](http://stackoverflow.com/questions/43175775/using-dot-leaders-for-a-food-menu-with-flex-follow-up) — Coffeeteer, Apr 03 '17 at 02:45

score 0 · Answer 2 · answered Apr 02 '17 at 01:49

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;
}

It's not exactly what I'm looking for. I needed the leader dots to go from right-to-left. Although if I can't get to work that way I'll try this. Thanks. — Coffeeteer, Apr 03 '17 at 01:21

Using dot leaders for a food menu with bootstrap grids

2 Answers2

Linked