CODEWITHSUNDEEP
javascripthtmlcssasp.net-mvctwitter-bootstrap
Konrad Viltersten
Konrad Viltersten

Reputation: 39078

Controlling spacing under Bootstrap

I'm trying to get rid of the spacing between my input and the buttons to the right of it. Usually, the last resort is to override all the styles by adding an inline style in the tag, overriding everything else. However, I noticed that (a) it doesn't seem to affect the page and (b) the spacing actually gets bigger for smaller screen width.

My conclusion based on that (and some googlearch) is that Bootstrap uses JavaScript to dynamically set the styles to adapt to screens of different sizes. That's great but it gives me only limited control over how the controls are placed.

I'm guessing it's an awesome feature generally speaking but at the moment I'm only interested in Bootstrap's looks, not the layouting. How do I effectively override that? In the future I'll need to apply the layouting so I can't just remove it.

<div class="input-group date form_datetime col-md-5 "
     style="border: solid red 1px;" 
     data-date-format="dd M 'yy - hh:ii" 
     data-link-field="myDate">
  <input class="form-control" 
         style="border: solid yellow 1px;" 
         size="16" type="text" value="" readonly>
  <span class="input-group-addon" style="border: solid blue 1px;">
    <span class="glyphicon glyphicon-remove " 
          style="border: blueviolet 10px;">
    </span>
  </span>
  <span class="input-group-addon" style="border: solid orange 1px;">
    <span class="glyphicon glyphicon-th" 
          style="border: solid orangered 1px;"></span>
  </span>
</div>
<input type="hidden" id="myDate" value="" />

The actual question is how to in the above markup deactivate/override the spacing between input and spans without removing Bootstrap.

Could it be as easy as alternating one of the classes? I've read on some guides but wasn't enlighten, exactly. Likely not because of the docs being wrong, hehe.

Upvotes: 2

Views: 72

Answers (1)

hungerstar
hungerstar

Reputation: 21685

Part of the issuing you are experiencing is the use of media queries in Bootstrap that control the style of various elements. That is why they get wider on smaller screens. Media queries are a CSS feature.

The likely reason that your inline styles are not working is because Bootstrap uses !important statements.

NOTE: Please don't interpret Bootstrap's use of !important as a sign to use !important carte blanche yourself. It is considered against best practice to use !important when ever you feel like it. Specificity should be used before !important. Once one has gained enough experience, as the Bootstrap team likely has, then you'll know when it is acceptable to use !important or not.

As for the spacing between input elements and spans I'm not exactly clear on what that is. I take it as you want to remove some of the padding on the spans around the glyphicon spans.

Something like:

.input-group-addon {
    padding: 6px 0;
}

Demo JSFiddle.

Upvotes: 1

Related Questions