Adding horizontal spacing between divs in Bootstrap 3

Question

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     lt body gt       lt div class  container  gt         lt div class  row  gt           lt div class  col-md-12 panel  id  gameplay-title  gt Title lt  div gt         lt  div gt         lt div class  row  gt           lt div class  col-md-6 col-md-offset-3 panel  id  gameplay-scoreboard  gt Scoreboard lt  div gt         lt  div gt         lt div class  row  gt           lt div class  col-md-3 panel  id  gameplay-away-team  gt Away Team lt  div gt           lt div class  col-md-6 panel  id  gameplay-baseball-field  gt Baseball Field lt  div gt           lt div class  col-md-3 panel  id  gameplay-home-team  gt Home Team lt  div gt         lt  div gt         lt div class  row  gt           lt div class  col-md-6 col-md-offset-3 panel  id  gameplay-at-bat  gt At Bat lt  div gt         lt  div gt         lt div class  row  gt           lt div class  col-md-6 col-md-offset-3 panel  id  gameplay-game-report  gt Game Report lt  div gt         lt  div gt       lt  div gt     lt  body gt

User · Accepted Answer

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;
}

User · Answer

Do you mean something like this  JSFiddle  Attribute used   margin-left  50px

User · Answer

From what I understand you want to make a navigation bar or something similar to it  What I recommend doing is making a list and editing the items from there  Just try this    lt ul gt       lt li class  item col-md-12 panel  id  gameplay-title  gt Title lt  li gt       lt li class  item col-md-6 col-md-offset-3 panel  id  gameplay-scoreboard  gt Scoreboard lt  li gt   lt  ul gt    And so on    To add more categories add another ul in there  Now  for the CSS you just need this   ul       list-style  none     item       display  inline      padding-right  20px

[html] Adding horizontal spacing between divs in Bootstrap 3

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to grid