CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
GETah
GETah

Reputation: 21429

Horizontally aligned divs in a list group item

I am using Bootstrap list group element to display some of my data. I am trying to align a couple of divs inside but with no luck so far (I have tried most of the suggestions I could find here on SO, no luck)

Here is what I want to achieve: enter image description here

And here is what I have so far and the corresponding code: enter image description here

Question

I can't make the text in the result above pull to the right hand side (I don't want to give the icon's div hard-coded height), it always comes below the icon. Below is my html:

<div class="container">
   <div class="list-group" style="margin-top:50px;">
      <a href="#" class="list-group-item">
         <div class="row">
            <div class="pull-left" style="margin-left: 10px; margin-right: 10px;width:20px;">
               <i class="fa-star blue" title="Unfavorite" style="font-size: 24px;">
               </i>
            </div>
            <div>
               <h4 class="list-group-item-heading">Test project</h4>
               <div class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div>
            </div>
         </div>
      </a>
   </div>
</div>

What am I doing wrong?

Upvotes: 1

Views: 1744

Answers (1)

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

EDITED JSFiddle demo

There you go. Here are the changes I've done:

HTML

                <div class="row">
                    <div class="custom">
                        <i class="fa-star blue" title="Unfavorite" style="font-size: 24px;">
                        </i>
                    </div>
                    <div>
                        <h4 class="list-group-item-heading puller">Test project</h4>
                        <div class=" case1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div>
                    </div>
                </div>

Added a class custom to the div that wraps the icon. Added class puller to the heading. Added class case1 to the text.

Here is the CSS:

  .row {
    padding:10px;
}
.custom {
    display: inline-block;
    float: left;
    width: 35px;
     text-align: center; /* fixed the icon hovering to the left */
}
.case1 {
    padding-left: 55px;
    float: right;
    text-align: justify;
}
.puller {
    padding-left: 20px;
    display: inline-block;
}

It is a little bit chunky, but it works (it even does not hurt responsiveness). Although I've seen people doing solutions with less.

Hope that helps!

p.s I have edited the code. I missed out to add text align so that the icon will look good!

Upvotes: 1

Related Questions