CODEWITHSUNDEEP
htmlcssformsbootstrap-4
Alok
Alok

Reputation: 9008

Aligning form component using Bootstrap4

I'm making a form with help of bootstrap4 and it has to be like this :

Form

Since I have already done my homework reading by reading the content from Bootstrap4. And tried my level best to make the form like this but after all this, I'm not getting the desired result. I have used the for achieving the result but no luck.

This is the code which I have tried so far :

Mypage.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
   <form>
    <div class="form-group row">
      <label for="inputPhone" class="col-sm-2 col-form-label">Phone</label>
      <div class="col-sm-10">
        <input type="number" class="form-control box" id="inputPhone" placeholder="Phone Number">
      </div>
    </div>


    <div class="form-inline">
      <label class="mr-sm-2">Bio</label>
      <div class="circle">i</div>

      <label for="inputBio" class="mr-sm-2"></label>
      <div class="col">
        <textarea class="form-control bio-text" id="inputBio" rows="3" placeholder="Your Bio"></textarea>
      </div>
    </div>
   </form>
 </div>

CSS Code

.form-container { max-width: 449px }
.box { margin-left: 82px }

.bio-text { height: 91px; margin-left: 28px }

input[type="number"] {border: 2px solid #b1b1b1; padding: .55rem .75rem} 
textarea {border: 2px solid #b1b1b1; padding: .55rem .75rem}

.circle { width: 22px; height: 22px; border-radius: 50%; color: white;
       line-height: 20px; text-align: center; background: rgb(162, 197, 252); margin-left: 50px}

This is the link to my code where I have tried this : JSFiddle code for the form

I have also taken the screenshot from my browser which looks like this :

enter image description here

Any help would be highly appreciated. Please consider me as a learner since I'm new to the web and moreover new to bootstrap4. Thanks

Upvotes: 0

Views: 116

Answers (3)

Carlene
Carlene

Reputation: 357

Working from your example in fiddle I have managed to line up the form as you specified shown here ... https://jsfiddle.net/x8wmhfL9/4/

Changes I made were as follows:

  • To begin with I removed margins that were throwing things of such as the box class
  • Where ever you used mr-sm- I used col-sm- (I am not sure is mr-sm- is a typo or if it is a class I am un aware of, but I do know col-sm- should do what you want)
  • I used form-group instead of form-inline because I found I could inline your info icon simply by adding display: inline-block; to the circle class.
  • I placed a class around the Bio text and the info icon to help line them up to the phone label width
  • I changed col-sm-2 to col-sm-3 and col-sm-10 to col-sm-9, simply because this worked better at the resolutions I was working at, but you may find your original column size work best for you.

I hope this was helpful and that I have explained my changes well enough for you to understand why I made those decisions.

.form-container {
  max-width: 449px
}

.bio-text {
  height: 91px;
}

input[type="number"] {
  border: 2px solid #b1b1b1;
  padding: .55rem .75rem
}

textarea {
  border: 2px solid #b1b1b1;
  padding: .55rem .75rem
}

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  line-height: 20px;
  text-align: center;
  background: rgb(162, 197, 252);
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
  <form>
    <div class="form-group row">
      <label for="inputPhone" class="col-sm-3 col-form-label">Phone</label>
      <div class="col-sm-9">
        <input type="number" class="form-control" id="inputPhone" placeholder="Phone Number">
      </div>
    </div>


    <div class="form-group row">
      <div class="col-sm-3">
        <label class="">Bio</label>
        <div class="circle">i</div>
      </div>


      <div class="col-sm-9">
        <textarea class="form-control bio-text" id="inputBio" rows="3" placeholder="Your Bio"></textarea>
      </div>

    </div>
  </form>
</div>

Upvotes: 1

Manoj Mohan
Manoj Mohan

Reputation: 662

Just see the jsfiddle link.

Adding col-sm-2 in the label bio will solve the issue. Also remove unnecessary label field like inputBio and class like mr-sm-2 from the label and textarea.

Upvotes: 0

Yashwanth M
Yashwanth M

Reputation: 456

Made some minor changes in layout. Seems the output is as you needed. :)

.form-container { max-width: 449px }
.box { margin-left: 82px }

.bio-text { height: 91px; margin-left: 85px;}

input[type="number"] {border: 2px solid #b1b1b1; padding: .55rem .75rem} 
textarea {border: 2px solid #b1b1b1; padding: .55rem .75rem}

.circle { width: 22px; height: 22px; border-radius: 50%; color: white;
           line-height: 20px; text-align: center; background: rgb(162, 197, 252); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
<form>
        <div class="form-group row">
        <div class="col-sm-2 col-form-label">
        <label for="inputPhone" >Phone</label>
        </div>
          <div class="col-sm-1">
          
          </div>
          <div class="col-sm-9">
            <input type="number" class="form-control " id="inputPhone" placeholder="Phone Number">
          </div>
        </div>
        
        
        <div class="form-group row">
          <div class="col-sm-2">
          <label >Bio</label>
          
          </div>
          <div class="col-sm-1">
          <div class="circle">i</div>
          <label for="inputBio" ></label>
          </div>
          <div class="col-sm-9">
          
            <textarea class="form-control " id="inputBio" rows="3" placeholder="Your Bio"></textarea>
          </div>
        </div>
        </form>
        </div>

Upvotes: 2

Related Questions