CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SnakeEyes
SnakeEyes

Reputation: 83

Bootstrap: Two elements in one line?

I have a problem with my verified icon. So what I actually want is that the verified Icon like on Twitter or Facebook is besides the Username and not in the next line under my username. But it does not work.

<ul class="line">
     <li>
        <h3 align="center">Username</h3>
        <span class="label label-info">
           <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
        </span>
     </li>
 </ul>

Here is my CSS:

li.line {
    list-style: none;
}

ul.line {
    display: block;
}

Upvotes: 2

Views: 3721

Answers (2)

slashsharp
slashsharp

Reputation: 2833

h3 is a block element

change it to inline element

<ul class="line">
  <li>
     <span align="center">Username</span>
     <span class="label label-info">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
     </span>
  </li>
</ul>

Upvotes: 1

Muggybear
Muggybear

Reputation: 11

If you don't want the list point, then I don't think li is what you'll want to use. A span or even a div could probably give you the look you're going for.

As for having them on the same line, try using the inline-block option for your css display element. It is similar to display: block, but it allows you to keep your elements on the same line.

Upvotes: 0

Related Questions