CODEWITHSUNDEEP
htmlcssbootstrap-4
NiceToMytyuk
NiceToMytyuk

Reputation: 4277

How to place a input-group inline with the text?

I'm trying to put my input-group inline with the text something like this:

enter image description here

But instead the input-group is shown in a block, i've tried to put all in a grid by giving the text col-8 but i would expand the text as more as possible close to the input-group

Here is my code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="collapse show">
  <div class="card-body">
    <div _ngcontent-ken-c136="" class="form-group"> BACON +1,00&nbsp;€
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-985">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-986">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group"> STELLE FILANTI
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-988">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-989">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group"> CAPPUCCINO
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-991">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-992">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group"> CIOCCOLATA IN TAZZA
      <div _ngcontent-ken-c136="" class="input-group">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-994">
        <div _ngcontent-ken-c136=""
          class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-995">+</button></div>
      </div>
    </div>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3" control-id="ControlID-996"> Step successivo </button>
    <!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
  </div>
</div>

Thank to @AwatITWork here the final solution

.btn-circle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 6px 0px !important;
  border-radius: 15px !important;
  font-size: 8px !important;
  text-align: center !important;
}

.input-group .form-control {
  text-align: center !important;
}

.form-quantity-custom input {
  background: none !important;
  border: 0 !important;
  padding-top: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="ng-star-inserted collapse show">
  <div class="card-body">
    <div _ngcontent-off-c136="" class="row row-cols-2 mb-1 align-content-between ng-star-inserted">
      <div _ngcontent-off-c136="" class="col-7" style="margin-right: auto;">BACON +1,00&nbsp;€</div>
      <div _ngcontent-off-c136="" class="col-4">
        <div _ngcontent-off-c136="" class="input-group form-quantity-custom"><button _ngcontent-off-c136="" disabled="" class="btn btn-circle btn-outline-dark" control-id="ControlID-992">-</button><input _ngcontent-off-c136="" type="number" value="1" disabled="" class="form-control" control-id="ControlID-993"><button _ngcontent-off-c136=""
            class="btn btn-circle btn-success" control-id="ControlID-994">+</button></div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 455

Answers (2)

AwatITWork
AwatITWork

Reputation: 586

Well, I had a similar problem with my E-Commerce website, I have solved that with this, I am sure you understand it but let me explain what I have done, each card item has something like this, it increases or decreases and also a delete button for deleting the current item, each with a unique id.

hope it helps you too:

<div class="row row-cols-2 mb-1 align-content-between">
    <div class="col-7" style="margin-right: auto;">
        <div class="row text-center" style="min-width: 200px;">
            <div style="width: fit-content !important;border: 1px black solid; margin: 0px 20px 0px 20px;padding: 0px; border-radius: 5px;" >
                <span style="float: left; width: 15% !important; border-radius: 5px 0px 0px 5px;" role="button" id="1-qty-dec">-</span>
                <input style="width: 70% !important;" class="w-50 text-center numbersOnly" min="1" value="1" step="1" type="number" name="qty" id="row-1-qty" required>
                <span style="float: right; width: 15% !important; border-radius: 0px 5px 5px 0px;" role="button" id="1-qty-inc">+</span>
            </div>
        </div>
    </div>
    <div class="col-4">
        <span class="btn btn-danger" role="button"  style="float: right;padding-top: 0.1em;padding-bottom: 0.1em;">Delete</span>
    </div>
</div>

I will put that in your current template, so you can see it here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack19</title>
</head>
<body>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="collapse show">
    <div class="card-body">
        <div _ngcontent-ken-c136="" class="form-group"> BACON +1,00&nbsp;€
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-985">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-986">+</button></div>
            </div>
        </div>
        <div _ngcontent-ken-c136="" class="form-group"> STELLE FILANTI
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-988">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-989">+</button></div>
            </div>
        </div>
        <div _ngcontent-ken-c136="" class="form-group"> CAPPUCCINO
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-991">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-992">+</button></div>
            </div>
        </div>
        <div _ngcontent-ken-c136="" class="form-group"> CIOCCOLATA IN TAZZA
            <div _ngcontent-ken-c136="" class="input-group">
                <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-994">
                <div _ngcontent-ken-c136=""
                     class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-995">+</button></div>
            </div>
        </div>

<!--        Try doing this... Start-->
        <div class="row row-cols-2 mb-1 align-content-between">
            <div class="col-7" style="margin-right: auto;">
                <div class="row text-center" style="min-width: 200px;">
                    <div style="width: fit-content !important;border: 1px black solid; margin: 0px 20px 0px 20px;padding: 0px; border-radius: 5px;" >
                        <span style="float: left; width: 15% !important; border-radius: 5px 0px 0px 5px;" role="button" id="1-qty-dec">-</span>
                        <input style="width: 70% !important;" class="w-50 text-center numbersOnly" min="1" value="1" step="1" type="number" name="qty" id="row-1-qty" required>
                        <span style="float: right; width: 15% !important; border-radius: 0px 5px 5px 0px;" role="button" id="1-qty-inc">+</span>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <span class="btn btn-danger" role="button"  style="float: right;padding-top: 0.1em;padding-bottom: 0.1em;">Delete</span>
            </div>
        </div>
        <!--        Try doing this... END-->
        
        
        <!--bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object"
    }--><button _ngcontent-ken-c136="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3" control-id="ControlID-996"> Step successivo </button>
        <!--bindings={
      "ng-reflect-ng-template-outlet": "[object Object]"
    }-->
    </div>
</div>

</body>
</html>

Upvotes: 1

Zach Jensz
Zach Jensz

Reputation: 4063

I don't know much bootstrap but hopefully this will help you:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div role="tabpanel" id="panel-1" aria-labelledby="panel-1-header" class="collapse show">
  <div class="card-body">
    <div _ngcontent-ken-c136="" class="form-group row">
      <div class="col"> BACON +1,00&nbsp;€</div>
      <div _ngcontent-ken-c136="" class="input-group col sm">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-985">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-986">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group row">
    <div class="col">STELLE FILANTI</div>
      <div _ngcontent-ken-c136="" class="input-group col">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-988">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-989">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group row">
    <div class="col">CAPPUCCINO</div>
      <div _ngcontent-ken-c136="" class="input-group col">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-991">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-992">+</button></div>
      </div>
    </div>
    <div _ngcontent-ken-c136="" class="form-group row">
    <div class="col">CIOCCOLATA IN TAZZA</div>
      <div _ngcontent-ken-c136="" class="input-group col">
        <div _ngcontent-ken-c136="" class="input-group-prepend"><button _ngcontent-ken-c136="" disabled="" class="btn btn-outline-dark" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" class="form-control" control-id="ControlID-994">
        <div _ngcontent-ken-c136="" class="input-group-append"><button _ngcontent-ken-c136="" class="btn btn-success" control-id="ControlID-995">+</button></div>
      </div>
    </div>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3" control-id="ControlID-996"> Step successivo </button>
    <!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
  </div>
</div>

Upvotes: 0

Related Questions