Bootstrap: Is there a way to get a tighter layout?
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">