Menu
In my webapp I have a glyphicon contained in a div within a grid.
I'd like like the glyphicon to be full width and proportional height (to be displayed correctly).
How can I do ?
Plunker is: http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview
HTML is:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red">
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
</body>
CSS is:
.glyphicon {
width: 100%;
color: green;
border: 3px solid green;
}
Regards.
663
To do this.. to make the glyphicon Star icon responsive.
You could do it this way.
Use this to do what you are wanting to achieve here.
Not so much to fill the width but to size to what you need it to do.
Hope this helps.
.star-size {
font-size: 8.5vw;
color:orangered;
}
But please read this info.
If you also want the height of the div block to be reponsive with the star icon, then change the .inner-block class to this...
.inner-block {
padding-top: 15px;
padding-bottom: 15px;
background-color:black;
}
And then it will act like this.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>HTML/CSS Block not appearing</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 240px;
padding-top: 15px;
background-color:orangered;
}
.inner-block {
height: 120px;
padding-top: 15px;
background-color:black;
}
.star-size {
font-size: 8.5vw;
color:orangered;
}
.center-div {
position: absolute;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container block">
<div class="row">
<div class="col-xs-4 text-center inner-block center-div" >
<span class="glyphicon glyphicon-star star-size"></span>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
