The bootstrap form label and input are displayed on one line

Time:2021-7-30

The bootstrap version used in this article is 4.4.1

1. Use form inline

<form action="">
    <div class="form-group">
        <div class="form-inline">
            < label class = "mb-2" > specification value: < / label >
            < input class = "form control MR-2 mb-2" type = "text" placeholder = "e.g. white" / >
            < input class = "form control MR-2 mb-2" type = "text" placeholder = "e.g. black" / >
            < button type = "button" class = "BTN BTN link mb-2" > + add specification value < / button >
        </div>
    </div>
</form>

2. Use grid layout

Note: the. Col XS prefix in bootrap4 has been deleted. If you need to set a layout < 576px, you need to use. Col-

<form action="">
    <div class="form-group row">
        < label for = "title" class = "col-md-2 col-sm-3 col-4 col form label text right" > < span class = "text danger" > * < / span > Product Name < / label >
        <div class="col-sm-8 col-8">
            < input type = "text" class = "form control" id = "title" name = "title" placeholder = "please enter" >
            < div class = "invalid feedback" > please enter the product name < / div >
        </div>
    </div>
    <div class="form-group row">
        < label for = "subtitle" class = "col-md-2 col-sm-3 col-4 col-form-label text right" > < span class = "text danger" > * < / span > subtitle < / label >
        <div class="col-sm-8 col-8">
            < input type = "text" class = "form control" id = "subtitle" name = "subtitle" placeholder = "please enter" >
            < div class = "invalid feedback" > please enter the subtitle < / div >
        </div>
    </div>
    <div class="form-group row">
        < label for = "price" class = "col-md-2 col-sm-3 col-4 col-form-label text right" > < span class = "text danger" > * < / span > price < / label >
        <div class="col-sm-8 col-8">
            < input type = "text" class = "form control" id = "price" name = "price" placeholder = "please enter" >
            < div class = "invalid feedback" > please enter the price < / div >
        </div>
    </div>
</form>

3. Using grid layout, input automatically occupies the remaining space

<form>
    <div class="form-row">
        <div class="col-lg-3 col-sm-6 mb-2 input-group">
            < label for = "" class = "col form label" > Product Name: < / label >
            < input type = "text" class = "form control" placeholder = "please enter" >
        </div>
        <div class="col-lg-3 col-sm-6 mb-2 input-group">
            < label class = "col form label" > item No.: < / label >
            < input type = "text" class = "form control" placeholder = "please enter" >
        </div>
        <div class="col-lg-3 col-sm-6 mb-2 input-group">
            < label class = "col form label" > product label: < / label >
            < input type = "text" class = "form control" placeholder = "please enter" >
        </div>
        <div class="col-lg-3 col-sm-6 mb-2">
            < button type = "submit" class = "BTN BTN primary mb-2" > query < / button >
            < button type = "reset" class = "BTN border mb-2" > Reset < / button >
        </div>
    </div>
</form>