CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Avi24
Avi24

Reputation: 13

HTML/Bootstrap - Aligning Image on corner of screen

For the fast few hours I have been trying to figure how to do this with Bootstrap and HTML. I want to align the image on the corner of the screen but it seems like it doesnt want to work my way. I don't have any CSS code so thats why I'm trying to figure out how to do it. I have tried the pull classes but they also seem to not help either.

This is the HTML

<div class="shared">
    <div class="container">
        <div class="col-md-6">
            <p>some stuff</p>
        </div>

        <div class="col-md-6">
            <img src="img/pexels-photo-325223.jpeg">
        </div>
    </div>
</div>

Here's an example of what I want, see the space on the right? I want to fill it by moving the image on the side.

EXAMPLE

I'd appreciate anyone who can help me out :)!

Upvotes: 1

Views: 2730

Answers (4)

Sahil Dhir
Sahil Dhir

Reputation: 4250

Solution 1: You can use text-right on col-md-6. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="shared">
  <div class="container">
    <div class="col-md-6">
      <p>some stuff</p>
    </div>

    <div class="col-md-6 text-right">
      <img src="https://dummyimage.com/200x400/000/fff">
    </div>
  </div>
</div>

Solution 2: You can use pull-right on col-md-6

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="shared">
  <div class="container">
    <div class="col-md-6">
      <p>some stuff</p>
    </div>

    <div class="col-md-6 pull-right">
      <img src="https://dummyimage.com/200x400/000/fff">
    </div>
  </div>
</div>

Solution 3: For the requiremnt add a class nopadding + text-right and a line of custom css to achieve your result.

.shared .nopadding{ padding:0px !important}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="shared ">
  <div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <p>some stuff</p>
    </div>

    <div class="col-xs-6 nopadding text-right">
      <img src="https://dummyimage.com/200x400/000/fff">
    </div>
    </div>
    
  </div>
</div>

Upvotes: 2

Ramesh S
Ramesh S

Reputation: 804

<div class="shared">
        <div class="container">
            <div class="col-md-6">
                <p>some stuff</p>
            </div>

            <div class="col-md-6 pull-right">
                <img src="img/pexels-photo-325223.jpeg">
            </div>
        </div>
    </div>

Upvotes: 0

Tharaka Arachchige
Tharaka Arachchige

Reputation: 807

Use pull-right class on image tag like below. 

<div class="shared">
    <div class="container">
        <div class="col-md-6">
            <p>some stuff</p>
        </div>

        <div class="col-md-6">
            <img class="pull-right" src="img/pexels-photo-325223.jpeg">
        </div>
    </div>
</div>

This will push your image to the right.

Think this will help you.

Upvotes: 0

Brandon Taylor
Brandon Taylor

Reputation: 34553

First, you need a .row around your columns:

<div class="shared">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>some stuff</p>
      </div>

      <div class="col-md-6">
        <img src="img/pexels-photo-325223.jpeg">
      </div>
    </div>
  </div>
</div>

Next, you need to either set the image as inline-block and text-align the column right, or set the image to display block and float right.

If you can only use Bootstrap's built-in rules, set class="pull-right" on the image.

Upvotes: 0

Related Questions