elements lose desired alignment when text in one of them overflows

Question

I'm trying to create an ingredients list, where I'm using the ul and li elements with divs inside of each li element for each different information type (amount, description or price). In the third li element, the description is too long to fit in the normal space of its own div. This causes it to overflow downwards (not to the right). This is fine, but the probem is that the next li element starts in the wrong place because of this overflow. I've marked the text that is rendered in the wrong place.

ul {
  list-style: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
  <ul>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        thawed puff pastry sheet
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        2 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        ~
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        All-purpose flour, for rolling
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        5 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        round brie cheese (8 to 12 ounces, 5- to 7-inch diameter)
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        10 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
        <!--- WRONG PLACE. Should start on new row -->
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        Large egg, beaten
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        1 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        ~
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        Baguette slices or crackes, to serve
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        1 USD
      </div>
    </li>
  </ul>
</div>

What can I do to make each li element start on a new row, even if the element above overflowed?

You got to start by putting the col elements into _rows_, that’s the very basic of how the grid system works. — CBroe, Feb 13 '18 at 09:12
@BramVanroy: The Bootstrap CSS isn't included properly in the snippet you created — Sahand, Feb 13 '18 at 09:12
Fixed. In the future, please use the snippets rather than external services. Also note that you are using an old version of bootstrap. — Bram Vanroy, Feb 13 '18 at 09:14
@Sahand Don't delete questions, just self-answer. It'll be closed as a typo, but still available as a reference. — Dave Newton, Feb 14 '18 at 18:11

score 3 · Answer 1 · answered Feb 13 '18 at 09:16

3

Add row class to your

items.

<li class="row">...</li>

answered Feb 13 '18 at 09:16

Alexandre Annic

9,942
5
36
50

unfortunately not only this .. he need also container, etc – Temani Afif Feb 13 '18 at 09:21

Bhuwan · Accepted Answer · 2018-02-13T09:22:49.370

This is because of the float:left in the col-* classes. To fix this use .row class in the <li>

Also no need to use same sm, md, lg values..Just use xs here if you want same grid structure for all screen...

...or use only sm if you want same grid structure till sm breakpoint

Stack Snippet

ul {
  list-style: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="container-fluid">
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      thawed puff pastry sheet
    </div>
    <div class="col-xs-3">
      2 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      ~
    </div>
    <div class="col-xs-7">
      All-purpose flour, for rolling
    </div>
    <div class="col-xs-3">
      5 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      round brie cheese (8 to 12 ounces, 5- to 7-inch diameter)
    </div>
    <div class="col-xs-3">
      10 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      Large egg, beaten
    </div>
    <div class="col-xs-3">
      1 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      ~
    </div>
    <div class="col-xs-7">
      Baguette slices or crackes, to serve
    </div>
    <div class="col-xs-3">
      1 USD
    </div>
  </li>
</ul>

we need also container .. not only row – Temani Afif Feb 13 '18 at 09:22 — Temani Afif, Feb 13 '18 at 09:22
@TemaniAfif yeah...Updated... – Bhuwan Feb 13 '18 at 09:24 — Bhuwan, Feb 13 '18 at 09:24

elements lose desired alignment when text in one of them overflows

2 Answers2