CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Craig
Craig

Reputation: 18734

Putting two spans next to each other on same line?

I need to display an icon, next to a description text on larger screens, but on small, just the icon.

I am trying this:

        <div class="col-lg-1">
            <span class="glyphicon @line.ArrowType"> </span> <span class="visible-lg"><small>@line.EntityEventType</small></span>
        </div>

But it puts the text on a line under the icon. Without the span around the @line...., it works, but I need to conditionally show that text based on the screen size.

Is there a way to keep two spans on the same line next to each other?

Upvotes: 0

Views: 3437

Answers (2)

lilezek
lilezek

Reputation: 7384

Try changing:

<div class="col-lg-1">

With some larger class:

<div class="col-lg-12">

Being the maximum.

By default, span doesn't jump to next line:

https://jsfiddle.net/q0vc6swm/

Edit

The problem seems to be visible-lg. Use a custom class instead, with media query:

.visible-custom {
    display: none;
}

@media (min-width: 1024px) {
    .visible-custom { 
        display: initial;
    }    
}

https://jsfiddle.net/q0vc6swm/2/

Upvotes: 1

vanburen
vanburen

Reputation: 21663

You should be using .visible-*-inline as .visible-lg is why you're having the issue. See docs.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-1"> <span class="glyphicon glyphicon-plus"> </span>  <span class="visible-lg-inline"><small>Yup</small></span>

        </div>
    </div>
</div>

Upvotes: 4

Related Questions