CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapbootstrap-4
Milind
Milind

Reputation: 1955

Bootstrap 4 Grid Layout with Form

I am making simple form and control side by side with full width control but it is not working and if I put col-sm-xx than it will break and to another line. So how can I make them in one line with full column width 

<div class="container-fluid">
    <div class="row align-items-center">
                <div class="col">
                    <div class="dropdown" id="dpLocation">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            Location
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item">Sharq</a>
                            <a class="dropdown-item">Shuwaikh</a>
                            <a class="dropdown-item">Hawally</a>
                            <a class="dropdown-item">Farwaniya</a>
                            <a class="dropdown-item">Hawally</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
                </div>
                <div class="col">
                    <a>
                        <i class="fa fa-arrow-circle-right" style="font-size:24px;color:#fff"></i>
                    </a>
                </div>
        </div>
</div>

enter image description here

Upvotes: 1

Views: 1053

Answers (2)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

Try the following snippet 

.items{
  margin-right: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-sm-4 items">
      <div class="dropdown" id="dpLocation">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            Location
                        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item">Sharq</a>
          <a class="dropdown-item">Shuwaikh</a>
          <a class="dropdown-item">Hawally</a>
          <a class="dropdown-item">Farwaniya</a>
          <a class="dropdown-item">Hawally</a>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
    </div>
    <div class="col-sm-4">
      <a>
        <i class="fa fa-arrow-circle-right" style="font-size:24px;color:#fff"></i>
      </a>
    </div>
  </div>
</div>

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362440

You should use col-auto to minimize the width of the dropdown button and icon, and then col to make the input fill width...

https://www.codeply.com/go/hJcCGGUnpC

<div class="container-fluid">
    <div class="row no-gutters align-items-center">
        <div class="col-auto">
            <div class="dropdown" id="dpLocation">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Location
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">Sharq</a>
                    <a class="dropdown-item">Shuwaikh</a>
                    <a class="dropdown-item">Hawally</a>
                    <a class="dropdown-item">Farwaniya</a>
                    <a class="dropdown-item">Hawally</a>
                </div>
            </div>
        </div>
        <div class="col">
            <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
        </div>
        <div class="col-auto">
            <a>
                <i class="fa fa-arrow-circle-right" style="font-size:24px;"></i>
            </a>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions