Warm tip: This article is reproduced from stackoverflow.com, please click
bootstrap-4 css html

Image in bootstrap card not on the right place when on phone

发布于 2020-03-27 10:25:49

I have an image in a bootstrap card in the second col. Everything looks fine on desktop but when im switching to phone i don't like how its looking.

<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 looks like this when viewed on phone and dekstop: https://imgur.com/a/9afhvil

can someone help me with this?

Questioner
johannes
Viewed
88
分享
Sai Manoj 2019-07-03 22:55

For responsive you need to use col-sm , col-md, col-lg, col-xl. You can refer through w3schools for Bootstrap grid

<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">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-sm-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>
Sai Manoj 2019-07-04 10:21:10

@johannes Glad that I could help you. Please upvote and accept my answer if you feel that was helpful. Happy coding :)

Related issues

1
CSS: background image on background color
2
Create loading messages that will change based on loading time of plot in a shiny app
3
CSS selector of inner elements
4
Hiding the background in an iframe that belongs to a different domain with css
5
How to define a font size that scales with browser zoom level?
6
rounded-borders
7
p tag within a div affecting the adjacent div's position
8
Dropdown Nav Menu Appears on Right and Stacked Horizontally
9
Why is my getting cut off when resizing window?
10
How to get bootstrap to take whole screen