Shifting columns in Bootstrap version 4

What it used to look like:

<div class="row">
  <div class="col-sm-2 col-sm-offset-3"> ... </div>
</div>

This is what it looks like now:

<div class="row">
  <div class="col-xs-2 offset-xs-3"> ... </div>
</div>

After updating to Bootstrap v4 Beta, the offset-xs-3 doesn't seem to be working anymore. More information can be found at: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns.

Is there a different way to offset columns by a specified amount in v4 Beta?

View an example here: https://codepen.io/Deka87/pen/prVLyE

htmlcsstwitter-bootstrap-4

Answer №1

Are you looking for this solution? Check it out at https://jsfiddle.net/5L49z51y/1/.

<div class="row">
  <div class="col-sm-2 ml-sm-auto mr-sm-auto"> This is it </div>
</div>

Answer №2

If you're struggling with offsetting in Bootstrap v4-beta now that the numbering system is no longer available, here's a workaround: add an empty column before your desired column and adjust its width to create the desired offset.

[class*="col-"] {
  background-color: #eee;
}
.row {
  background-color: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-2">
      .col-sm-2 offseted by 3 columns
    </div>
  </div>
</div>

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

What is the best way to center a div horizontally on all screen resolutions using only CSS?

The margin: 0 auto declaration is not having the desired effect for some reason. I have attempted using text-align in the header, as well as exploring various other options, but none seem to be working. This is my current code: div.middle { font-fami ...

htmlcsscenter

In what format is the parameter accepted by the .getDay() method?

Here's the plan: I need to extract information from an input element with type set as date. This data will then be stored in a .json file and later parsed when the program is initiated. Subsequently, I aim to utilize the date.getDay() function to dete ...

javascripthtmlnode.js

Strategies for effectively engaging with dynamically created forms amidst a multitude of other forms on a webpage

One of the challenges I face is dealing with a page that has multiple forms dynamically generated based on user input. Each form contains two sets of radio buttons, with the second set being disabled by default and enabled based on the users' selectio ...

javascriptphpjqueryhtmlforms

Chrome Automatically Playing WebRTC Audio

My webapp has webrtc functionality, but I've noticed a strange issue. When connections are established between Chrome browsers, the audio is not played, while video is. However, this problem doesn't occur with Mozilla users. So... Chrome user 1 ...

javascripthtmlgoogle-chromewebrtc

Trouble with executing jQuery $.ajax post to PHP within the same file

Here is the code snippet: <script> $( document ).ready(function() { $( ".button" ).click(function() { var clickBtnValue = $(this).val(); $.ajax({ //url: '', // url is empty because I'm working in the ...

phpjqueryhtmlajax

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

javascriptjqueryhtmlmultiple-select

`Ineffectiveness of CSS media query for font-size adjustment in HTML selector`

I recently implemented the 62.5% trick to adjust my font-size for various screen sizes. However, I noticed that on larger screens, the text appears too small. To address this, I tried increasing the font-size to 80% using a min-width media query. Unfortuna ...

htmlcssvue.jssassscss-mixins

Is it possible to retrieve the current selector as a string in LESS?

Is there a way to utilize the name of my css classes to specify the URL for an image they depend on? I know that using an ampersand within a selector allows you to add additional states, but can it be accessed as a string? For example: .my-image{ back ...

cssless

Issue with flash installation

I'm currently working on a WordPress website at www.studium.cl. However, I've encountered an issue when trying to open it in Internet Explorer. Each time I try to access the site, a window pops up prompting me to install Adobe Flash Player. Even ...

phphtmlflashwordpress

What is the best way to implement a media query for changing styles on hover for an element

I am facing an issue with media queries where when I apply a hover effect to an element, such as a clickable link in the navigation bar, the new rules work as expected but also retain the default browser styles. For instance: nav ul li a:hover{ border:0; ...

htmlcss

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled

It seems that Selenium is having trouble retrieving the text from the dropdown options. Here is a snippet of the code I am working on: WebElement dropdown=driver.findElement(By.id("selFromAccount")); List<WebElement> dropoptions=dropdown.findElemen ...

jqueryhtmlcssseleniumautocomplete

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

htmlcsscss-gridmin

The speed of the Ionic app is disappointingly sluggish on devices, causing significant delays

After testing my app in Ionic Lab, it runs smoothly. However, when I create the apk file and install it on my device, the performance is very slow. There are delays in clicking on buttons, pushing pages, opening modals, and closing modals. It seems like t ...

androidhtmlangularionic-frameworkionic2

What is the best way to position a button to the right side of the screen?

Is there a way to align a button to the right of a page? I attempted using text-align: right; and align-content: right; In addition, I want the button to utilize display: flex; #hideShow { display: flex; text-align: right; align-content: right; ...

htmlcss

Show schedule in an HTML chart

I'm currently working with a table that displays the current status of a request. An example of how the table looks in HTML is shown below: https://i.sstatic.net/daDHy.png The table itself is quite simple, but I am having trouble figuring out how to ...

jqueryhtmlcss

The Google Visualization chart fails to display properly once CSS is applied

Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...

javascriptcsscharts

I am facing an issue where the inline CSS is not being applied in my

I recently integrated tcpdf in my CodeIgniter project and encountered an issue with applying inline CSS to td. This is a snippet of my code: <table style="float:left;width:100%; border:1px solid #c2c2c2; margin-top:10px;"> <tr style="float:l ...

htmlcsspdf

CSS techniques for positioning a header image

I'm having an issue with using a banner I created in CS6 Illustrator as a header on my website. Despite setting it as the background, positioned at the top and set to "no-repeat", it keeps appearing at the bottom of the header area with around 300px o ...

htmlcssadobe-illustrator

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss