how to achieve this this horizontal line from css or bootstrap


Tags: html,css,twitter-bootstrap

Problem :

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 enter image description here



Solution :

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>


    CSS Howto..

    How to design a full width bar with HTML and CSS [closed]

    how to set overflow: hidden; to one element

    How to apply CSS on texte label beside an input?

    How should I handle this CSS Inheritance conundrum?

    Unicode character, down triangle, shows up as strange text

    How to align images and urls within div trees in CSS?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    how to align the content of a box

    How to correctly redefine the CSS settings for FireFox?

    How to apply nested css using jQuery?

    How to have the cutout of a div at the bottom right with shadow to the left

    How to delete first pseudo after

    How to create a lightbox like this [closed]

    How to disable a css rule for a wordpress plugin

    How * tag can be used in CSS?

    jquery - How to determine if a div changes its height or any css attribute?

    PHP Show Hidden Div

    How to convert CSS into LESS when there are multiple classes using same properties

    How to make a stable two column layout in HTML/CSS

    How to fill a QTextBrowser with a single table in Qt?

    How to build a CSS template from scratch

    How to trigger css :hover event on PageLoad

    how to call all Google font CSS under specific font face

    How to do HTML/CSS form helpers/popover

    how to rotate text with css? transform is not supported by current schema?

    Responsive CSS layout - how to stretch the background overlay

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    Block grid shows horizontal scroll bar in Foundation

    How to override a class using jquery

    how to place the images exactly in menu position