Horizontal description list lacks sufficient left-hand margin/padding

[patrickhlauke]

On small screens, horizontal description lists http://v4-alpha.getbootstrap.com/content/typography/#horizontal-description are flush against the left edge of the viewport.

[cvrebert]

Do we really need .dl-horizontal anymore? Seems like just using .row would be logical, and it doesn't suffer from this rendering problem.

[patrickhlauke]

Seems like just using .row would be logical

I'd buy that for a dollar. Would it be sufficient to replace the classname in place on the existing documentation, or would that look weird (as the rest of the section on lists has special classes)? I think it would be good to document this usage of rows and cols, so completely removing this would probably be too confusing...

[bassjobsen]

The flushing against the left edge of the viewport is due to the .dl-horizontal (or .row now) not wrapped in the required .container.

I also wonder if using grid classes in stead of .horizontal-list, .horizontal-list-item etc, ... is consistent with the bootstrap4 strategy for class naming which should make your HTML more flexible while bringing along increased extensibility. But i do understand that the ability to use grid classes for sizing is very flexible.

Using grid classes also introduces the ""problem" of having grid columns in the row taller than the next one, see the picture below:

According to http://www.the-art-of-web.com/css/format-dl/ to above can be fixed when applying the CSS code beneath (clearfix variant);

dt {
  clear: left;
}    
dt::after {
  content: "";
  display: table;  
}  

[patrickhlauke]

Closing, as the original problem with the left-hand margin/padding has been addressed.