Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to make a message with bootstrap to I would like something like it
Image example:
Here is what I tried so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
<div class="panel panel-default">
<div class="panel-heading">message here</div>
</div>
</div>
</body>
</html>
The question is how to get a bootstrap panel style like the image example and also align the user picture to the panel ?
Try this?
Edited to show user image closer
#curvedarrow {
position: relative;
width: 0;
height: 0;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-right: 7px solid #ddd;
border-radius: 1px 3px 17px 0px;
top: 12px;
left: -5px;
width: 12px;
height: 12px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#img-block{
padding-right: 5px;
padding-left: 5px;
width: 60px;
display: inline-block;
}
#message-block{
padding-left: 0;
display: inline-block;
width: calc(100% - 65px);
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div id="img-block">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
</div>
<div class="col-xs-12" id="message-block">
<div class="panel panel-default">
<div id="curvedarrow"></div>
<div class="panel-heading">message here</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's my basic attempt. I simply used the idea from here: CSS3 moon shape
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
<div class="something">
</div>
<div class="panel panel-default">
<div class="panel-heading">message here</div>
</div>
</div>
<style>
.something {
box-shadow: inset 0px 15px #ddd, inset 0px 15px 1px 1px #ddd;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
top: 10px;
left: -2px;
z-index: -1;
transform: rotate(-250deg);
}
.panel {
position: relative;
top: 5px;
left: -25px;
background: #00728D;
}
.container * {
display: inline-block;
}
</body>
</html>
Related
I have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a class="btn btn-primary"><i class="fa fa-angle-left"></i> 1</a>
<a class="btn btn-primary">2 <i class="fa fa-angle-right"></i></a>
</body>
</html>
I have two bootstrap buttons with icons <,>.I wanna make them together like one button and put a vertical separator '|' like this below
To achieve this I tried different things but couldn't get the desired one.
You can try the vertical line by using :before and positioning it to the place.
I've created a little example, it might help you.
HTML
<div class="button-wrapper">
<button><1</button>
<button class="last-btn">2></button>
</div>
CSS
.button-wrapper{
display: flex;
}
.last-btn:before {
content: '';
position: absolute;
top: 50%;
height: 50%;
background: white;
width: 1px;
left: 0px;
transform: translateY(-50%);
}
button{
padding: 5px 10px;
border: 0;
position: relative;
background: skyblue;
color: #ffffff;
}
https://codepen.io/ammar-d/pen/XWderxm
You could use Button-Groups and CSS-Pseudo-Elements like :after
It's not perfect but I think it should do the trick :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn-group > .btn{ position:relative;}
.btn-group > .btn:after{
position:absolute; right:0; top: 50%;
transform:translateY(-50%);
content:''; width: 1px; height:1.25em;
background-color:currentColor;
}
.btn-group > .btn:last-child:after{ content:none;}
</style>
</head>
<body>
<div class="btn-group">
<a class="btn btn-primary"><i class="fa fa-angle-left"></i> 1</a>
<a class="btn btn-primary">2 <i class="fa fa-angle-right"></i></a>
</div>
</body>
</html>
Some flexbox and psuedo-element magic make it happen :-)
.wrapper {
display: flex;
overflow: hidden;
border-radius: 5px;
font-family: Helvetica;
color: white;
width: 80px;
position: relative;
}
.wrapper::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 1px;
background: white;
height: 60%;
}
.btn {
background: #0a48ff;
padding: 7px;
width: 50%;
text-align: center;
cursor: pointer;
transition: background 0.2s;
}
.btn:hover {
background: #0a48ffdd;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="btn btn-left"><i class="fa fa-angle-left"></i> 1</div>
<div class="btn btn-right">2 <i class="fa fa-angle-right"></i></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.left {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.right {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.separator {
display: inline-block;
color: #d8d8d8;
vertical-align: middle;
border: 1px solid transparent;
padding: 0.375rem 0.15rem;
font-size: 1rem;
line-height: 1.5;
background-color: #007bff;
}
</style>
</head>
<body>
<a class="btn btn-primary left"><i class="fa fa-angle-left"></i> 1</a
><span class="separator">|</span
><a class="btn btn-primary right">2 <i class="fa fa-angle-right"></i></a>
</body>
</html>
Here is another solution.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.left {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.right {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.left::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 60%;
background: rgba(255, 255, 255, 0.6);
width: 2px;
margin-left: -1px;
z-index: 10;
}
.wrap {
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrap">
<a class="btn btn-primary left"><i class="fa fa-angle-left"></i> 1</a
><a class="btn btn-primary right">2 <i class="fa fa-angle-right"></i></a>
</div>
</body>
</html>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
so I am using bootstrap and trying to create a scenario where half the row is orange, the other half green, but directly in the middle I want the blue hexagon.
The problem I'm having is I can get the blue hexagon to sit in the center on desktop but I want to design it mobile friendly. Any ideas how I could get the hexagon to sit directly in the middle were the two divs meet and stay there when in mobile friendly too?
here's my HTML
<!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>Hexagon | Home</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 red-500">
</div>
<div class="col-md-6 green-500">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6 hex-cont">
<div class="hexagon">
<i class="fa fa-handshake-o logo" aria-hidden="true" style="font-size:7em;"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 white">
<h1 class="text-center wit">Friend Zone</h1>
<h3 class="text-center wit">Mediation Service</h3>
</div>
</div>
</div>
</header>
and here's my relevant CSS
body{
font-family: 'Arima Madurai', cursive;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #64C7CC;
margin: 57.74px 0;
display:block;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 57.74px solid #64C7CC;
}
.hexagon:after {
top: 100%;
margin-left:-83%;
width: 0;
border-top: 57.74px solid #64C7CC;
}
.red-500{
background:#FF4500;
height:250px;
z-index:0;
display:block;
}
.green-500{
background:#4CA64C;
height:250px;
z-index:-5;
}
If you've made the row with orange/green, put the hexagon element in that row, add position: relative; to the row (parent), set the hexagon element to position: absolute; and use a combination of left: 50%; transform: translateX(-50%); to center it.
body{
font-family: 'Arima Madurai', cursive;
}
.row {
position: relative;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #64C7CC;
display:block;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 57.74px solid #64C7CC;
}
.hexagon:after {
top: 100%;
margin-left:-83%;
width: 0;
border-top: 57.74px solid #64C7CC;
}
.red-500{
background:#FF4500;
height:250px;
z-index:0;
display:block;
}
.green-500{
background:#4CA64C;
height:250px;
z-index:-5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>Hexagon | Home</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 red-500">
</div>
<div class="hexagon">
<i class="fa fa-handshake-o logo" aria-hidden="true" style="font-size:7em;"></i>
</div>
<div class="col-md-6 green-500">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6 hex-cont">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 white">
<h1 class="text-center wit">Friend Zone</h1>
<h3 class="text-center wit">Mediation Service</h3>
</div>
</div>
</div>
</header>
I want to show glyphicon on the top of bootstrap badge.
Can anyone share the css for the same.
I need glyphicon to be placed at the top of badge like given below
PS: I need glyph over (on the top corner of the badge)
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<span class="badge">10</span>
<span class="glyphicon glyphicon-time"></span>
</div>
</body>
</html>
You can try below css.
It is working for me
.badge > .glyphicon {
position: absolute;
top: -15px;
background: red;
padding: 5px;
border-radius:50%;
}
.badge {
margin-top: 15px;
position: relative;
}
Try this
.badge {
margin-top: 20px;
position: relative;
}
.badge > .glyphicon {
position: absolute;
top: -10px;
background: red;
padding: 5px;
border-radius:50%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<span class="badge">10 <span class="glyphicon glyphicon-time"></span></span>
</div>
</body>
</html>
Try this below
.group .glyphicon.glyphicon-time {
left: 33px;
position: absolute;
top: 4px;
}
.group .badge {
margin-top: 10px;
position: relative;
}
.group{ }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="group">
<span class="badge">10</span>
<span class="glyphicon glyphicon-time"></span>
</div>
</div>
</body>
</html>
you can also try this code and result will look like this
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="badge-container" style="
display: inline-block;
position: relative;
margin: 20px 0;
">
<span class="badge">10</span>
<span class="glyphicon glyphicon-time" style="
position: absolute;
right: -4px;
top: -5px;
"></span>
</div>
</div>
</body></html>
try this:
.glyphicon{
top: 24px !important;
font-size: 31px;
}
.badge {
margin-left: -10px;
background-color: #E91E63 !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-time"></span>
<span class="badge">10</span>
</div>
</body>
</html>