labesl and input field next to each other not responsive in bootstrap i get problem in responsive ,
label and input field need to responsive when screen size small next to each other .
that mean label name should be above input filed .
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-3 py-4">
<div class="row">
<div class="col-lg-8">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<label class="col-sm-3 col-form-label">Price:</label>
<input type="number" class="form-control col-sm-10" >
<div class="input-group-append">
<span class="input-group-text">USD</span>
</div>
</div>
<div class="input-group mb-3 ">
<label class="col-sm-3 col-form-label">Amount:</label>
<input type="number" class="form-control col-sm-10" >
<div class="input-group-append">
<span class="input-group-text">BTC</span>
</div>
</div>
<div class="input-group mb-3 ">
<label class="col-sm-3 col-form-label">Total:</label>
<input type="number" class="form-control col-sm-10">
<div class="input-group-append">
<span class="input-group-text">USD</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
</div>
</div>
</div>
</main>
i tried but not success ,why
use
<div class="input-group mb-3">
<label class="col-3 -----USE THIS-->col-lg-3 col-md-3 col-sm-3
form-group col-form-label">Price:</label>
<br>
<input type="number" class="form-control col-sm-10" >
<div class="input-group-append">
<span class="input-group-text">USD</span>
</div>
</div>
<br>
@LoverToHelp still not success
<div class="input-group mb-3">
<label class="col-lg-3 col-md-3 col-sm-3 form-group col-form-label">Price:</label>
<input type="number" class="form-control col-sm-10" >
<div class="input-group-append">
<span class="input-group-text">USD</span>
</div>
</div>
@zwarkyaw here I made it for you.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="">Price</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
</div>
Which bootstrap version do you use?
@shaungbhone when i change screen size , label need to move above input field
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-3 py-4">
<div class="row">
<div class="col-lg-8">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<label class="col-sm-3 col-form-label">Price:</label>
<input type="number" class="form-control col-sm-10" >
<div class="input-group-append">
<span class="input-group-text">USD</span>
</div>
</div>
<div class="input-group mb-3 ">
<label class="col-sm-3 col-form-label">Amount:</label>
<input type="number" class="form-control col-sm-10" >
<div class="input-group-append">
<span class="input-group-text">BTC</span>
</div>
</div>
<div class="input-group mb-3 ">
<label class="col-sm-3 col-form-label">Total:</label>
<input type="number" class="form-control col-sm-10">
<div class="input-group-append">
<span class="input-group-text">USD</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
</div>
</div>
</div>
</main>
what wrong in my code
Please sign in or create an account to participate in this conversation.
