CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Adam Jachocki
Adam Jachocki

Reputation: 2125

Bootstrap image on right with max width

I want my image to be right-aligned. So I did this:

.section {
    margin-bottom: var(--double-margin);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
<div class="container">
    <div class="section">
        <div class="row">
            <div class="col">
                <img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.jpg"/>
           </div>          

           <div class="col">
               <p>So other text</p>
           </div>
       </div>
    </div>
</div>

As the result, my image went on the left (because of w-50). So how to tell my image that it should be 50% width and aligned to right?

Upvotes: 0

Views: 202

Answers (1)

Vladislav Akhmetvaliyev
Vladislav Akhmetvaliyev

Reputation: 755

Here is your example and it works fine. You either need to add a reproducible example of your problem or find the difference between your code and my example. I can guess that for some reason your .col does not grow to 100% of the width that's why the image is aligned to the right side of the smaller container and for you, it looks like it's aligned to left.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
    <img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.png"/>
</div>

Upvotes: 1

Related Questions