0

Hi I'm using Bootstrap 3 and trying to set my template, maybe i didn't fully understand the 'row' concept in Bootstrap but my template is not acting as i wanted.

Look at this full screen fiddle:
http://jsfiddle.net/52VtD/6206/embedded/result/
And the source:
http://jsfiddle.net/52VtD/6206/

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="well">
                <div class="text-center">
                    IM SO BIGGY<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br />
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="well">
                SMALL SPACE<br /><br /><br /><br /><br /><br /><br />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-9">
            <div class="well">
                <strong>Fun</strong><hr class="hr-tags"/>
                SPACE TIME<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </div>
        </div>
    </div>
</div>

I wanted that 'Fun - SPACE TIME' will be right under the 'SMALL SPACE' but there is a huge gap between them... what have i done wrong?

kfir124
  • 1,286
  • 4
  • 14
  • 27

1 Answers1

6

The Fun - SPACE TIME should be inside the same column as SMALL SPACE. This way, the entire col-md-3 column is floated right, and the elements inside it are arranged one under the other.

See JSFiddle result and source.

.row doesn't work like a table row, as you might think, but instead it makes sure its children have their own line. This answer explains a little more about it.

Community
  • 1
  • 1
Aylen
  • 3,524
  • 26
  • 36