CODEWITHSUNDEEP
htmlcsstwitter-bootstraprowmultiple-columns
Tommy Ess
Tommy Ess

Reputation: 1

Columns won't stack horizontally in a single row

The image in the 2nd column keeps stacking below the first column and not on the right side of the page. Ive been staring at this for two hours now. I'm using codepen so I have bootstrap preloaded in the background.

http://codepen.io/OfeyDofey/pen/KaLjeG/

 <div class="container-fluid">
  <div class="row">
   <div class="col-md-12">


 <h3>George Washington</h3><br>
  <h3>Montana State Quarter</h3><br>
  <h3>Ohio State Quarter</h3><br>

    </div>

    <div class="col-md-12">

          <img src="http://i.imgur.com/YzO3IvA.jpg" class="QC">

    </div>
    </div>

  </div> 
</div>

Upvotes: 0

Views: 131

Answers (2)

James
James

Reputation: 323

You need to change col-md-12 to col-md-6.

Bootstrap grid works on 12 columns.

Upvotes: 1

Dražen
Dražen

Reputation: 293

Found two bugs.

  • Grid system is 12 col wide, currently in your code it is 24 cols wide, use -6 instead of -12.
  • Add 'display:inline;' property to your 'h3{ }' in order to display them inline.

Upvotes: 0

Related Questions