CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5
Summon G.
Summon G.

Reputation: 51

Why can't I fix my image to the left side of my bootstrap website?

I have tried using ml-auto class, float: left, the float-left class, and fixed-left class, but none of those have worked in fixing my image to the left. I don't want to use margin since that's not responsive on different sizes(some white-space is present there most of the time). I have looked at other people who had the same question, but the answers to those were just the owner having a typing mistake, and after looking through mine, I haven't found any.

Please leave an explanation or a link so I can learn which of these methods to use to push my image to the right and which is more suitable for different situations. Here's my JSfiddle, this includes all of my HTML and CSS.

https://jsfiddle.net/1kdtjmh8/

Here is the code for the image I'm having issues with

 <div class="container">
            <div class="row">
                <div class="col-lg img-col">
                    <img class="img-fluid home-image ml-auto" src="HomeImage.jpg" alt="">
                </div>

Here is the CSS

.home-image{
    height: 100vh!important;
    width: auto!important;
    display: block;
    float:left;   
}

Upvotes: 0

Views: 582

Answers (2)

nimish
nimish

Reputation: 167

Please go through below codepen.io URL you will find the working solutions for your query.

It can resolved with two resolutions:-

  1. By making the container class to container-fluid and keep all the css and html as it is.
  2. Visit this Link:- https://codepen.io/nimesh049/pen/NWjaxaY

.userImage{
    height: 150px!important;
    width: auto!important;
    float:right; 
}
<div class="container">
  <div class="row">
    <h1>Image Holder</h1>
    <div class="col-lg img-col">
      <img class="d-block userImage " src="https://www.pngfind.com/pngs/m/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.png" alt="" />
    </div>

Upvotes: 0

Joy Dey
Joy Dey

Reputation: 593

You are using container which has a max width of 1140px which is creating the space. you can replace that with container-fluid and this should solve the issue

Upvotes: 1

Related Questions