1

There are so many questions on this, but they all seem to just want one item on the left and one on the right, or a button group. All of those are straightforward.

How can I achieve similar to this bootply

but instead of two buttons in the group on the right, two other elements - two divs, or two h3 for example?

Whatever I try these 2 elements always end up vertically stacked and not horizontally aligned in the right side of the footer.

EDIT

@Harinder88 provided this solution which, as you can see, does do what I asked and so I have accepted as the answer as I think in the vast majority of use cases, this is what most people are trying to achieve.

enter image description here

However, you can see that if the text is too long for the column, it gets wrapped and now everything is not on a single line. But I accept that is the compromise of having a responsive design. It just so happens that in my actual use case, that last item cannot be allowed to wrap, so I just have to give it a fixed width to solve that. Thanks @Harinder88.

rmcsharry
  • 5,363
  • 6
  • 65
  • 108

3 Answers3

1

Now see this example i aligned 2 items horizontal in left and right with 2 methods u can use any 1 of them

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <ul class="list-inline">
        <li class="col-xs-12">
          <div class="pull-right">
            <div class="row">
              <div class="col-md-6 col-xs-6">
                <p>Left side with col</p>
              </div>
              <div class="col-md-6 col-xs-6">
                <p> Right side with col</p>
              </div>
            </div>
          </div>
          <div class="pull-left">
            <div class="pull-left">Left side with pull</div>
             <div class="pull-right">Right side with pull</div>
           </div>

        </li>
      </ul> 
    </div>
   </div>
   <div class="panel-body">Content here..</div>
</div>

<hr>
Harinder88
  • 284
  • 3
  • 5
  • 10
0

you can use pull-right for align div right and pull-left for align div on left side . if you want to do further partition you can use use same things again.

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <ul class="list-inline">
        <li class="col-xs-12">
          <div class="pull-right"> 
             <button class="btn btn-default">ON</button>
             <button class="btn btn-primary active">OFF</button>
          </div>
          <div class="pull-left">
             <h4>
              Fotter (you can use anything here button code or link tag , you can remove hr tag and use anything you want )
             </h4>
           </div>

        </li>
      </ul> 
    </div>
   </div>
   <div class="panel-body">Content here..</div>
</div>
Harinder88
  • 284
  • 3
  • 5
  • 10
  • Thanks for your time but you have just copy and pasted the code in the Bootply that I already linked to and also did not read the fact that I DON'T WANT BUTTONS in the footer. I want text items - one on the left and two on the right all aligned in the same row. – rmcsharry Sep 06 '16 at 00:29
0

I managed to figure this out by replacing the button groups and the buttons with spans, then it works fine. Everything aligned on one line, 1 item pulled left and 2 pulled right.

<div class="panel-footer">
    <div class="panel-title">
        <ul class="list-inline">
            <li class="col-xs-12">
                <span class="pull-right"> 
                    <span>Recording - Last updated at x</span>
                    <span class="trail-status">PUBLISHED</span>
                </span>
                <h5>x comments
                </h5>
            </li>
        </ul>   
    </div>
    <div class="clearfix">
    </div>        
</div>
rmcsharry
  • 5,363
  • 6
  • 65
  • 108