CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bigbang
bigbang

Reputation: 9

Inline content inside li using bootstrap

I have header which has ul tag with content inside. I can't inline them.

HTML

<div class="navbar-header">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <div>
         <span><img src="1"></span>
         <p class="p1">row information</p>
      </div>
    </li>
    <li>
      <div>
         <span><img src="1"></span>
         <p class="p1">row information</p>
      </div>
    </li>
    <li>
      <div>
         <span><img src="1"></span>
         <p class="p1">row information</p>
      </div>
    </li>
  </ul>
</div>

Here is fiddle

Upvotes: 0

Views: 141

Answers (2)

Adrianopolis
Adrianopolis

Reputation: 1292

1) Delete all your CSS and include the bootstrap css and js from CDN since you are using the bootstrap navigation syntax. 2) Change the p element to a span and you are good to go.

Upvotes: 1

sasha_gud
sasha_gud

Reputation: 1735

To inline them completely with images set p1 class display style to inline-block and remove flex-direction. Like this: 

.p1 {
  display: inline-block
}

https://jsfiddle.net/toL6f4h5/

Upvotes: 0

Related Questions