I'm trying to put my input-group inline with the text something like this:
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" >
<div >
<div _ngcontent-ken-c136="" > BACON 1,00 €
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-985">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-986"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" > STELLE FILANTI
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-988">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-989"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" > CAPPUCCINO
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-991">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-992"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" > CIOCCOLATA IN TAZZA
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-994">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-995"> </button></div>
</div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136="" type="button" 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" >
<div >
<div _ngcontent-off-c136="" >
<div _ngcontent-off-c136="" style="margin-right: auto;">BACON 1,00 €</div>
<div _ngcontent-off-c136="" >
<div _ngcontent-off-c136="" ><button _ngcontent-off-c136="" disabled="" control-id="ControlID-992">-</button><input _ngcontent-off-c136="" type="number" value="1" disabled="" control-id="ControlID-993"><button _ngcontent-off-c136=""
control-id="ControlID-994"> </button></div>
</div>
</div>
</div>
</div>CodePudding user response：
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 >
<div style="margin-right: auto;">
<div 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;" 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 >
<span 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" >
<div >
<div _ngcontent-ken-c136="" > BACON 1,00 €
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-985">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-986"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" > STELLE FILANTI
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-988">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-989"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" > CAPPUCCINO
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-991">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-992"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" > CIOCCOLATA IN TAZZA
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-994">
<div _ngcontent-ken-c136=""
><button _ngcontent-ken-c136="" control-id="ControlID-995"> </button></div>
</div>
</div>
<!-- Try doing this... Start-->
<div >
<div style="margin-right: auto;">
<div 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;" 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 >
<span 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" control-id="ControlID-996"> Step successivo </button>
<!--bindings={
"ng-reflect-ng-template-outlet": "[object Object]"
}-->
</div>
</div>
</body>
</html>CodePudding user response：
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" >
<div >
<div _ngcontent-ken-c136="" >
<div > BACON 1,00 €</div>
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-984">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-985">
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" control-id="ControlID-986"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" >
<div >STELLE FILANTI</div>
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-987">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-988">
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" control-id="ControlID-989"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" >
<div >CAPPUCCINO</div>
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-990">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-991">
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" control-id="ControlID-992"> </button></div>
</div>
</div>
<div _ngcontent-ken-c136="" >
<div >CIOCCOLATA IN TAZZA</div>
<div _ngcontent-ken-c136="" >
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" disabled="" control-id="ControlID-993">-</button></div><input _ngcontent-ken-c136="" type="number" disabled="" control-id="ControlID-994">
<div _ngcontent-ken-c136="" ><button _ngcontent-ken-c136="" control-id="ControlID-995"> </button></div>
</div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136="" type="button" control-id="ControlID-996"> Step successivo </button>
<!--bindings={
"ng-reflect-ng-template-outlet": "[object Object]"
}-->
</div>
</div>