Twitter Bootstrap Question posted in

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

I am pretty new in Twitter BootStrap and I have the following problem:

I have defined this section into my 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 I want that the i tag that show the BootStrap glyphicon is on the left and that the thext (TEST and Bla Bla Bla) is on the right.

So I am trying to set the following CSS:

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

But it can’t work and I obtain that the text is under the glyphicon.

Why? What am I missing? How can I fix this issue?

Tnx

Tags:

2

Answers


  1. 0

    just applying float:left to the graphic icon you can achieve this

    you are not missing any thing but the thing is that for the .glyphicon in bootstrap uses inline-block and you can understand the this thing by given js fiddle

    Understanding
    reference js fiddle

    .groups i {
    float: left;
    margin-right: 15px;
    width: 80px;
}
.test{
    float:left;
}
       <!-- Column 3:  -->
    <div class="container">
        <div class="col-md-4">
            <div class="group-item">
              <i class="glyphicon glyphicon-home test"></i>
              <h4><a href="#">TEST</a></h4>
              <p>Bla Bla Bla</p>
            </div>
    </div>

    here is demo

    DEMO

    Login or Signup to reply.
  2. 0

    The most obvious solution is to move the glyph into the link.

    .group-item i {
  margin-right: .5em; /* margin to 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 the added benefit of making the icon clickable.

    Alternatively, just float the icon

    .group-item i {
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search