The Grid system in Bootstrap what am I missing? - formatting

Question

Please feel free to correct me, but from what I understand of the bootstrap CSS is that the spans1,2,3,4 ect are supposed to make laying out data on a web page easy. One entire row is supposed to be a span12 meaning two 6 spans should equal an entire row with the contents being 50/50 spaced? Is this right so far?
<div class="hero-unit">
<div class ="span4">First name: <input type="text" runat="server" placeholder="Enter First Name" name="firstname" id="firstname"/></div>
<div class ="span4">Last name: <input type="text" runat="server" placeholder="Enter Last Name" name="lastname" id="lastname"/></div>
<div class ="span2">Student Number: <input type="text" runat="server" placeholder="Enter Student Number" name="Student Number" id="StudentNumber"/> </div>
<div class ="span2">Course code & Name: <input type="text" runat="server" placeholder="Enter Course Code" name="CourseCode" id="CourseCode"/></div>
<div class ="span4">Course code & Name: <input type="text" runat="server" placeholder="Enter Course Code" name="CourseCode" id="Text1"/> </div>
</div>
The result looks nothing as I would expect it to. Image of the messed up form here sample http://img546.imageshack.us/img546/6361/35787686.png

Answer 1

Thanks again Tom solution code is below:-
<div class="row-fluid">
<h1>Personal Details</h1></div><div class="row hero-unit">
<div class="row-fluid">
<div class ="span2">First name:</div>
<div class="span4">
<input type="text" runat="server"
placeholder="Enter First Name"
name="Firstname" id="Firstname" />
</div>
<div class ="span2">Last name:</div>
<div class="span4">
<input type="text" runat="server"
placeholder="Enter Last Name"
name="Lastname" id="Lastname"/>
</div>
</div>
<div class="row-fluid">
<div class ="span2">Student Number:</div>
<div class="span4">
<input type="text" runat="server"
placeholder="Enter Student Number"
name="Student Number" id="StudentNumber"/>
</div>
<div class ="span2">Course Name:</div>
<div class="span4">
<input type="text" runat="server"
placeholder="Enter Course Code"
name="CourseCode" id="CourseCode"/>
</div>
</div>
<div class="row-fluid">
<div class ="span2">Mail Address:</div>
<div class="span10">
<input type="text" class="span10" runat="server"
placeholder="Enter Postal Address"
name="PostalAddress" id="PostalAddress"/>
</div>
</div>
</div>
The much nicer formatting results can be seen here:- http://imageshack.us/photo/my-images/502/homepageim.png/