Adding horizontal spacing between divs in Bootstrap 3

13

I want to include a small horizontal space between the "Away Team" and "Baseball Field" divs, as presented in this fiddle: http://jsfiddle.net/VmejS/. I have tried altering padding, margins, including decimal column offsets, all unsuccessfully.

Here is the html:

 <body>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 panel' id='gameplay-title'>Title</div>
      </div>
      <div class='row'>
        <div class='col-md-6 col-md-offset-3 panel' id='gameplay-scoreboard'>Scoreboard</div>
      </div>
      <div class='row'>
        <div class='col-md-3 panel' id='gameplay-away-team'>Away Team</div>
        <div class='col-md-6 panel' id='gameplay-baseball-field'>Baseball Field</div>
        <div class='col-md-3 panel' id='gameplay-home-team'>Home Team</div>
      </div>
      <div class='row'>
        <div class='col-md-6 col-md-offset-3 panel' id='gameplay-at-bat'>At Bat</div>
      </div>
      <div class='row'>
        <div class='col-md-6 col-md-offset-3 panel' id='gameplay-game-report'>Game Report</div>
      </div>
    </div>
  </body>

This question is tagged with html css twitter-bootstrap twitter-bootstrap-3 grid

~ Asked on 2013-10-21 18:07:45

The Best Answer is


14

The best solution is not to use the same element for column and panel:

<div class="row">
    <div class="col-md-3">
        <div class="panel" id="gameplay-away-team">Away Team</div>
    </div>
    <div class="col-md-6">
        <div class="panel" id="gameplay-baseball-field">Baseball Field</div>
    </div>
    <div class="col-md-3">
        <div class="panel" id="gameplay-home-team">Home Team</div>
    </div>
</div>

and some more styles:

#gameplay-baseball-field {
  padding-right: 10px;
  padding-left: 10px;
}

~ Answered on 2014-08-08 06:30:27


2

Do you mean something like this? JSFiddle

Attribute used:

margin-left: 50px;

~ Answered on 2013-10-21 18:14:52


Most Viewed Questions: