CODEWITHSUNDEEP
bootstrap-5
InFlames82
InFlames82

Reputation: 513

Bootstrap input group and button in one row

I try to create an input group and some buttons next to the input group, but the buttons always switch to a new line. Can anyone help me please?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container-fluid bg-dark">
    <div class="row">
      <div class="col">
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="col">
        <div class="input-group flex-nowrap">
          <button class="btn btn-primary btn-lg" id="previous"> - </button>
          <input type="text" class="form-control text-center" id="pageNumber" value="1">
          <button class="btn btn-primary btn-lg" id="next"> + </button>
        </div>
        <button class="btn btn-primary btn-lg" id="zoomIn">x</button>
      </div>
    </div>
  </div>

Upvotes: 2

Views: 1951

Answers (3)

Sathish
Sathish

Reputation: 69

Place the button inside your div, it will solve your problem.

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container-fluid bg-dark">
        <div class="row">
            <div class="col">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="col">
                <div class="input-group flex-nowrap">
                    <button class="btn btn-primary btn-lg" id="previous"> - </button>
                    <input type="text" class="form-control text-center" id="pageNumber" value="1" style="height:auto">
                    <button class="btn btn-primary btn-lg" id="next"> + </button>
                    <button class="btn btn-primary btn-lg pull-right" id="zoomIn">x</button>
                </div>
               
            </div>
        </div>
    </div>

Upvotes: 0

Richard
Richard

Reputation: 41190

Try .col-auto so that your columns only take up as much space as needed

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  input#number-of-orders {
    max-width: 70px;
  }
</style>
<div class="row">
  <div class="col-auto">
    <div class="input-group">
      <div class="input-group-text">Number of orders</div>
      <input type="number" class="form-control" id="number-of-orders" value="5">
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Upvotes: 1

Arleigh Hix
Arleigh Hix

Reputation: 10877

Just apply .d-flex & .flex-nowrap to the parent .col. This will cause the width of the .input-group to be adjusted to accommodate the button on the same line.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid bg-dark">
  <div class="row">
    <div class="col">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="col d-flex flex-nowrap">
      <div class="input-group">
        <button class="btn btn-primary btn-lg" id="previous"> - </button>
        <input type="text" class="form-control text-center" id="pageNumber" value="1">
        <button class="btn btn-primary btn-lg" id="next"> + </button>
      </div>
      <button class="btn btn-primary btn-lg" id="zoomIn">x</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Upvotes: 2

Related Questions