Tips for adjusting image placement in cell or xs mode using bootstrap 4

Hope you're doing well. I have a specific requirement where I need the image to be displayed to the right of the title when switching to cellular xs mode. For instance, the title should take up col-xs-9 and the image should take up col-xs-3. In the past, I achieved this in Bootstrap 3 with the following solution:

<div class="col-xs-4 col-sm-3 pull-right col-md-12">
   <img src="...." alt="" class="img-responsive" style="max-width:100px;" />
<div>

<header class="col-xs-8 col-sm-9 col-md-12">
        <a href="#">
            <h2>Title</h2>
        </a>
</header>

The solution provided was using the pull-right class.

However, in Bootstrap 4, I've tried using float-right and float-sm-right instead of pull-right, but it doesn't seem to work. Is there a way to fix this issue? Are there any examples available?

Below are examples of how I want the image to be displayed in relation to the text:

Image in standard mode or on a big screen:

https://i.sstatic.net/u2iQs.png

Image in xs mode or on a cellular device:

https://i.sstatic.net/hMWR8.png

htmlcssbootstrap-4styles

Answer №1

I have taken the time to replicate your scenario in both versions, utilizing the order keyword to arrange the cells in the row.

Firstly, let's take a look at version 3:

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


<div class="col-xs-9 pull-right col-sm-12">
  <img src="https://placehold.it/200x200" alt="" class="img-responsive" style="max-width:100px;" />
</div>

<header class="col-xs-3 col-sm-12">
  <a href="#">
    <h2>Title</h2>
  </a>
</header>

Next, let's examine version 4:

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


<div class="container">
  <div class="row">
    <div class="col-9 order-2">
      <img src="https://placehold.it/200x200" alt="" class="img-responsive" style="max-width:100px;" />
    </div>

    <header class="col-3 order-1">
      <a href="#">
        <h2>Title</h2>
      </a>
    </header>
  </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

Unable to adjust the canvas size or scale using Fabric.js

Is there a way to display a large canvas as a smaller one for better user interaction without compromising the size of the uploaded canvas later on? I'm currently working with Fabric.js and exploring the Canvas CSS trick that involves setting the widt ...

htmlcanvasfabricjs

Issuing a straightforward GET request results in a significant delay in receiving a response

I have a simple app running on Node.js, Handlebars, and Express. The main page features a single button that triggers an asynchronous GET request when clicked, causing a console.log message to display. Initially, the first click on the Submit button shows ...

javascripthtmlnode.jsexpressasynchronous

What is the best way to align the bottom of an element with the browser buttons panel on mobile devices?

When viewing the website on a mobile device, I noticed that the floating button is hidden behind the browser buttons panel. Is there a way to adjust the positioning of the element relative to the browser's buttons panel? I attempted using env(safe-ar ...

htmlcssmobile

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

htmlcsslistcss-floathtml-lists

Issues with ellipses not functioning properly have been identified specifically on Safari when using the line

Currently, I am using the line-clamp feature to restrict the titles on a blog to only two lines at most. This functionality works perfectly fine on Firefox and Chrome browsers; however, when it comes to Safari, the ellipsis appears in the middle of the sen ...

csssafari

Switching between Angular components with a button press

I'm looking to switch from one Angular component to another when a button is clicked. Specifically, I have two components: app and login. Upon clicking a button in `app.component.html`, I want to navigate to `login.component.html`. Here's what I& ...

htmlangularbootstrap-4

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

Inconsistencies in spacing between shapes bordering an SVG Circle using D3.js are not consistent across platforms

After creating a SVG circle and surrounding it with rectangles, I am now attempting to draw a group of 2 rectangles. The alignment of the rectangle combo can either be center-facing or outside-facing, depending on the height of the rectangle. However, I am ...

javascripthtmlcssd3.jssvg

Background image specifically for the Fullcalendar sun component

When setting a background image for Sunday in the month view, I noticed that the day "Sunday" in the header is also getting the same background. The CSS for the table thread has classes like .fc-sun and .fc-mon set as well, but I'm not sure how to rem ...

javascriptjquerycssfullcalendar

CSS: Problem Arising from Line Connections Between Tree Elements

I'm currently working on connecting tree nodes with lines in a drawing. I've managed to achieve it to some extent, but there are a few issues like dangling lines that I need to fix. You can find the implementation on codepen here: https://codepe ...

javascripthtmlcssvue.jssass

Nav Bar Toggle Button - Refuses to display the dropdown menus

My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...

javascripthtmlcssdjangobootstrap-4

Guide to Display Three.js Code Suggestions in an HTML Document

I've exhausted all possible options to enable Three.js intellisense, but it simply refuses to appear. I've tried every known method in the manual. What's the missing piece here? Please share your insights. <!DOCTYPE html> <h ...

htmlthree.jsintellisense

I could use some help with understanding node.js scripts, running processes, and other related tasks

I'm currently trying to run a node.js script using CMD and I keep encountering an error. Here's the code snippet that's causing the issue: var mysql = require('mysql'); var log4js = require('log4js'); var io = requi ...

phphtmlnode.js

Can you explain the conflict between using float and setting the height to 100% for divs?

Check out the following HTML code example: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> html, body { padding: 0; m ...

htmlcssheight

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading

For weeks, I've been struggling to change the name of the downloaded file. Despite my efforts, instead of being named Chrysanthemum.jpg, it ends up as a hash of the file like 241693260.jpg In my backend setup, I utilize Node.js and Express.js for man ...

javascriptnode.jshtmlexpress

Retrieving custom attribute values during a drop event in Jquery drag and drop operations

I'm currently working on a moodboard creator, but I've hit a snag while trying to transfer the values from custom attributes of an image to a new div once the drop action is completed. Every time the drop is finished, it always fetches the value ...

jqueryhtml

Is there a more efficient approach to arranging items in Plotly-Dash's checklist so that they are displayed on individual lines instead of being

Within Plotly's Dash library, I am working on creating a checklist. My goal is to have each item displayed on its own line, but I am having trouble achieving this. In the image provided below, you can see that "Delta P (PSI)" and "Horsepower" appear o ...

python-3.xbootstrap-4plotly-dash

The max-height property is not applied to a border-box div with padding

One technique we use is the percentage trick on paddings to maintain aspect ratio in a div as the user scales their window. Here's an example: .div { background: red; width: 80%; margin: 0 auto 10px; -webkit-box-sizing: border-box; ...

css

Tips for creating distinct hover descriptions for each element in an array

My dilemma may not be fully captured by the title I've chosen, but essentially, I am working with a list of names and I want each one to display a unique description when hovered over with a mouse. On the surface, this seems like a simple task, right ...

javascripthtmljquerycss

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...

htmlcsscordova