如何从css或bootstrap实现此水平线

Question

I am working in a project which involves html,css and bootstrap for front end designing.

Is there any way to get this view either from bootstrap itself or using core css? can someone provide me a code how to get this line

Answer 1

Hmm this could be done in 100 ways and this is probably not the cleanest one, but it works :) Im creating a div.line with 3 div.bullets where the last bullet has a before AND an after assigned to it.

JSFIDDLE

Answer 2

Here is a CSS only solution using pseudo element. This solution will adjust to the width of the page when resized.

 ul, li { list-style: none; } li { float: left; position: relative; height: 2px; width: 30%; background-color: cornflowerblue; } li:before { content: ''; position: absolute; height: 10px; width: 10px; border-radius: 50%; top: 1px; transform: translateY(-50%); background-color: cornflowerblue; } li:last-child { width: 0px; } 

 <ul> <li></li> <li></li> <li></li> <li></li> </ul>