The functionality of Bootstrap's push and pull options appears to be malfunctioning

Exploring the grid option pull and push has presented some challenges for me. I suspect the issue lies in my implementation of bootstrap CSS and/or JS (not certain if push/pull are controlled by JS or CSS).

I've included a push-pull setup at the top of my webpage:

<div class="row">
<div class="col-md-9 col-md-push-3">Should be on the right</div>
<div class="col-md-3 col-md-pull-9">Should be on the left</div>
</div>

You can view this at:

I'm puzzled as to why it's not functioning as expected and unsure where to begin troubleshooting.

javascriptcssgridbootstrap-4

Answer №1

There seems to be a mistake in how the push/pull classes are being applied.

The correct format should be:

[push|pull]-[viewport size]-[column count]
.

I've highlighted one of the columns for better visibility of the swap.

.col-md-9.push-md-3 {
  background-color: #fc0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
    <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
  </div>
</div>

Answer №2

It appears that you are utilizing a downloaded variant of bootstrap 4.0 alpha. By inserting the following line:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

right after the <title> tag and before your call, everything works smoothly. The reason for this issue remains unclear since the file looks in order. I would recommend experimenting with a production version of Bootstrap.

Here is the link to the image displaying col swap http://webdevpdx.com/soverflow/col-swap.png

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

I'm experiencing an issue where a function call within a Vue.js v-for directive causes the loop to continue indefinitely, but I'm unsure of the cause

Here is the template I am working with: <template> <div> <div v-for="report in reports"> <div class="map" v-bind:id="mapID = report.started.toUpperCase()" v-text="report.started"> {{hello(mapID)}} </div& ...

javascriptvue.jsvuejs2vue-component

Pursue cellular devices

Looking to customize CSS media queries specifically for mobile devices, like so: @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { /* yo ...

javascriptcssmobiletarget

In what way does this operate in an asynchronously?

As a newcomer to node.js and asynchronous JS, I am grappling with interpreting it correctly. Specifically, I am trying to grasp the mechanics behind this snippet of code: var fs = require('fs') var filedir = process.argv[2] function doneReading ...

javascriptnode.jsasynchronous

What are the proper steps to ensure images are displayed correctly on mobile devices?

https://i.sstatic.net/M68Ob.jpg https://i.sstatic.net/fPKXr.jpg Our background image is 1920x1080p and looks great on desktop browsers, but it's not displaying properly on mobile devices in either portrait or landscape mode. Is there a way to resolv ...

htmlcssresponsive-design

Tips for uncovering a concealed div within an iframe?

It's as if there's a mystery surrounding how to reach this elusive div... div#someId iframe html>head>body div.wrapper div.footer Naturally, my strategy: #someId iframe body .footer is proving to be ineffective. ...

csscss-selectors

Why does the data in useState only update after clicking the button for the second time?

When utilizing useState to set a value, I noticed that it only updates upon clicking the button for the second time. Why does this occur? const DropDownMenu = ({ element, segmentEnd, segmentStart }) => { const [open, setOpen] = React.useState(false); ...

javascriptreactjsmaterial-uiuse-state

Tips for troubleshooting JavaScript errors in Internet Explorer 7 & 6 using Dreamweaver CS3

Is there a way to track and debug JavaScript errors in Internet Explorer 7 & 6 on web pages using Dreamweaver CS3? I am experienced with debugging in Visual Studio, but unsure how to do it in Dreamweaver CS3. ...

javascriptdreamweaver

What is causing the code behind to reject the href with 'aspx' in the anchor tag?

I am currently working on implementing a calendar control that will display Today's Due and Overdue items in separate accordion sections when a date is selected. To achieve this, I have written the necessary code in the back end and used a style.css f ...

c#javascriptjqueryjson

Accessing the next and previous elements using jQuery

Aug: <input type="text" value="100000" name="targetMonth_8" id="targetMonth_8" class="targetMonth" disabled> Sep: <input type="text" value="100000" name="targetMonth_9" id="targetMonth_9" class="targetMonth" disabled> Oct: <input type="text" ...

javascriptjquery

"Trouble displaying specific events based on their IDs retrieved from the MySQL database

Each button in my list is associated with a specific person. Upon clicking a button, it directs to calendar.php?id=5 (where 5 is the personal id). I want the calendar to display the vacations scheduled for that particular id from the MySQL database. even ...

javascriptphpjquerymysqlfullcalendar

Creating a custom fav icon within a button with CSS styling

https://example.com/code-example Hey there, I'm attempting to replicate the button showcased in the code example above. However, I'm facing a challenge when trying to incorporate the stars without altering the existing script. Another issue is w ...

cssfavicon

What is the best way to organize a complicated array in Javascript?

Struggling with this question for quite some time. I have a nested list with the following structure: Volume1 Chapter4 Chapter3 Section3-6 Section3-1 Volume2... ... I am looking to create a sorting function to organize volumes, ch ...

javascripthtmlsorting

Creating clickable data columns in jQuery DataTablesWould you like to turn a column in your

How can I turn a column into a clickable hyperlink in a jQuery DataTable? Below is an example of my table structure: <thead> <tr> <th>Region</th> <th>City</th> <th> ...

javascriptjqueryajaxjquery-pluginsajaxcontroltoolkit

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

javascriptjqueryhtmlsvgtooltip

What are the steps to utilizing the $document service in AngularJS?

I am a complete beginner when it comes to AngularJS and JavaScript in general, and I find myself a bit confused about the usage of $document. From what I understand, $document provides access to some JQuery functions. So, if I want to remove an element tha ...

javascriptjqueryangularjs

CSS: Even when text is concealed using text-overflow:ellipses, it remains in existence

I am dealing with a ul element that contains li's of varying lengths but with a fixed width. Each li also has some icons within it. <ul> <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li> &l ...

csshovercss-position

Transition effects applied to images with transparency using CSS

My collection includes three transparent PNG images: https://i.sstatic.net/80Jxj.png https://i.sstatic.net/Eewcq.png https://i.sstatic.net/VXk7A.png I have arranged them using the following HTML/CSS: <div style="position: relative; left: 0; top: 0; ...

javascriptjqueryhtmlcss

What is the best way to calculate the sum of a field within a map?

Having trouble determining how to calculate the total of an array received from an API request. Working with Next.js {positions.map(position => { return ( <List title={position.title} slug={position.slug} quantity={position ...

javascriptnext.js

The absence of a flickering flame is noticeable in the THREE.js environment

I have been working on creating a flame using THREE.js and spark.js. However, even after rendering the world, I am unable to see the flame and it seems like the world is empty. Although I checked the console for errors, there are no indications of what mig ...

javascriptthree.jswebgl

Combine es6 imports from the identical module using an Eslint rule or plugin

Looking to consolidate my ES6 imports from a single module into one for my React project. For example: import { Title } from "@mantine/core"; import { Center } from "@mantine/core"; import { Divider } from "@mantine/core"; T ...

javascriptreactjsecmascript-6import