I am having trouble debugging the Twitter Bootstrap v4-alpha grid. The col-sm-offset-* class doesn't seem to be

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.

Answer №1

Here is the updated correct offset class for Bootstrap version 4 Alpha:

 class="col-md-6 offset-md-3"

Answer №2

GitHub has officially made changes to their naming conventions for the col-bp-offset-* classes, but the current documentation is outdated.

References to check out: #19099, #19368, #19267, as well as my own issue #19562.

I will be closing this question and providing an update on my GitHub issue as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set a unique class for several elements depending on a given condition

Is there a way to assign a color class based on the element's value without looping through all elements? Check out my jsfiddle HTML <div> <ul> <li class="MyScore">90</li> <li class="MyScore"> ...

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

How to use CSS to insert a line break after the fourth child in a

At this moment, the example displays an unordered list containing 8 list items. I am curious if there is a way to add a line break after the 4th li item using only CSS (no HTML or JavaScript). Perhaps something like: ul li:nth-child(4n):after { conte ...

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

If the element contains a specific class, then remove that class and apply a new

Encountering an issue here. I have 4 HTML elements structured like this: <!-- Light Color Scheme - Header False and Show Faces True --> <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptiv ...

Managing websites on Android when the keyboard is displayed

I am currently facing an issue with my webpage on Android (Galaxy SIII). The problem occurs when visitors try to enter their email in the form at the bottom of the page. The keyboard becomes visible, causing the design to look messy. When using Chrome, the ...

Divs Stacked and Centered

I am currently utilizing the card components from Google's Material Design Lite HTML theme, which can be found at . At the moment, my cards are positioned next to each other and aligned to the left side of the page. I am looking to center the cards o ...

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

Having trouble getting the hover effect to work when selecting a different section of the SVG

In my SVG checkbox design, I have a circle element surrounding a polyline element (which acts as the checkmark). The boundaries of the icon extend beyond the circle, causing hover styles to trigger even when hovering outside the circle. I want to change st ...

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

Chaos in the IE8 drop-down menu situation

I'm having trouble with my code for a menu with drop-downs in ie8. It works fine in all other browsers but there seems to be an issue with the positioning of the main menu and submenus. Any thoughts on what might be causing this? <ul id="nav" clas ...

What is the best way to position elements with CSS?

I need help aligning the arrows and images on the same line. Can anyone guide me on how to do this? (I'm using html5boilerplate). Desired Layout: Current Layout: Existing Code: HTML: <div id="linkbar"> <a><img src="./img/ar ...

What is the best way to install Bootstrap through npm?

My npm project is utilizing jquery with the following code: var $ = require('jquery'); In addition, my index html file includes a reference to bootstrap: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="styl ...

Unveiling the Power of Angular in Handling Date and Time

Recently, I encountered an issue with the following code snippet: <ng-template>{{date:'MM/dd/yyyy h:mm:ss a Z'}}</ng-template>. This code displays a date and time in one long line. My goal is to insert a line break between the date an ...

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

Struggling to place the sans-serif font right at the edge of the H1 tag

Encountering a strange issue that suggests I might be overlooking something simple. Any thoughts on the following: I have a heading tag styled with a sans-serif font (loaded from Google fonts) and when I apply a background-color, the text does not align t ...