CODEWITHSUNDEEP
htmlcssbootstrap-4
Maria
Maria

Reputation: 121

bootstrap 4 forms inline

How to make this form using standard bootstrap 4.3 tools?
enter image description here

This is what I could do. But unsuccessfully.

                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Цена начальная</label>
                        <input type="text" class="form-control" placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>
                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Цена текущая</label>
                        <input type="text" class="form-control" placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>

but i get this

enter image description here

Upvotes: 0

Views: 67

Answers (2)

RR1112
RR1112

Reputation: 232

The answer provided by previous post works only for given labels, if the label size increases or decreases it gets misaligned. Also its good practice to use row and col in order to avoid unexpected results when used randomly. A form-inline class will append items one after other in single line so it will have no idea of length and justification of items in next line. So it works better in cases where you have inline forms. A better approach in this case would be grid layout using row and col. It also gives responsiveness based on device size if that's something that you might want. Please see below code snippet and also a link to codepen for the same.

https://codepen.io/R1112/pen/LYPvXyg

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row m-3">
  <div class="col-12 m-3">
    <div class="row">
      <div class="col-3"><label for="trade_number" class="float-left">Цена начальная</label></div>
      <div class="col-4"><input type="text" class="form-control" placeholder="От"></div>
      <div class="col-1">
        <div class="align-middle">-</div>
      </div>
      <div class="col-4"><input type="text" class="form-control" placeholder="До"></div>
    </div>
  </div>
  <div class="col-12 m-3">
    <div class="row">
      <div class="col-3"><label for="trade_number" class="float-left">Цена текущая</label></div>
      <div class="col-4"><input type="text" class="form-control" placeholder="От"></div>
      <div class="col-1">
        <div class="text align-middle">-</div>
      </div>
      <div class="col-4"><input type="text" class="form-control" placeholder="До"></div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can try this.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-12 mb-3 form-inline">
                    <div class="form-group row">
                        <label for="trade_number" class="mr-2 col-mb-4">Цена начальная</label>
                        <input type="text" class="form-control " placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>
                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Цена текущая</label>
                        <input type="text" class="form-control" placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>

Upvotes: 0

Related Questions