CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
John Smith
John Smith

Reputation: 6259

Span next to each other in div

Im experementing with bootstrap and actually i have this html output:

enter image description here

What im trying to achive is that the panel is horizontal scrollable and that the two spans with 16m Wartezeit are displayed next to each other. At the end i want to add around 5 of this spans to the panel and display them next to each other so that the user can then scroll horizontal the panel. The major problem im facing is that when i added the two spans they get a width of 100% because of the bootstrap css. And i dont really know how i should change the width to the actual width that is taken by the content? Here you can see my code in action: http://bootply.com/94690

And my html:

<div class="panel panel-default">
    <div class="panel-heading">
     <span class="glyphicon glyphicon-stats"></span>
      Statistik
    </div>
    <div class="panel-body">
      <span style="text-align:center; display:inline">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
      <span style="text-align:center; display:inline">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
    </div>
  </div>

Thanks to all of you!

Upvotes: 0

Views: 3499

Answers (1)

m59
m59

Reputation: 43745

I believe bootstrap's ".row" and ."col" will solve your problem. Read about bootstrap's grid system (click).

Something like this: live sample here (click)

<div class="panel-body row" style="overflow:scroll">
      <span style="text-align:center;" class="col-xs-6">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
      <span style="text-align:center;" class="col-xs-6">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
</div>

However, I beg you to please stop using inline styles. Style belongs in css.

Update based on your comment:

<div class="panel-body">
  <div class="row">
    <span class="col-xs-6">
    <span class="col-xs-6">
  </div>
</div>

Upvotes: 1

Related Questions