Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding horizontal spacing between divs in Bootstrap 3

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>
like image 656
steve_gallagher Avatar asked Oct 21 '13 18:10

steve_gallagher


People also ask

How do I add a horizontal space in bootstrap?

Following Syntax are used in the Various Classes for adding spacing: (property)(sides)-(size) for xs. (property)(sides)-(breakpoint)-(size) for sm, md, lg, and xl.

How do you put a space between two div columns in bootstrap?

To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.

How do you put a space between lines in bootstrap?

If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.


3 Answers

Do you mean something like this? JSFiddle

Attribute used:

margin-left: 50px;
like image 129
Florian Wendelborn Avatar answered Oct 17 '22 13:10

Florian Wendelborn


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;
}
like image 43
Rakhat Avatar answered Oct 17 '22 11:10

Rakhat


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;

<ul>
    <li class='item col-md-12 panel' id='gameplay-title'>Title</li>
    <li class='item col-md-6 col-md-offset-3 panel' id='gameplay-scoreboard'>Scoreboard</li>
</ul>

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;
}
like image 36
Lae Avatar answered Oct 17 '22 11:10

Lae