Issue with Bootstrap 4 jumbotron columns ordering using order-xs- class

I am trying to create a Bootstrap 4 jumbotron with two columns, where the second column appears first on small screens. Below is my code snippet, but it's not working as expected. Can anyone spot what I'm doing wrong?

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-xs-2">
                <h1>Welcome</h1>
                <p class="lead">This is my site</p>
                <p><a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Login &raquo;</a></p>
            </div>
            <div class="col-md-4 order-xs-1">
                This should be the first column on small screens
            </div>
         </div>
    </div>
</div>
csstwitter-bootstrapbootstrap-4

Answer №1

Check out the migration section in the documentation. The use of -xs infix has been removed in Bootstrap 4

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-2 order-md-1">
                <h1>Welcome</h1>
                <p class="lead">This is my website</p>
                <p><a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Login &raquo;</a></p>
            </div>
            <div class="col-md-4 order-1">
                This column takes precedence on smaller screens
            </div>
         </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 process by which the browser displays pseudo-element selectors?

One thing that's been on my mind is the potential resource cost of using *:after. Would the pseudo element be the primary selector, or would all elements still be processed by the client? In simpler terms, what impact does *:after have compared to ju ...

csscss-selectorspseudo-elementcss-content

In order to ensure accuracy, the 'to' date must always be after the '

By default, when selecting a start date, the end date should be displayed as greater than the start date. However, in my current code, if I select the start date, the end date is set to be the same as the start date. Below is my code snippet. Thank you in ...

javascriptjquerybootstrap-4datepicker

Padding beneath font only seen in Apple devices

My horizontal navigation bar and footer appear perfectly on my PC, but when I tested it on a Mac, the font seemed to be raised about 30px above its intended position in the navigation bar. After attempting various CSS resets and adjustments to the line-he ...

macoscssfontsbaseline

Deploying a React application to Heroku or GitHub pages can sometimes alter the appearance of styles and CSS

As a newbie to coding, I've managed to create multiple full-stack apps, but I've encountered a frustrating issue each time I deploy them to Heroku or GitHub Pages. Every element on the page seems to shrink in size compared to what it was on my lo ...

cssreactjsgithubherokuresponsive

Trouble with Bootstrap CSS buttons: color consistency problem persists

I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...

htmlcsstwitter-bootstrapbootstrap-4

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

cssreactjsmaterial-ui

Tips for personalizing PNG images within an SVG element

Looking to update the color of a PNG image within an SVG tag. The PNG images I have are transparent, and I want to customize their colors based on user selections. How can this be achieved? Is there anyone out there who can assist me? <HoodieSvg ...

cssreactjssvgpng

Hero image with CSS animation type that blocks or is blocking, enhanced with a JavaScript effect

Hello fellow UX Designer who is learning to code! Please excuse any mistakes in my code. I have a CSS animated text overlay on top of a Hero Image with a JS effect applied to it. Initially, I had trouble getting both images to display correctly. Either t ...

javascriptjqueryhtmlcss

Bootstrap grid for thumbnails

I am attempting to create a responsive grid with thumbnails using Bootstrap and Knockout. Here is the current HTML code: <div class="row"> <!-- ko if: toys().length == 0 --> <div>No toys in category</div> <!-- /ko -- ...

htmlcsstwitter-bootstrapknockout.js

What is the method for creating a beveled text effect using CSS?

Is there a CSS-only method to achieve a beveled text effect? https://i.sstatic.net/s4Wlw.png Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font ...

css

Effect of Active or Focus on the HTML <ul> element

Check out this example of a UL tag: <ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;"> <li>I am waiting </li> <li>I am waiting </li> <li>I am waiting </li> <li>I am wa ...

javascripthtmlcss

Is there a way to ensure that my off-screen menu functions properly across all web browsers?

I am in the process of developing a website for my school project and everything has been going smoothly so far. However, I encountered an issue when trying to open the site on different web browsers. The off-screen menu that I created using HTML/CSS seems ...

htmlcss

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

cssresponsive-designbootstrap-5borderpseudo-element

Verify the position of the scrollbar without triggering any reflow

Here is a function I have: is_bottom: function() { if (settings.scrollBottomOffset === -1) { return false; } else { var scroll_height, scroll_top, height; scroll_height = ...

javascripthtmlcssperformance

What to do when IE6/IE7 margins disappear after moving a relatively positioned floated div using jQuery's .hover()?

Sharing my code with you: http://jsbin.com/uhera3/edit Encountered an issue where the relatively positioned floated divs move to the left in IE7 when using jQuery's .hover() function. Any insights on how to resolve this problem? ...

jqueryhtmlcssinternet-explorer-7internet-explorer-6

Center a list-group with text and dropdown using Bootstrap 4 vertical alignment

I am relatively new to using Bootstrap 4 and I am encountering challenges in vertically aligning certain elements within a list-group. Specifically, I have text on the left side and a dropdown on the right. <div class="dashboard-blocks"> <ul cl ...

htmlcssbootstrap-4

What is the best way to arrange flex-column children from left to right?

I'm looking to arrange flex items from left to right within a flex-column layout. The Current Setup How I Want It to Look This is my code: display:flex; flex-direction: column; align-items:flex-end; justify-content: flex-start; align-content: flex- ...

htmlcssflexbox

What's causing my Bootstrap cards to overlap on smaller screens?

When using 3 bootstrap cards in the following code, they are perfectly displayed side by side on large screens. However, on medium screens, the cards overlap, and on small screens, they completely overlap. I tried adjusting the class="col-lg-4 col-md- ...

htmlcssbootstrap-5

A guide to incorporating external CSS files in Angular 5 components using styleUrls

I have a unique setup where my Angular 5 application resides in a subdirectory within another parent application. The parent application consists of JSP and other AngularJS applications among other things. My goal is to include a CSS file from the parent ...

javascriptcssangularangular-cliangular-components

Styling in media queries can override the styles of its parent element without

Here's the fiddle I've been working on: http://jsfiddle.net/9vu64/ Everything was functioning smoothly with my dummy site queries, until I added the following code snippet below. In the fiddle, it seems that #header is adjusting its width based ...

csshtmlmedia-queries