title: how to adjust bootstrap tabs according to our contents in existing page?
body: <p>i have created a "registration and login" modal to give the functionality like flipcart.com . I am using bootstrap 'nav nav-tabs' to show the 2 tabs .</p>
  
  <p>When i create that modal in a separate file it works fine, like image shown bellow:</p>
  
  <p><img src="https://i.stack.imgur.com/VLDCm.png" alt="enter image description here"></p>
  
  <p>But when i put the same code of this modal into my existing project file it changes its look like in image shown bellow:</p>
  
  <p><img src="https://i.stack.imgur.com/caX9m.png" alt="enter image description here"></p>
  
  <p>Here is code for this modal:</p>
  
  <pre><code>                              &lt;!-- Modal --&gt;
    &lt;div class="modal reg_modal" id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &gt;
      &lt;div class="modal-dialog" id="reg_outer_div"  &gt;
        &lt;div class="modal-content" style="background: white;"&gt;
          &lt;div class="modal-header" id ="reg_modal_header" style=""&gt;
            &lt;button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title" align="center" style="color:white;"&gt;Register Now&lt;/h4&gt;
          &lt;/div&gt;&lt;!--/header--&gt;
          &lt;div class="modal-body" style="background: white;"&gt;
              &lt;div class="row" style="height:;background:white;"&gt;
  
                  &lt;div class="col-lg-8" style=" border-right:1px dotted black;"&gt;
                  &lt;div id ="reg_body_inner_left" style=""" &gt; 
                                                              &lt;div class="tabbable"&gt;
                                                                &lt;ul class="nav nav-tabs"&gt;
                                                                  &lt;li class="active"&gt;&lt;a href="#pane_login" data-toggle="tab"&gt;Login&lt;/a&gt;&lt;/li&gt;
                                                                  &lt;li&gt;&lt;a href="#pane_reg" data-toggle="tab"&gt;Registration&lt;/a&gt;&lt;/li&gt;
  
                                                                &lt;/ul&gt;
                                                                &lt;div class="tab-content"&gt;
                                                                   &lt;div id="pane_login" class="tab-pane active"&gt;
                                                                       &lt;form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form"&gt;
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;div class="unit size1of4 lf lbl"&gt;
                                                                                      &lt;label for="login_email_id" class="fk-label" style=""&gt;Email&lt;/label&gt;
                                                                                  &lt;/div&gt;
  
                                                                                  &lt;div class="unit size3of4 lastUnit rt"&gt;
                                                                                      &lt;input type="text" class="fk-input form-control" name="email" autocomplete="on" id="login_email_id" 
                                                                                      placeholder ="Your E-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your E-mail'"&gt;
  
                                                                                   &lt;/div&gt;
                                                                              &lt;/div&gt;
  
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;div class="unit size1of4 lf lbl"&gt;
                                                                                      &lt;label for="login_password" class="fk-label"&gt;Password&lt;/label&gt;
                                                                                  &lt;/div&gt;
  
                                                                                  &lt;div class="unit size3of4 lastUnit rt"&gt;
                                                                                      &lt;input type="password" class="fk-input form-control" name="password" id="login_password" 
                                                                                      onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'" placeholder="Password"&gt;
                                                                                      &lt;input type="hidden" name="password_hash" id="login_password_hash"&gt;
                                                                                  &lt;/div&gt;
                                                                              &lt;/div&gt;
  
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;center&gt;
                                                                                  &lt;div class="lastUnit size3of4"&gt;
                                                                                  &lt;input type="hidden" name="__FK" value="V2572135e576087a5881915c1283b7afbcd1t18eX5IEBZKdt4uNhR3jhexbEaRIFCpOF9vZskYd3zsqf3SAP283BjliKf7NmRzwKcRY2EmOyZkpoQ1oT1nS69zyA=="&gt;
                                                                                  &lt;button type="button" class="btn btn-primary btn-small" style="border-radius:0px;margin-right:10px;"&gt;Log In&lt;/button&gt;
                                                                                  &lt;a class="frgt-pswd" id="login_forgot" href="javascript:;"&gt;Forgot your password?&lt;/a&gt;
                                                                                                      &lt;/div&gt;&lt;/center&gt;
                                                                              &lt;/div&gt;
                                                                                              &lt;!-- &lt;div class="line"&gt;
                                                                                      Don't have an account? &lt;a class="signup-button" href="javascript:;"&gt;Create One!&lt;/a&gt;
                                                                                  &lt;/div&gt; --&gt;
                                                                             &lt;/form&gt;
  
                                                                  &lt;/div&gt;&lt;!--/pane_login--&gt;
  
                                                                  &lt;div id="pane_reg" class="tab-pane"&gt;
                                                                     &lt;form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form"&gt;
                                                                          &lt;div class="row" style="height:40px;"&gt;
                                                                              &lt;div class="col-lg-4"style=""&gt;
                                                                              &lt;label for="login_email_id" class="fk-label" style="margin-top:7px;height:15px;"&gt;Full Name&lt;/label&gt;
                                                                              &lt;/div&gt;
                                                                              &lt;div class="col-lg-3" style=""&gt;
                                                                              &lt;select class="form-control" style="color:#000;width:72px;margin-left:-35px;height:30px;font-size:11px;"&gt;
                                                                                    &lt;option&gt;Mr.&lt;/option&gt;
                                                                                    &lt;option&gt;Ms.&lt;/option&gt;
                                                                                    &lt;option&gt;Mrs.&lt;/option&gt;
                                                                                    &lt;option&gt;Dr.&lt;/option&gt;
  
                                                                                  &lt;/select&gt; &lt;/div&gt;
                                                                              &lt;div class="col-lg-5" style=""&gt;
                                                                                 &lt;input id="reg_name" type="text" class="fk-input " name="email" autocomplete="on" 
                                                                                    placeholder ="Your Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Name'"&gt;
  
                                                                              &lt;/div&gt;
                                                                          &lt;/div&gt;
  &lt;!--                                                                            &lt;div class="line rw"&gt;--&gt;
  &lt;!--                                                                                &lt;div class="unit size1of4 lf lbl"&gt;--&gt;
  &lt;!--                                                                                    &lt;label for="login_email_id" class="fk-label" style=""&gt;Full Name&lt;/label&gt;--&gt;
  &lt;!--                                                                                &lt;/div&gt;--&gt;
  
  &lt;!--                                                                                &lt;div class="unit size3of4 lastUnit rt"&gt;--&gt;
  &lt;!--                                                                                --&gt;
  &lt;!--                                                                                     &lt;div class="input-group "&gt;--&gt;
  &lt;!--                                                                                      &lt;div class="input-group-btn fk-input "&gt;--&gt;
  &lt;!--                                                                                        &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;--&gt;
  &lt;!--                                                                                        &lt;ul class="dropdown-menu" style="position:relative !important"&gt;--&gt;
  &lt;!--                                                                                          &lt;li&gt;&lt;a href="#"&gt;Mr.&lt;/a&gt;&lt;/li&gt;--&gt;
  &lt;!--                                                                                          &lt;li&gt;&lt;a href="#"&gt;Ms.&lt;/a&gt;&lt;/li&gt;--&gt;
  &lt;!--                                                                                          &lt;li&gt;&lt;a href="#"&gt;Mrs.&lt;/a&gt;&lt;/li&gt;--&gt;
  &lt;!--                                                                                          &lt;li&gt;&lt;a href="#"&gt;Dr.&lt;/a&gt;&lt;/li&gt;--&gt;
  &lt;!--                                                                                        &lt;/ul&gt;--&gt;
  &lt;!--                                                                                      &lt;/div&gt;&lt;!-- /btn-group --&gt;
  &lt;!--                                                                                              --&gt;
  &lt;!--                                                                                           &lt;input type="text" class="fk-input form-control" name="email" autocomplete="on" id="login_email_id" --&gt;
  &lt;!--                                                                                           placeholder ="Your E-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your E-mail'"&gt;--&gt;
  &lt;!--                                                                                    &lt;/div&gt;&lt;!-- /input-group --&gt;
  &lt;!--                                                                                    --&gt;
  &lt;!--                                                                                   &lt;/div&gt;--&gt;
  &lt;!--                                                                            &lt;/div&gt;--&gt;
  
  
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;div class="unit size1of4 lf lbl"&gt;
                                                                                      &lt;label for="login_email_id" class="fk-label" style=""&gt;E-mail&lt;/label&gt;
                                                                                  &lt;/div&gt;
  
                                                                                  &lt;div class="unit size3of4 lastUnit rt"&gt;
                                                                                      &lt;input type="text" class="fk-input form-control" name="email" autocomplete="on" id="login_email_id" 
                                                                                      placeholder ="Your E-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your E-mail'"&gt;
  
                                                                                   &lt;/div&gt;
                                                                              &lt;/div&gt;
  
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;div class="unit size1of4 lf lbl"&gt;
                                                                                      &lt;label for="login_password" class="fk-label"&gt;Mobile No.&lt;/label&gt;
                                                                                  &lt;/div&gt;
  
                                                                                  &lt;div class="unit size3of4 lastUnit rt"&gt;
                                                                                      &lt;input type="text" class="fk-input form-control" name="mobileno" autocomplete="on" id="reg_mob_no" 
                                                                                      placeholder ="Mobile Number" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Mobile Number'"&gt;
  
                                                                                   &lt;/div&gt;
                                                                              &lt;/div&gt;
  
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;div class="unit size1of4 lf lbl"&gt;
                                                                                      &lt;label for="login_password" class="fk-label"&gt;Location&lt;/label&gt;
                                                                                  &lt;/div&gt;
  
                                                                                  &lt;div class="unit size3of4 lastUnit rt"&gt;
                                                                                      &lt;input type="text" class="fk-input form-control" name="mobileno" autocomplete="on" id="reg_mob_no" 
                                                                                      placeholder ="Location" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Location'"&gt;
  
                                                                                   &lt;/div&gt;
                                                                              &lt;/div&gt;
  
                                                                              &lt;div class="line rw"&gt;
                                                                                  &lt;center&gt;
                                                                                  &lt;div class="lastUnit size3of4"&gt;
                                                                                  &lt;input type="hidden" name="__FK" value="V2572135e576087a5881915c1283b7afbcd1t18eX5IEBZKdt4uNhR3jhexbEaRIFCpOF9vZskYd3zsqf3SAP283BjliKf7NmRzwKcRY2EmOyZkpoQ1oT1nS69zyA=="&gt;
                                                                                  &lt;button type="button" class="btn btn-primary btn-small" style="border-radius:0px;margin-right:10px;"&gt;Save &amp; Continue&lt;/button&gt;
                                                                                  &lt;button type="button" class="btn btn-default btn-small" style="border-radius:0px;margin-right:10px;"&gt;Cancel&lt;/button&gt;
                                                                                                      &lt;/div&gt;&lt;/center&gt;
                                                                              &lt;/div&gt;
                                                                                              &lt;!-- &lt;div class="line"&gt;
                                                                                      Don't have an account? &lt;a class="signup-button" href="javascript:;"&gt;Create One!&lt;/a&gt;
                                                                                  &lt;/div&gt; --&gt;
                                                                             &lt;/form&gt;
                                                                   &lt;/div&gt;
                                                                  &lt;/div&gt;&lt;!-- /.tab-content --&gt;
                                                              &lt;/div&gt;&lt;!-- /.tabbable --&gt;
  
                                                              &lt;div id="OR"&gt;OR&lt;/div&gt;
                      &lt;/div&gt;&lt;!--/reg_body_inner_left--&gt;
                      &lt;/div&gt;&lt;!--col-lg-8--&gt;
  
                      &lt;div class="col-lg-4" align="center" style=""&gt;
                              &lt;div style="top:50%;" &gt;&lt;h3&gt;Sign in with&lt;/h4&gt; &lt;/div&gt;&lt;br&gt;
  
                             &lt;button type="button" class="btn btn-primary" style="border-radius:0px;"&gt;&lt;a href="https://www.facebook.com"&gt;&lt;i class="icon-facebook" style&gt;&lt;/i&gt; facebook &lt;/a&gt;&lt;/button&gt;&lt;br&gt;&lt;br&gt;
                             &lt;button type="button" class="btn btn-primary"style="border-radius:0px; width:96px;"&gt;&lt;a href="https://www.gmail.com"&gt;&lt;b style="font-size:18px;"&gt;g&lt;/b&gt; google &lt;/a&gt;&lt;/button&gt;
  
                      &lt;/div&gt;&lt;!--col-lg-4--&gt;
  
                      &lt;/div&gt;&lt;!--row--&gt;
                 &lt;/div&gt;
            &lt;/div&gt;&lt;!-- /end modal body--&gt;
  
  
  
  
        &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
    &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>and a css for the same:</p>
  
  <pre><code>#reg_modal_header{ background:green;border-top-left-radius:6px;border-top-right-radius:6px;border-radius:0px;}
  #reg_close{ opacity:0.5;}
  #reg_close:hover{opacity:1;}
  
  .rw{height: 32px;line-height: 32px;margin: 10px 0;text-align: left;}
  .size1of4 {width: 25%;float: left;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
  .rt{overflow: hidden;}
  .rw .rt input {font-size: 13px;padding: 0 0;valign:text-top; height:90%;width:90%;}
  
  .lbl{border: 0;font-size: 100%;font: inherit;vertical-align: bottom;padding-top:3px;margin-top:2px;}
  #login_email_id,#login_password,#reg_mob_no{border: 1px solid #ccc;resize: none;font-family: inherit;text-align:center;background:white;}
  .fk-input{border: 1px solid #ccc;resize: none;font-family: inherit;text-align:center;background:white;font-size: 13px;}
  
  
  div #OR{ height: 50px; width: 50px; border: 1px solid #ddd; border-radius: 50%; font-weight: bold; line-height: 50px; /* Equals elements height */
   text-align: center;font-size:20px;float:right;position: absolute;right: -25px;top:75px;z-index:1;background:white;
  }
  .reg_modal{border-radius:0px;border-bottom:4px solid green;}
  .modal-body{border-bottom:4px solid green}
  #reg_name{width:150px;margin-left:-50px;height:30px;}
  </code></pre>
  
  <p>So,please can anyone help me to overcome this problem so that look will get same in my project also. . Thank you in advance . . </p>