How to implement such a list in bootstrap 3?
Closed due to the fact that off-topic participants aleksandr barakin , Denis , HamSter , tutankhamun , fori1ton 19 Oct '16 at 14:38 .
- Most likely, this question does not correspond to the subject of Stack Overflow in Russian, according to the rules described in the certificate .
- fourThis question should be closed, because the question-picture is useless for the knowledge base. - aleksandr barakin
|
2 answers
*{ padding: 0; margin: 0; box-sizing: border-box; } .list-number-custom { list-style: none; counter-reset: li; -moz-column-count: 3; -moz-column-gap: 2em; column-count: 3; column-gap: 2em; } .list-number-custom > li { padding: 15px 0 15px 40px; position: relative; } .list-number-custom > li:before { counter-increment: li; content: counter(li) " "; position: absolute; top: 50%; left: 0; margin-top: -15px; width: 30px; height: 30px; line-height: 30px; text-align: center; background: tomato; border-radius: 50%; } <ol class="list-number-custom"> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ol> - If the text of the element is in several lines, then the icons at different heights - rammtw
- 2@rammtw jsfiddle.net/soledar10/6t8z838q - soledar10
|
<ol> <li class="col-xs-4">text 1 <li class="col-xs-4">text 2 <li class="col-xs-4">text 3 <li class="col-xs-4">text 4 <li class="col-xs-4">text 5 </ol> |
