CODEWITHSUNDEEP
twitter-bootstrap-3alignment
opensas
opensas

Reputation: 63415

bootstrap 3, align label + input to left on small viewport without jumping to a new line

I'm working with bootstrap 3.3.7, and I have a simple combo with a label, which I want to be left aligned and on the same row.

But when the viewport goes smaller than 768 it goes to the next row, even though it has a lot of space, like this:

Here's on a 770 viewport (and I'd like to keep it this way on smaller screens)

enter image description here

And here, on a 764 viewport, the select input goes down, even though it has a lot of space

enter image description here

Here's a live example: https://www.codeply.com/go/npDT2mmYEP

I see on bootstrap's documentation the following:

Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

So how can I fix this, I just want to keep the <p> with the "Ver" text right beside the <select> combo even on smaller devices...

Upvotes: 0

Views: 253

Answers (2)

Sai Manoj
Sai Manoj

Reputation: 3849

You can use Bootstrap 3 grid col-xs-** and you can adjust them as per your requirment

    .fix-pagination .pagination {
      margin-top: -20px;
      margin-bottom: -20px;
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
  <div class="row fix-pagination">
    <div class="pull-left">
      <p class="col-xs-3 form-control-static red">Ver:</p>
      <p class="col-xs-9" style="padding-left:0px">
        <select class=" form-control repsal-rows-per-page-select">
          <option>20 registros</option>
          <option>50 registros</option>
          <option>100 registros</option>
          <option>500 registros</option>
        </select>
      </p>
    </div>
    <div class="pull-right green">
      <nav class="pull-right" aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

</div>
<!-- /container -->

Upvotes: 1

opensas
opensas

Reputation: 63415

So far now, I could solve it like this:

.form-inline .form-control,
.form-inline .form-control-static {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

and this is the html

<div class="pull-left">
  <div class="form-inline pull-left">
      <p class="form-control-static">Ver:</p>
      <select class="form-control">
        <option>20 filas</option>
        <option>50 filas</option>
        <option>100 filas</option>
        <option>500 filas</option>
      </select>
    </div>
</div>

But I'm not sure if this is the best solution

Upvotes: 0

Related Questions