Can't allign input fields with bootstrap

Question

I don't know how to resize the left box to be at the width of its placeholder.

Roughly size wise I want it to look something like this:

.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>

score 1 · Accepted Answer · answered Dec 03 '19 at 19:35

1

This is it:

   <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" 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>

check https://jsfiddle.net/sugandhnikhil/ba5jhosn/1/

answered Dec 03 '19 at 19:35

Nikhil S

3,786
4
18
32

This is NOT it. The question is marked bootstrap 4 and you have used bootstrap 3 in your fiddle. There are no -xs tags in bootstrap 4. They have been replaced. Please check my answer below. – Dimitrios Matanis Dec 04 '19 at 09:18
No it isn't. Your col-xs-6 class does nothing. Remove it in your fiddle and you will see there is no change. The -xs-* classes have been replaced with col-* – Dimitrios Matanis Dec 04 '19 at 09:21
Also please provide some explanation about what the problem was and what you fixed in your answer. – Dimitrios Matanis Dec 04 '19 at 09:25
You have added size="3" on the first input. That's not using bootstrap's grid – Dimitrios Matanis Dec 04 '19 at 10:09

Dimitrios Matanis · Answer 2 · 2019-12-04T11:53:12.193

0

Your HTML tags are a little bit wrong. The 2nd col div closes right away instead of going around the 2nd input.

I have changed your fiddle a little bit with proper tag alignment and I've used col-3 on the first input and just col for the 2nd to take up the remaining grid space. Going col-2 on the first will make it even smaller. Remember there are a total of 12 columns in bootstrap's grid!

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%;
}

Here is a link to bootstap's grid documentation https://getbootstrap.com/docs/4.0/layout/grid/

edited Dec 04 '19 at 11:53

answered Dec 03 '19 at 15:51

Dimitrios Matanis

896
1
6
19

Thank you.That was my oversight. When removed as seen in the fiddle the fields are connected. I want them to be separated. If you add
on the first div I will get them as I want but then the left div needs to be resized.
– FlipFlop17 Dec 03 '19 at 17:45
Not sure what you mean. If you click on my fiddle, the fields ARE separated. There is space between them. What are you trying to achieve with -xs ? The XS tags have been dropped in bootstrap 4. Please have a read at the documentation link I provided. Also please have a look at this explaining the change: https://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4 – Dimitrios Matanis Dec 04 '19 at 09:14
This is incorrect totally sizes of smaller box is changing on window resize – Nikhil S Dec 04 '19 at 09:27
He said he wants it for a small screen (xs), not a large one. I've updated my fiddle to work on all screensizes, with bootstrap, even if he was just trying to do it for small screens. – Dimitrios Matanis Dec 04 '19 at 10:23

Can't allign input fields with bootstrap

2 Answers2