Menu
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>
656
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.
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.
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
Do you mean something like this? JSFiddle
Attribute used:
margin-left: 50px;
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;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
