skip to Main Content

I’ve changed something, somewhere and now col-sm-offset-*s aren’t working at all. For example, if I wanted to split the screen in half, and display content only on the right hand side, I would usually use:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-6">
            This content isn't on the right hand side, it's on the left as if the col-sm-offset-6 isn't even there.
        </div>
    </div>
</div>

How can I check what’s wrong?

I’m using NPM and Laravel Elixir (gulp) to minify (make production ready) the files and short of me copying the entire CSS file here, I don’t know what else to do. Is there anything obvious? Has anyone come across this 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="[email protected]">
                        </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

Web Inspector

CSS Computed Properties

CSS Computed Properties

Update 2

I’ve submitted an issue on GitHub as this may have been intentional.

2

Answers


  1. Chosen as BEST ANSWER

    GitHub have officially changed their col-bp-offset-* names although the documentation is currently outdated.

    See issues: #19099, #19368, #19267, and my own #19562.

    I'll close the question and update my GitHub issue too.


  2. The current correct offset class for Bootstrap v4 Alpha:

     class="col-md-6 offset-md-3"
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search