Struggling to align input fields using Bootstrap

Question

Struggling to align input fields using Bootstrap

I am struggling to adjust the width of the left box to match its placeholder.

Ideally, I want it to resemble something like this:

https://i.sstatic.net/wHidy.png

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

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

<div class="container">
  <label for="phonNum"> Please enter phone Number</label>
  <div class="row text-left">
    <div class="form-group form-inline" show-errors>
      <div class="col-xs-6">
        <input type="text" class="form-control" maxlength=3 name="phoneInt" placeholder="000" ng-model="client.phoneIn">
      </div>
      <div class="col"></div>
      <input type="text" class="form-control" maxlength=10 name="phone" placeholder="670125" ng-model="client.phone">
    </div>
  </div>

</div>

html css bootstrap-4

Answer 1

Answer №1

Here is the code snippet for entering phone numbers:

   <div class="container">
        <label for="phonNum"> Please input your phone number:</label>
        <div class="row text-left">
            <div class="form-group form-inline" show-errors>
                <div class="col-xs-6">
                    <input type="text" class="form-control" maxlength=3 name="phoneInt" size="3" placeholder="000"
                        ng-model="client.phoneIn">
                </div>
                <div class="col">
                    <input type="text" class="form-control" maxlength=10 name="phone" placeholder="1234567891"
                        ng-model="client.phone">
                </div>
            </div>
        </div>

For a live demo, visit https://jsfiddle.net/sugandhnikhil/ba5jhosn/1/

Answer 2

Here is the code snippet for entering phone numbers:

   <div class="container">
        <label for="phonNum"> Please input your phone number:</label>
        <div class="row text-left">
            <div class="form-group form-inline" show-errors>
                <div class="col-xs-6">
                    <input type="text" class="form-control" maxlength=3 name="phoneInt" size="3" placeholder="000"
                        ng-model="client.phoneIn">
                </div>
                <div class="col">
                    <input type="text" class="form-control" maxlength=10 name="phone" placeholder="1234567891"
                        ng-model="client.phone">
                </div>
            </div>
        </div>

For a live demo, visit https://jsfiddle.net/sugandhnikhil/ba5jhosn/1/

Answer 3

Answer №2

It seems like your HTML tags may need a little adjustment. The second column div is closing right away instead of wrapping around the second input.

To fix this, I have made some changes to your code by aligning the tags properly. I used 'col-3' for the first input and just 'col' for the second one to occupy the remaining grid space. Choosing 'col-2' for the first input would make it even smaller. Remember, Bootstrap's grid system consists of a total of 12 columns!

You can view the updated fiddle here: https://jsfiddle.net/mtx2nu0y/

HTML

<div class="container">
<label for="phonNum"> Please enter phone Number</label>
  <div class="row text-left" >
    <div class="form-group form-inline" show-errors>
      <div class="col-3">
        <input type="text" id="phoneInt" class="form-control" maxlength=3 name="phoneInt" placeholder="000" ng-model="client.phoneIn">
      </div>
      <div class="col">
        <input type="text" id="phone" class="form-control" maxlength=10 name="phone" placeholder="1234567891" ng-model="client.phone">
      </div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#phoneInt, #phone {
  width: 100%;
}

For more information on Bootstrap's grid system, you can visit their documentation here.

Answer 4

It seems like your HTML tags may need a little adjustment. The second column div is closing right away instead of wrapping around the second input.

To fix this, I have made some changes to your code by aligning the tags properly. I used 'col-3' for the first input and just 'col' for the second one to occupy the remaining grid space. Choosing 'col-2' for the first input would make it even smaller. Remember, Bootstrap's grid system consists of a total of 12 columns!

You can view the updated fiddle here: https://jsfiddle.net/mtx2nu0y/

HTML

<div class="container">
<label for="phonNum"> Please enter phone Number</label>
  <div class="row text-left" >
    <div class="form-group form-inline" show-errors>
      <div class="col-3">
        <input type="text" id="phoneInt" class="form-control" maxlength=3 name="phoneInt" placeholder="000" ng-model="client.phoneIn">
      </div>
      <div class="col">
        <input type="text" id="phone" class="form-control" maxlength=10 name="phone" placeholder="1234567891" ng-model="client.phone">
      </div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#phoneInt, #phone {
  width: 100%;
}

For more information on Bootstrap's grid system, you can visit their documentation here.

Struggling to align input fields using Bootstrap

Answer №1

Answer №2

Similar questions

Incorrect Alignment of CSS Menu Popout

Placing text alongside an image at the top of the page

"Disappearing act: Navigating through pages causes the navigation

Navigate through the seamless elements with scroll snapping

The Remote_Host index is not visible

Overlap one element entirely with another

Conceal and Reveal Navigation Bar

Click the button to dynamically add a Bootstrap select element

Attempting to implement bootstrap pagination using PHP mysqli

Issue with background/hero video not adjusting its size

Mobile-style menu with full desktop height

Guide to quickly redirecting all 404 links to the homepage on a simple HTML website

Switch from monochrome to color when hovering inside a clipping mask

Jquery form calculation not matching up

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

Customizing Material UI - Overrides in MakeStyles

Set the webpage to a fixed width

Functionality of the copy button

Bootstrap dropdown menu with Javascript List group

The bootstrap 4 modal is not displaying the button as expected