NewCod3r NewCod3r - 3 months ago 11
HTML Question

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

Answer

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 */
}
Comments