CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NewCod3r
NewCod3r

Reputation: 1268

bootstrap 3.x not show h4 and icon in inline

I need to list title with icon and description using bootstrap 3.X. But in action <h4> and <i> not display in inline.

HTML:

<div class="mil-product">
  <ul>
    <li>
      <div class="title"><span class="so"><i class="fa fa-gift fa-2x"></i> <h4> Title of</h4></span></div>
      <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description </span>
    </li>
    <li>
      <div class="title"><span class="so"><i class="fa fa-truck fa-2x"></i><h4> Title Of 2</h4></span></div>
      <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description</span>
    </li>
    <li>
      <div class="title"><span class="so"><i class="fa fa-truck fa-2x"></i><h4> Title Of 3</h4></span></div>
      <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description</span>
    </li>
  </ul>
</div>

CSS:

  .mil-product > ul > li > div.title {
    display: inline-block;
    border-bottom: 3px solid #e1e1e1;
    width: 100%;
    position: relative;
    top: 12px;
  }

  .mil-product > ul > li > div.title > .so {
    color: #a0a0a0;
    position: absolute;
    top: -5px;
    left: 10px;
    background-color: #fff;
    font-size: 12px;
    padding: 0 5px;
    width: auto;
  }

  .mil-product > ul > li > span.desc {
    display: inline-block;
    padding: 10px 0 0;
    margin-top: 10px;
  }

  ul {
    list-style-type: none;
  }

DEMO Here

Upvotes: 1

Views: 801

Answers (3)

Paul Leclerc
Paul Leclerc

Reputation: 1137

h4 have a default "display: block" property. When you need to align any other content in position relative with it you need to change it.

So solution is to add these lines in your css : 

  h4 {
    display: inline-block;
  }

Care, sometime you need to add "vertical-align: top/middle/whatever..." to make them having a vertical alignment. Simple :)

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

h4 is default block element so it will tend to go down in new line. We need to make it inline

h4 {
    display: inline-block; /* to make it inline */
    vertical-align: middle /* to align it vertically other values are top | bottom | baseline */
}

Upvotes: 2

Head In Cloud
Head In Cloud

Reputation: 2051

Put this in your css

h4 {
    display: inline-block;
}

Upvotes: 0

Related Questions