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


Tags: css,html5,twitter-bootstrap,css3,glyphicons

Problem :

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



Solution :

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>


    CSS Howto..

    How can I add a whitespace in between my element and psuedo element?

    How do I code CSS to “change” when I load/pull content using ajax?

    How to ignore parent css style

    How to align a paragraph to center of cell in table

    Picture thumbnail shown in Google image search output is
    not , why? [closed]
    It basically comes down to preference. It is considered outdated to use table for data layouts. Use table for just that - actual tables. For the layout and such tasks,...
    Read more

    how to get attribute value using selenium and css

    In CSS/SVG, how to rotate each character of a word?

    In CSS, how to select a particular tag under mutiple ids?

    How to center and span table heading (row)

    How to set textbox width fit in table cell CSS

    how to hidden image over image in css

    How do you make a div display two inline items that stretch the width?

    How to reuse CSS selector?

    How to scroll horizontally when there are many columns (or a very long row)?

    How can I format my css text so that the result is in 2 columns?

    How to remove background from breadCrumb

    How to create a header that changes as you scroll down the page? [duplicate]

    How to dynamicaly change css style?

    JavaScript and SEO. How Should I reconcile them?

    How to create a fixed div inside an another div?

    A text shows up smoothly when hovering thumbnails. Is this a jQuery plugin or just CSS?

    Handle text as elements, how to hide with CSS?

    How do I create a side menu navigation bar that opens items to the right [closed]

    How to Position Fixed with LOTS elements inside

    How to align in “rubber” layout with narrow screens?

    How to create flexible div items that break after the line?

    How to style
    to have multiple colors?

    How to come back to original state with a toggle button in jQuery?

    How do I check for a css value using jQuery?

    how to make form input in middle