Noob Noob - 4 months ago 22
CSS Question

Align glyphicon with label

I have following markup:

<div class="row">
<div class="col-xs-6">
<label class="labelTextFormat">Tags</label>
<button><span class="glyphicon glyphicon-edit" style=""></span></button>
<button><span class="glyphicon glyphicon-plus" style=""></span></button>
</div>
</div>


Which gives me following output:

Glyphicon

I want to display them next to Label.How should I do that?

Codepen Demo

enter image description here

Answer

Your label is 100% wide

Remove that

.labelTextFormat {
    font-weight: normal; 
    font-size: 18px;
    color: #a1ebff; 
    padding-top: 6px;
    float: left;
}

    .labelTextFormat {
        font-weight: normal; 
        font-size: 18px;
        color: #a1ebff; 
        padding-top: 6px;
        float: left;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6">
    <label class="labelTextFormat">Tags</label>
    <button><span class="glyphicon glyphicon-edit" style=""></span></button>
    <button><span class="glyphicon glyphicon-plus" style=""></span></button>
  </div>
</div>

Comments