Twitter Bootstrap Question posted in

CSS – Issues when aligning the paragraph-Twitter bootstrap

Hi i have used two textbox. one is for showing the country code another one is for getting mobile number and here i want to show a message below the Phone number field. but it starts appearing from country code. so i want to show the message form starting of the business phone tet box. Please help me. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="phone-verify-two">
  <h4>Update your main business phone</h4>
  <div class="form-group">
    <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
    <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[+]d{2}[(]d{2}[)]d{4}[-]d{4}" placeholder="Main Business Phone" required="required" type="tel">
  </div>
  <p class="clr-red">Don't add your country code or international dialing code here.</p>
</div>
Tags:

3

Answers


  1. 0

    Add separate columns for getting country code and phone number 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
        <div class="phone-verify-two">
          <h4>Update your main business phone</h4>
          <div class="form-group">
           <div class="col-md-3">
            <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
           </div>
           <div class="col-md-9">
            <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[+]d{2}[(]d{2}[)]d{4}[-]d{4}" placeholder="Main Business Phone" required="required" type="tel">
            <p class="clr-red">Don't add your country code or international dialing code here.</p>
          </div>
        </div>
    </div>
    Login or Signup to reply.
  2. 0

    just add this CSS in your code .clr-red{margin-left:13%}

    Login or Signup to reply.
  3. 0

    Set your CSS position to absolute and adjust the left attribute till you’re happy.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="phone-verify-two">
  <h4>Update your main business phone</h4>
  <div class="form-group">
    <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
    <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[+]d{2}[(]d{2}[)]d{4}[-]d{4}" placeholder="Main Business Phone" required="required" type="tel">
  </div>
<style>
div.absolute {
position: absolute;
left: 125px;
}
</style>
  <div class="absolute">    <p class="clr-red">Don't add your country code or international dialing code here.</p>
</div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search