Something has been altered somewhere, causing col-sm-offset-*
s to stop functioning entirely. For instance, when attempting to split the screen in half and only display content on the right side, I typically would use:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
This content doesn't appear on the right side, but rather on the left as if the col-sm-offset-6 isn't being applied at all.
</div>
</div>
</div>
How can I troubleshoot this issue?
I'm utilizing NPM and Laravel Elixir (gulp) to condense (prepare for production), and aside from copying the entire CSS file here, I'm unsure of what else to do. Are there any obvious issues? Has anyone encountered this problem before?
Update
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
<div class="row">
<form role="form" method="POST" action="/register">
<input type="hidden" name="_token" value="abcdefghij">
<div class="col-xs-12">
<fieldset class="form-group">
<label for="username" class="form-control-label">Username</label>
<input name="username" type="text" class="form-control " id="username" placeholder="Enter a username" value="j">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="first_name" class="form-control-label">First Name</label>
<input name="first_name" type="text" class="form-control " id="first_name" placeholder="Enter your first name" value="John">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="last_name" class="form-control-label">Last Name</label>
<input name="last_name" type="text" class="form-control " id="last_name" placeholder="Enter your last name" value="Appleseed">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="email" class="form-control-label">Email Address</label>
<input name="email" type="email" class="form-control " id="email" placeholder="Enter your email address" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e446e4f004d4143">[email protected]</a>">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password" class="form-control-label">Password</label>
<input name="password" type="password" class="form-control " id="password" placeholder="Enter a password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password_confirmation" class="form-control-label">Confirm Password</label>
<input name="password_confirmation" type="password" class="form-control " id="password_confirmation" placeholder="Please confirm your password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Web Inspector
https://i.sstatic.net/if6wO.png
CSS Computed Properties
Update 2
I've raised an issue on GitHub as this might have been done intentionally.