Photoshop Question posted in
The official user guide can be found here.

Combine a button and a progress bar, inline, inside grid element – Photoshop

I’m learning Bootstrap. I have a simple grid view divided into two as follows:

<div class="row">
    <div class="col-md-6">cell 1</div>
    <div class="col-md-6">cell 2</div>
</div>

I’d like to place a button and a progress bar into cell 2, while keeping them inline. I’ve started with the following:

<div class="row">
    <div class="col-md-6">cell 1</div>
    <div class="col-md-6">
        <button type="button" class="btn btn-primary">Primary</button>
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                <span class="sr-only">45% Complete</span>
            </div>
        </div>
    </div>
</div>

The button and progress bar appear, but wrapped rather than inline

enter image description here

where as I’d like to get (with the help of a little Photoshop) to this

enter image description here

I’m not sure how to progress, can you help?
Many thanks.

Tags:

2

Answers


  1. 0

    IF you add another restriction on width for the button and progress bar you should have it.

    <div class="row">
    <div class="col-md-6">cell 1</div>
    <div class="col-md-6">
        <div class="col-xs-2">
            <button type="button" class="btn btn-primary">Primary</button>
        </div>
        <div class="col-xs-10">
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                    <span class="sr-only">45% Complete</span>
                </div>
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You can use this solution:

    http://jsfiddle.net/nxxw0obk/1/

    <div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">cell 1</div>
        <div class="col-xs-6">
            <button type="button" class="btn btn-primary">Primary</button>
            <div class="progress progressbar-container">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                <span class="sr-only">45% Complete</span>
            </div>
        </div>
    </div>
</div>


    .progressbar-container{
  display: inline-block;
  width: 100px;
  margin: 0;
  position: relative;
  top: 5px;
}

    (P.S. I’ve used xs- classes because I have a small screen)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search