Bootstrap padding not showing with tabs

Question

Hello i am having a weird issue here i have a i have created e form inside it but the padding does not display.

This is my html:

<div class="container-fluid">
    <tabset tab-theme="orange" tab-position="top" style="border:none!important;">
        <tab heading="Person">
            <form class="form-horizontal">

                    <div class="row">
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="first_name">First Name</label>
                                <input id="first_name" name="first_name" placeholder="Type here.." class="form-control" required="" type="text">
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="last_name">Last Name</label>
                                <input id="last_name" name="last_name" placeholder="Type here.." class="form-control" required="" type="text">
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="other_name">Other Name</label>
                                <input id="other_name" name="other_name" placeholder="Type here.." class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </form>
        </tab>
        <tab heading="Company">
            <div class="col-xs-12">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus dolorum odio at veniam aut id corrupti hic esse quisquam fugiat. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
            </div>
        </tab>
    </tabset>
</div> <!-- container-fluid -->

There is usually padding my default for each form input container. In this case there is not.

I do not know it it is an issue with my html or css, is there a specific way of doing this or do i have to force the padding from my CSS?

Answer 1

Well i couldn't find the cause and the right solution so i just forced the padding in my CSS:

.form-horizontal .form-group {
    padding: 10px !important;
}

Found the issue. it was with the "form-group" wrapper. I took it out, now the padding displays properly.

Answer 2

Bootstrap Documentation for Form Horizontal

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a ). Doing so changes .form-groups to behave as grid rows, so no need for .row.

If you read Bootstrap's doc. its clearly mentioned that, .form-group inside .form-horizontal acts as .row, hence, you col-md-xx are not getting their padding. as per your code:

.row {margin-left:-15px;margin-right:-15px} // margin goes negative
.col-md-xx {padding-left:15px;padding-right:15px} // padding creates 30px gutter
.form-group {margin-left:-15px;margin-right:-15px} // again your margins go negative - hence no gutter.

Better remove form-horizontal class or overwrite it with your custom css

working Codepen example: http://codepen.io/happy2deepak/pen/wKwYXJ?editors=100

Answer 3

It's your parent container <form> that has the class of .form-horizontal. Bootstrap (by default) has negative margins set for that. Below is a snippet of the style sheet that is causing the behavior of your input boxes.

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

You can either:

1. Remove the form-horizontal class from the form element. OR;

2. Add the following to your custom style sheet to over write the default declaration, like this:

   .form-horizontal .form-group { margin-right: 0; margin-left: 0; }

Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/Lt0o5mp0/

Answer 4

In your html remove container of div.form-group .if you remove both containers div.row and div.col-md-4 your inputs will be rendered with form default padding. Also add class form-inline to form tag and remove class form-horizontal. Try this solution it will work

<div class="container-fluid">
 <tabset tab-theme="orange" tab-position="top" style="border:none!important;">
 <tab heading="Person"> 
<form class="form-inline"> 
<div class="form-group">
 <label class="control-label" for="first_name">First Name</label> 
<input id="first_name" name="first_name" placeholder="Type here.." class="form-control" required="" type="text">
  </div>
 <!-- Text input-->
 <div class="form-group">
  <label class="control-label" for="last_name">Last Name</label> 
 <input id="last_name" name="last_name" placeholder="Type here.." class="form-control" required="" type="text"> 
</div>
 <!-- Text input-->
<div class="form-group">
 <label class="control-label" for="other_name">Other Name</label> 
<input id="other_name" name="other_name" placeholder="Type here.." class="form-control" type="text"> 
</div> 
</form>
 </tab> 
<tab heading="Company">
 <div class="col-xs-12">
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus dolorum odio at veniam aut id corrupti hic esse quisquam fugiat. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p> 
</div>
 </tab>
 </tabset> 
</div>
 <!-- container-fluid -->