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 get the site to not collapse with css

    How to center float list elements inside an unordered list

    How to adjust table or content in CSS when printing?

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    How to override custom placeholder css

    How to get background img to show up in :after selector?

    How to grab a CSS syntax with JavaScript?

    How does the following line of JavaScript work?

    How to convert a CSS3 2D animatuon to a 3D Transform

    css top nav - left nav (menu), title in center, right side (more buttons) - howto?

    How to set CSS hover on input

    How do I make my css class footer go from the left to right side of the screen?

    how to resize images inside a div inside another div with css?

    How to over-ride img-width from bootstrap? Set css rule to null?

    How to create 3d ribbon box in css

    How come one of my columns in bootstrap is not functioning properly?

    How to target individually nested elements using CSS

    How to change tab key selection color with css? [duplicate]

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to set the styles on “*” and pseudo states with JavaScript? [closed]

    Jquery: Show/hide menu with single button

    How to display clicked on/off SVG icon from admin panel page and display result on a different page

    How to create a WordPress theme that use BootStrap?

    How to iterate over node var in Primefaces tree to set icons in CSS class from DB

    How does Twitter put labels inside textboxes?

    How do I animate this box to have a pop out effect?

    How do I make a Google Map span 100% remaining height between header and footer?

    how to make a timeline using html, css, javascript?

    How achieve rounded shadow behide a rounded element using css3

    How to control the HTML area to the right?