What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

I'm having trouble getting the float classes to work on my Bootstrap cards. Specifically, I want to float a card-img left and the card-body right using Bootstrap cards, but it's not behaving as expected. Can someone provide some insight into what may be going wrong, please?

<div class="container">
        <div class="row row-eq-height">
            <div class="col">

                <div class="card" style="">
                  <img class="card-img-top" style="width: 33%; float: left;" src="img/myimg.jpg" ">
                  <div class="card-img-caption">caption here</div>

                  <div class="card-body float-xl-right">
                    <h5 class="card-title">Title here</h5>
                    <p>By A Person</p>
                    <p class="card-text">When in the course of human events...</p>
                    <a href="#" class="btn btn-primary">Link</a>
                  </div>
                </div>
            </div>

        </div>
</div>
cssbootstrap-4

Answer №1

Have you configured your xl breakpoint to 1280? If so, you can simply apply the flex-xl-row class to the card element and wrap the image and caption inside a div to keep them together:

<div class="card flex-xl-row">
  <div>
    <img class="card-img-top" src="img/myimg.jpg">
    <div class="card-img-caption">caption here</div>
  </div>

  <div class="card-body">
    <h5 class="card-title">Title here</h5>
    <p>By A Person</p>
    <p class="card-text">When in the course of human events...</p>
    <a href="#" class="btn btn-primary">Link</a>
  </div>
</div>

Answer №2

The issue was related to the utilization of the .card class with a display property set to flex. After removing that, I was able to successfully float the content either left or right.

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

Design featuring a fixed top row and a scrollable bottom row

I need to divide a div container into two vertical sections, one occupying 60% of the space and the other 40%. The top div (60%) should always be visible, while the bottom div (40%) should be scrollable if it exceeds its limit. I have tried different app ...

htmlcssjquery-mobile

Steps for creating a horizontally scrollable bootstrap column

I need to create a horizontal scroll for the .right-col without wrapping the float-div elements. <main class="container-fluid"> <div class="row"> <div class="col-auto left-col"> This ...

bootstrap-4horizontal-scrolling

Exploring CSS Shapes: Unveiling the secrets behind the star. What's the mechanism at

https://i.stack.imgur.com/0BgQr.png Take a look at the code snippet below showcasing The Shapes of CSS. I'm interested in delving into the intricacies of these CSS properties. How exactly do shapes in CSS function? This includes pseudo CSS, borders, ...

htmlcsscss-shapes

Gulp does not generate any files

Hey there, I'm brand new to using node.js and coding in general. I recently attempted to convert SCSS to CSS using gulp. My gulpfile.js seems to be correct, but when I try running "gulp styles" in the node.js command prompt, I receive the following ou ...

javascriptcssnode.jssassgulp

The mobile version of my website's home page is not displaying certain elements of the featured image

I'm in the process of launching a fresh new blog with Flask as the backend. Currently, I'm using a Bootstrap template and have set an image as the featured image. While it displays properly on computers, tablets crop it out. You can check out the ...

htmlcssflaskbootstrap-4web-deployment

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it: var body = document.querySelector('body'); var div = document.createElement('div'); div.style.borderRadius = '50%'; div.style.border = '1px s ...

javascripthtmlcss

Tips for creating a rounded bottom for your header

Is it possible to create a rounded header similar to this one? https://i.stack.imgur.com/aYQbA.png ...

htmlcsscss-shapes

Difficulty in accurately identifying the current page on the appbar

I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in ...

cssreactjsreact-routermaterial-ui

Having trouble with CSS media queries not functioning properly on Internet Explorer version 9?

Incorporated media queries in my design to adjust the width of certain elements on the page according to the browser's width. These are the queries I am using: @media screen and (min-width:1024px) @media screen and (max-width:1024px) Chrome, Safari, ...

cssinternet-explorermedia-queries

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

https://i.stack.imgur.com/kEAKC.png https://i.stack.imgur.com/03tHg.png After examining the two images above, it appears that the CSS is not functioning properly when I try to append the same HTML code using JavaScript. Below is the snippet of my HTML co ...

javascriptjqueryhtmlcssstyles

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

htmlcssbootstrap-4fluid-layout

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Issue with sizing and panning when using a combination of Three.js and CSS3Renderer

This issue is specific to Chrome. Here's what I have experimented with: I am utilizing the webGL renderer to position a plane geometry in a 3D environment using threejs. This particular code is running within a class, with the scene as one of its me ...

javascriptcssgoogle-chromethree.js

Challenger arises in the realm of Chakra UI styling

Recently, I've encountered an issue with displaying a card using chakra UI and next js. The CSS of chakra UI seems to be messed up, causing all my components to display incorrectly. It was working perfectly fine until yesterday. I tried deleting the . ...

cssnext.jsfrontendchakra-ui

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

jqueryhtmlcss

Step-by-step guide to showing a div upon clicking an element using jQuery

I am facing a challenge with an invisible div that I need to make visible upon clicking an element. However, my current approach does not seem to be working. Can you help me figure out what I am missing? I attempted to target <a class=".demo"> using ...

jqueryhtmlcss

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

cssreactjswebpackimportbabeljs

The color of the sidebar navigation elements remains consistent

Here is the HTML code snippet that I am currently working with: <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar" data-ng-controller="NavbarController"> <li class="nav-item" ...

htmlcsstwitter-bootstrap

A guide to customizing the appearance of Textfield labels in Material-UI using React

Can someone assist me with changing the label color in Material-UI from grey to black? I am new to Material-UI and struggling to figure it out. Below is the code snippet: import React from "react"; import ReactDOM from "react-dom"; import { TextField, Bu ...

javascripthtmlcssreactjsmaterial-ui

Dynamic content in CSS horizontal alignment

In a parent div with fixed width, I have dynamically created divs that I want to distribute horizontally without knowing the exact number of elements. I tried using the "Using inline-block and justified text" technique from a CSS Tricks page but it did not ...

htmlcssalignment