Q:

How to make triangle shape under div on Bootstrap ?

I have 12 column in my html for a project.I want to put triangle to under any div like photo.
and my html codes like that.
  <div class="container">
                                   <div class="row">
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#2EFE2E">A+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#58FA58">A</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#81F781">A-</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#81F79F">B+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding sidiv"><div class="info-box"><span class="info-box-icon" >B</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#A9F5BC">B-</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#D0FA58">C+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#F7FE2E">C</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE9A2E">C-</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE642E">D+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE2E2E">D</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FF0000;">D-</span></div></div>
                                </div>
                               </div>

How can I do like this triangle in Bootstrap or css or jquery or bla. ?
Thanks for all ?

A:

Simply use bootstrap glyphicons class="glyphicon glyphicon-triangle-top" place it under your div using css.
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">
            .col-xs-1 {
              height: 15px;
            } 
           </style>
           </head>
           <body>
<div class="container">
<div class="row">
  <div class="col-xs-1" style="background-color: blue;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: brown;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: blue;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: brown;"></div>
   <span class="glyphicon glyphicon-triangle-top" style="color: black;"></span>
</div>
</div>
  </body>
  </html>

One advantage of using span is you can manipulate it easily using javascript.

