Adding icons in between bootstrap columns

Question

My code

<div class="col-md-8">
   <div class="panel panel-default">
      <div class="panel-body">
         <div class="row">
            <div class="col-md-2">
               <small>
               </small>
            </div>
            <!--similar 5 more columns-->
         </div>
         <div class="row">
            <div class="col-md-2 goldenYellow">
               <small>
               HB GRANDI REYK,ICELAND, TD(GMT+2) 10:11 31/072017
               </small>
            </div>
            <!--similar 5 more columns-->
         </div>
      </div>
   </div>
</div>

looks like this my present image

I would like to add customized icon right arrow between divs or at the end od each div

XYZ · Accepted Answer · 2017-09-06T09:49:11.597

0

You can use css to create arrow and position it after each col

/*.goldenYellow:after {
  left: 70%;
  top: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 30px;
  margin-top: -30px;
}
*/
.icon-right-open{
   position: absolute;
   right: 0;
   top: 30px;
   width: 0; 
   height: 0; 
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
  
   border-left: 20px solid green;
}

<div class="col-md-8">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-2">
          <small>
            </small>
        </div>
        <!--similar 5 more columns-->
      </div>
      <div class="row">
        <div class="col-md-2 goldenYellow">
           <i class="icon-right-open"></i>
          <small>
              HB GRANDI REYK,ICELAND, TD(GMT+2) 10:11 31/072017
</small>
        </div>

        <!--similar 5 more columns-->
      </div>
    </div>
  </div>
</div>

edited Sep 06 '17 at 09:49

answered Sep 06 '17 at 06:37

XYZ

4,450
2
15
31

I am having a customized fontello icon ..how can i use this – Sanjana Prasad Sep 06 '17 at 06:43
Look at this , may help you https://stackoverflow.com/questions/17288478/how-do-i-use-fontello-fonts – Ovidiu Unguru Sep 06 '17 at 06:50
@SanjanaPrasad you can add the font and position that – XYZ Sep 06 '17 at 06:53
Hi @Sujith I just tried your solution working fine but for icon im adding this content: "\e801"; however my icon not displayed – Sanjana Prasad Sep 06 '17 at 09:40
Please show me your code.I think if you are using icon.you cna put icon in a span or i tag and position that – XYZ Sep 06 '17 at 09:43
@Sujith using icon like this – Sanjana Prasad Sep 06 '17 at 09:45
@SanjanaPrasad Updated the answer removing the psuedo element and added the element.You can add the font and position it.example: `position: absolute; right: 0; top: 30px;` – XYZ Sep 06 '17 at 09:50
Thanks !! Accepting this answer – Sanjana Prasad Sep 06 '17 at 09:59
@SanjanaPrasad Thanks – XYZ Sep 06 '17 at 10:00

Adding icons in between bootstrap columns

1 Answers1