Flipping the Script: Unraveling Bootstrap 4's Reverse Pull

Why isn't pull-right or pull-left working, and what am I doing wrong?

The code in question

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <section class="col-sm-9 pull-right" style="background: olive;">
      <article>content</article>
    </section>

    <section class="col-sm-3 pull-left" style="background: #008040;">
      <aside>Widgets</aside>
    </section>
  </div>
</div>

htmlcsstwitter-bootstrap-4

Answer №1

Bootstrap 4 no longer supports the use of pull-right and pull-left. Instead, it utilizes flexbox for layout.

If you need to change the order of two divs, you can simply rearrange their positions in the HTML:

<section class="col-sm-3" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9" style="background: olive;">
    <article>content</article>
</section>

To maintain their original positions in the HTML while changing their visual order, you can utilize the flex-order property:

<section class="col-sm-3 order-1" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9 order-0" style="background: olive;">
    <article>content</article>
</section>

For more information, refer to the Bootstrap 4 documentation: https://getbootstrap.com/docs/4.0/layout/grid/

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 change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen) HTML : <div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div> CSS : #container { width: 400px; height: 20px ...

jqueryhtmlcssreactjs

What could be the reason my bootstrap cards are stacking vertically instead of being placed horizontally next to each other?

My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...

htmldjangobootstrap-4

Tips on how to personalize the print layout of an Angular 4 page when pressing ctrl+p

I am working on an angular4 app and I encountered an issue when trying to customize the print page view by pressing ctrl+p in the browser. The page that needs to be printed contains only Angular components, and my attempts to modify the print view using ...

angularcssangular5

Deselect a selected radio button by clicking on it

I am trying to create a radio button with an unchecked value, and I thought this code would work: $('form').on('click', 'input[type="radio"]:checked', function (event) { $(this).prop("checked", false); }); It seems simpl ...

javascriptjqueryhtmlcheckbox

Store user input as cookies and showcase it to the user upon their return visit

I'm looking for some assistance in saving user input to cookies and displaying it to the user. The goal is to have the text entered in the input field change into a div and be displayed to the user every time they revisit the page. Currently, I only ...

javascriptjqueryhtmlcsscookies

Bootstrap triggering unexpected behavior in navbar styles

As I delve into the world of HTML, CSS, and JS, I encountered a peculiar error while using Bootstrap that seems to be affecting the links in my navigation bar. Here's the CSS I've been using: https://pastebin.com/naVZuzaG And here's the co ...

htmlcssbootstrap-4

The process of redirecting a web page using htaccess and incorporating URL parameters

I have a directory where I store HTML pages. Using the PHP include function, I am adding these pages to my index.php file by referencing them with a URL parameter value. The URL parameter "xpage" corresponds to the page names stored in another folder, whil ...

phphtml.htaccess

Simple Steps to Connect an HTML File to CSS in Windows Notepad

I have scoured the depths of the online realm in search of a method to connect HTML with CSS within the preinstalled Notepad application on Windows. Regrettably, my attempts, including utilizing the system path, proved fruitless. Is it conceivable to ach ...

htmlcss

Add flair to the elements contained within a div that has been assigned a class

What I am capable of doing: Creating HTML: <div id="test"> HELLO! <input type="text"> </div> Styling with CSS: #test { color:#F00; } #test input[type=text] { background-color:#000; } Now, if the #test is replaced with ...

htmlcssstyles

What could be the reason for my application not utilizing its bootstrap classes effectively?

Just starting out with Bootstrap and have made some progress. However, the bootstrap classes I'm using are not rendering properly. What could be the issue? <div class="position-absolute bottom-0 end-0 border border-dark"> https://i.ss ...

htmlcsstwitter-bootstrapflaskbootstrap-4

The HTML image tag is malfunctioning on a Windows system

I'm currently updating an HTML page and trying to add an image using the img tag. <img src="file:///C:/wamp/www/images/Sat.png" class="img-circle" alt="User Image"/> However, it doesn't seem to be working! ...

html

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...

javascripthtmlcsssticky

libxml2 - deleting a child node without affecting its grandchildren

I'm working with libxml2 to parse HTML content and need to remove specific formatting tags such as <center>, while retaining their content (e.g. a hyperlink). This requires removing particular child nodes from my xmlNodeSet, while preserving th ...

htmlclibxml2

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

javascriptcsscharts

Is there a way to roll up the background image of the body?

body { background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } .enemy-animation { position: relative; z-index: 1; animation-direction: alternate; animation-durati ...

htmlcss

Using AJAX and Rails to set session variables in the presence of appcache

When making an ajax call to "updateUser," the following code is executed: puts session[:user_id] user = User.find(params[:user_id]) if user session[:user_id] = user.id session[:user_name] = user.first_name + " " + user.last_name puts session[:user_i ...

ruby-on-railsajaxhtmlsessionjquery

Correct punctuation will not be displayed accurately

I'm really struggling with this issue. My website has multiple pages, and on about half of them the punctuation is not showing up correctly. For instance, on the punctuation is displaying as "Highlights: ✓ Cyclo Hanoi Tour ✓ Overnight ...

cssfontswebfontspunctuation

Steps for creating a div element on top of an image

<div style="border-style:solid; margin:auto;"> <div style="position:absolute;"> <div style="background:yellow; border-style:dotted; height:300px; width:300px"> <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICA ...

htmlcsspositionabsolutefloating

Instructions for positioning two 3D models within separate div elements using Three.js

The website contains various divs with classes such as "skin", "skin2", "skin3"... And each class corresponds to a different 3d model that needs to be placed. I am attempting to achieve this, but all the 3d models seem to be c ...

javascripthtmlthree.js