css - How can I set the text on the right of a glyphicon into a Twitter BootStrap theme? -

i pretty new in twitter bootstrap , have following problem:

i have defined section page:

    <!-- column 3:  -->     <div class="container">         <div class="col-md-4">             <div class="group-item">               <i class="glyphicon glyphicon-home"></i>               <h4><a href="#">test</a></h4>               <p>bla bla bla</p>             </div>     </div> 

so want i tag show bootstrap glyphicon on left , thext (test , bla bla bla) on right.

so trying set following css:

.groups {     float: left;     margin-right: 15px;     width: 80px; } 

but can't work , obtain text under glyphicon.

why? missing? how can fix issue?

tnx

the obvious solution move glyph link.

.group-item {    margin-right: .5em; /* margin tast */  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>      <div class="container">          <div class="col-md-4">              <div class="group-item">                <h4><a href="#"><i class="glyphicon glyphicon-home"></i>test</a></h4>                <p>bla bla bla</p>              </div>      </div>

this has added benefit of making icon clickable.

alternatively, float icon

.group-item {    float: left;    margin-right: .5em;    color: red;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">    <div class="col-md-4">      <div class="group-item">        <i class="glyphicon glyphicon-home"></i>        <h4><a href="#">test</a></h4>        <p>bla bla bla</p>      </div>    </div>