css bootstrap override method

Question

This is my approach to implement a simple diary day:

<div class="panel panel-primary">
  <div class="panel-heading">June</div>
  <div class="panel-body">
25
<br>
 <span class="glyphicon glyphicon-time"></span>
  </div>
</div>

and here is the css code:

.panel{
    border-color:#EEEEEE !important;
    width: 150px;
}

.panel > .panel-heading {
    background-color: greenyellow;
    color: white;
    height: 40px;
    text-align: center;
    border-color:black !important;
    font-size: 20px;
}

.panel> .panel-body{
    text-align: center;
    font-family: "Comic Sans MS";
    font-size: 35px;   
}

.glyphicon{
    font-size: 20px !important;
    text-align: left !important;
}

What I want is to align the glyphicon at the left, but because of been nested to panel-body, which alignment is center, this cannot be happened. Even if i tried "!important".

Any help is welcome

neophyte · Accepted Answer · 2017-02-19 09:50:29Z

1

Just bring it outside class="panel-body" That will do the trick.

Working example

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 type="text/css">
             .panel{
    border-color:#EEEEEE !important;
    width: 150px;
}

.panel > .panel-heading {
    background-color: greenyellow;
    color: white;
    height: 40px;
    text-align: center;
    border-color:black !important;
    font-size: 20px;
}

.panel> .panel-body{
    text-align: center;
    font-family: "Comic Sans MS";
    font-size: 35px;   
}

.glyphicon{
    font-size: 20px !important;
    text-align: left !important;
}
           </style>
           
           </head>
           <body>
           <div class="panel panel-primary">
  <div class="panel-heading">June</div>
  <div class="panel-body">
25
<br>
  </div>
 <span class="glyphicon glyphicon-time"></span>

</div>

           </body>
           </html>

` Hope this helps!

answered Feb 19, 2017 at 9:50

neophyte

6,6322 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Georgios Over a year ago

it does! Quick and easy. Thank you!

Collectives™ on Stack Overflow

css bootstrap override method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related