CODEWITHSUNDEEP
htmltwitter-bootstrapcss
fgonzalez
fgonzalez

Reputation: 3877

Issue aligning items using Bootstrap and Css

I am using bootstrap and would like to have a list of items horizontally where the last item has to be a progress bar. I am pretty new to Css, so I tried to do it using the list-inline css class. My problem is that the progress bar is never aligned horizontally with the other two items but it is displayed in the next line. However if I don't use class="row" and class="col-sm-2" the progress bar is not even displayed.

So please could you help me and tell me a way to display these three items in the same line? I have tried these two options wihout success

<ul class="list-inline">
    <li>
       item 1
    </li>
    <li>
        item 2
    </li>
    <li>
        <div class="row">
            <div class="col-sm-2"><progressbar class="progress-striped" value="progress" type="warning">{{progress}}</progressbar></div>
        </div>
    </li>
</ul>

and 

<ul class="list-inline">
    <li>
       item 1
    </li>
    <li>
        item 2
    </li>
    <li>

            <progressbar class="progress-striped" value="progress" type="warning">{{progress}}</progressbar>

    </li>
</ul>

Upvotes: 0

Views: 41

Answers (1)

m4n0
m4n0

Reputation: 32275

You need to assign col-* for the list items as well.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <ul class="list-inline">
      <div class="col-xs-5 col-sm-5">
        <li>
          item 1
        </li>
      </div>
      <div class="col-xs-5 col-sm-5">
        <li>
          item 2
        </li>
      </div>

      <div class="col-xs-2 col-sm-2">
        <progressbar class="progress-striped" value="progress" type="warning">{{progress}}</progressbar>
      </div>
  </div>
</div>

Upvotes: 1

Related Questions