Placement issue with image in Bootstrap card on mobile devices

My Bootstrap card has an image in the second column that looks great on desktop, but not so much on mobile.

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        <div class="col">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

The image is displayed differently on phone and desktop: https://i.sstatic.net/CUwSz.jpg

Can someone assist me with this issue?

htmlcssbootstrap-4

Answer №1

To create a responsive layout, you should utilize classes like col-sm, col-md, col-lg, and col-xl. For a detailed guide on the Bootstrap grid system, check out the resources provided by w3schools.

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col-sm-6">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Add your content here to populate the card.</p>
                <a href="#" class="card-link">Card Link</a>
            </div>
        </div>
        <div class="col-sm-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

Answer №2

When using bs4, if you only utilize the col class, the classes will always be adjacent to each other. It is vital to specify on which screen size you want the column to occupy a certain percentage of space.

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

In this example, I have simply adjusted the number of columns, indicating that on smaller screens the column should span 12 spaces, while on medium-sized screens and above, it should cover 50% of the screen.

For more information about bs4's grid system, consider different breakpoints like col-sm-6 depending on your design needs. The key takeaway here is learning how to effectively structure your layout with bootstrap for optimal responsiveness.

Answer №3

There have been updates with bootstrap 4. To display 2 columns on Desktop, change the class from col to col-md-6. Use col-sm-6 for 2 columns on Tablet, or col-sm-12 for 1 full-width column on the site. For full width size on Phone, use col-12.

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

Why is it that in IE9, submitting a basic form using jQuery doesn't seem to work?

Take a look at the code snippet below: <html> <head> <style type="text/css"> #myform {display:none;} </style> </head> <body> <button type="button" id="uploadbutton">Upload Images</button> <form name="myf ...

javascriptjqueryhtmlforms

Centering the NavBar

I am encountering a small issue with the justify-content-sm-center property. I am trying to center this <a class="navbar-brand" href="#">Navbar</a>, but when I attempt to center it, the toggler icon is also centered along wi ...

javascripthtmltwitter-bootstrapbootstrap-4twitter-bootstrap-3

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

The overflow hidden function does not seem to be fully functional on the iPad

Struggling to prevent body scrolling when a modal pop-up appears? I've tried setting the body overflow to hidden when opening the modal and resetting it when closing, which worked fine on desktop browsers. However, mobile devices like iPod/iPhone pose ...

javascriptjqueryhtmlcssipad

Utilizes an external CSS font file for eBay advertisement

After researching numerous answers, I am still unable to identify what I may be doing wrong. I have designed a collection of custom fonts using iconmoon, and after downloading the css and font files, I uploaded them to a directory on my website. I am attem ...

htmlcssfonts

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Quick question about utilizing Ajax with spans

<span name = "menu"> <!-- javascript here --> <!-- content loaded via ajax --> </span> <span name = "content"> <!-- content loaded via ajax --> <!-- updated by buttons from the menu--> </span> Seeking a ...

javascriptajaxhtml

External CSS file for Demandware platform

My boss was supposed to train me this year on demandaware knowledge, but ended up quitting, leaving me in the dark. I am scheduled to attend workshops later this year, but for now I am relying on Google and stackoverflow for guidance. Currently, I am wor ...

cssstylesdemandware

What is the best way to send put and delete requests through a form using node.js and express.js?

Attempting to send a put request: Put form code snippet: <form id="for" action="/people" method="post"> <div class=""> <input type="text" name="Name" value=<%= data[0].name %> > </div> ...

javascripthtmlnode.jsexpress

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

javascripthtmlangularjssemantic-ui

Modify the styling of the input file in HTML to bind it with a

My file input setup looks like this; <input type="file" id="restoreFile"> To customize the appearance, I first set display: none; and created a label for the "restoreFile" input styled as a button. When I click the label (button) ...

htmlfilevue.jsinput

Avoiding page shifting/browser resizing when the android keyboard appears

This question pertains to an HTML5/Javascript WebApp, rather than a native Android app. Is there a way to stop the browser/the DOM from adjusting my responsive content (which primarily uses vw/vh for sizes) when the android soft keyboard is activated? The ...

javascriptandroidhtml

The tag <li> is not allowing enough room for the content to expand as needed

I am trying to create a list using ul li elements. When the content inside the li exceeds the width, a scrollbar appears. However, I am encountering an issue where the li tag does not cover the entire width and spills outside. .container{ b ...

htmlcss

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

htmlcss

Use JavaScript to enclose elements that are siblings within a DIV

Can you help me convert the elements with class "a" into a div using JavaScript, while maintaining their order within their sibling elements? I've been struggling with the code below and would appreciate any assistance. const elementParent= documen ...

javascripthtmldom

Leveraging a Keyframes Definition from an External Source

Font Awesome has a special spin animation for elements that have the class fa-spin. Taking a closer look at the CSS code, you can see that the spinning effect is achieved through keyframes under the same name, fa-spin. Instead of creating a new animation ...

csswebkit-animation

Resizing anchor element using CSS

Hey there, I'm having trouble scaling my anchor tag when hovering over it. Here's the code I'm using: a { color: red; text-decoration: none; transition: all 0.5s; } a:hover { ...

htmlcssanchor

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

https://i.sstatic.net/dj4zb.png I have this image that I need to divide into three sections with a legend at the top, similar to the image shown. So far, this is the code I have, but I'm struggling with creating the vertical line, adding space betwe ...

javascripthtmlcssformsbootstrap-4

Saving Quill.js content to Laravel 5.6 Database: Step-by-step guide

For my project in Laravel, I wanted to implement Quill.js - a powerful rich text editor. However, the issue arises because Quill utilizes: <div id="editor"></div> || <div id="editor" name="body"></div> Instead of the usual: < ...

phphtmllaravellaravel-5quill

What is the best way to show hidden content within a masked div, similar to a tooltip?

In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect. The purpose of using images as masks is to allow the icons to be colored in different ways by cha ...

cssmask