Bootstrap: Is there a way to get a tighter layout?

Question

Just curious if there is a way to get a tighter layout with bootstrap.

Why is there so much space between the text elements?

Is it all just to accomodate pads, phones, etc?

Is there any way to choose a tighter style for the entire page to default to?

I also think the edit boxes themsselves are too large. There is too much wasted space between the text and the edge of the box.

Why aren't they a bit tighter?

---

---

These edits have been added after attempting to use code in answer from NetworkNerd

I have added the following to my stylesheet.

  input[type=text]{
       padding-top:0px; padding-bottom:0px;
       margin-bottom:0px; /* Reduced from whatever it currently is */
       margin-top:0px; /* Reduced from whatever it currently is */
       height:24px;
    }

Those additions make my form look like the following:

You can see that things got a bit tighter, but that is only because of the height:24px style.

The other changes do not seem to have any affect on the look.

By the way, the stylesheet which includes this change is the last one included.

Labels Are Not Aligned

Also, notice that now that I've changed that the labels are not aligned with their associated text input.

Still Too Much Margin Between Text Boxes

And there still seems to be too much margin space between the text boxes.

HTML Code Snippet For Title

Here's a snippet of the HTML which shows the HTML with the applied Bootstrap styles. This was all just copied from samples on the bootstrap site.

<form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="titleText" class="col-sm-2 control-label">Title</label>
            <div class="col-sm-6">
                <input id="titleText" class="form-control" type="text" ng-model="book.title" />
            </div>
        </div>

Answer 1

Bootstrap doesn't recommend editing bootstrap.css itself. It is recommended per best practices to modify the bootstrap style in another, dominant CSS file.

Try doing something like this:

Custom CSS

input[type=text]{
   padding:0px;
   margin-bottom:2px; /* Reduced from whatever it currently is */
   margin-top:2px; /* Reduced from whatever it currently is */
}

It's hard to tell from the picture if it's a margin on the top or bottom. You can remove the margin-[top|bottom] based on what the result of your testing is.

It's also possible that the input element isn't the one with a margin, it could be the label element instead (Bootstrap, at least in my experiences, does some strange things with the label element...)

Another edit: I like to give people options. Therefore, if this is in a table element, consider adding the table-condensed class to the table tag to reduce some of the whitespace between items, as shown below:

<table class="table table-condensed">