I have

<div class="form-group">
	<label class="control-label">
		Last name
		<input style="font-weight: normal;" required maxlength="50" type="text" class="form-control" name="lastName">
	</label>
</div>

The input width is 210px in Firefox, 177px in Chrome, but I can't find the constant in the css after inspecting the element. The label "Last name" is much thinner than 210px. If I change the label to a very long string, the input's width will adjust accordingly(100%). However, I'm looking for where the minimum width is defined. I am using this markup so that I don't need to give the label a for attribute equal to the id of its input. I could easily explicitly set the width, but I'm just curious where this value came from. If these are browser styles, then how can I view them?

Well input.form-control is set to 100% which means 100% of whatever it's parent is. In this case, that's the label control.

The difference in the default label width is likely due to differences in each browser's default stylesheet

If you'd like the input to take up the full width, but don't want to type out a long label, you can just set:

<!-- language: lang-css -->
.form-group > label { width: 100%; }

Demo in jsFiddle