"Bootstrap star-light"
Bootstrap 3.3.0 Snippet by vishalnagda1

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <hr class="star-light"> </div> <div class="col-md-12"> <hr class="star-primary"> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
.container { background-color: #18bc9c; } hr.star-light, hr.star-primary { margin: 25px auto 30px; padding: 0; max-width: 250px; border: 0; border-top: solid 5px; text-align: center; } hr.star-light:after, hr.star-primary:after { content: "\2605"; display: inline-block; position: relative; top: -.8em; padding: 0 .25em; font-family: FontAwesome; font-size: 2em; } hr.star-light { border-color: #fff; } hr.star-light:after { color: #fff; background-color: #18bc9c; } hr.star-primary { border-color: #2c3e50; } hr.star-primary:after { color: #2c3e50; background-color: #18bc9c; }

Related: See More

Rotating CSS Card
Light-weight spinner indicator (ASCII)
Functional Star Ratings

Questions / Comments:

BUG

The default overflow property for <hr> in some versions of Chrome, Edge and IE is hidden. This results in the following css not rendering properly - the Font Awesome star icon specified in 'content' in hr.star :after (content: "\f005") does not display.

FIX

To fix the above issue (have the FA star icon render in the header) specify the overflow property in hr.star CSS as 'visible'.


hr.star-light,
hr.star-primary {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 5px;
text-align: center;
/ Added overflow property and set to 'visible' /
overflow: visible;
}

vid1 (2) - 7 years ago - Reply 3

Thanks for the tip!

bidnapper (0) - 7 years ago - Reply 1

Good tip! Thanks. Using Flux, I got this error.

Just included your code in <HEAD></HEAD>:

    <style>
        hr.star-light,
        hr.star-primary {
        margin: 25px auto 30px;
        padding: 0;
        max-width: 250px;
        border: 0;
        border-top: solid 5px;
        text-align: center;
        / Added overflow property and set to 'visible' /
        overflow: visible;
        }
    </style>

nicolaiev () - 6 years ago - Reply 0