CODEWITHSUNDEEP
twitter-bootstrapcss
Elaine Byene
Elaine Byene

Reputation: 4142

Place image at the bottom of the DIV

DEMO: https://jsfiddle.net/sbxbeqfy/

I'm creating a layout which has text on the left and an image to the right. I have to place the image to the bottom of the div at all screens. I tried using position: absolute and also vertical-align: bottom but that didn't help. I tried various methods too but that didn't help. How should I proceed?

By default, the image is placed at the top of the div :(

<div class="App">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                    <h1>Welcome</h1>
                    <h2>This is the best and there's been no better measure.</h2>
                    <br />
                    <h2>Available on Play Store</h2>
                    <form>
                    <input type="number" class="mobile" />
                    </form>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
                <div class="col-md-4 col-sm-5 mobile">
                    <img src="http://placehold.it/640x480" class="img-responsive">
                </div>
            </div>
        </div>
    </div>
    <div class="NextApp">
        <div class="conainer">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                  The image above is to touch the top of this div in any screen size
                </div>
            </div>
        </div>
    </div>

CSS:

.App {
  padding: 15px 0;
}
.mobile {
  bottom: 0px;
}
.NextApp {
  background-color: #eee;
  padding: 50px 0;
}

Upvotes: 0

Views: 47

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

You can use display: flex on the parent row (added a new class, .specialRow), and align-self: flex-end on .mobile to put it at the bottom.

.App {
  padding: 15px 0;
}

.NextApp {
  background-color: #eee;
  padding: 50px 0;
}

.specialRow {
  display: flex;
}

.mobile {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .specialRow {
    flex-direction: column;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="App">
  <div class="container">
    <div class="row specialRow">
      <div class="col-md-8 col-sm-7">
        <h1>Welcome</h1>
        <h2>This is the best and there's been no better measure. This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.</h2>
        <br />
        <h2>Available on Play Store</h2>
        <form>
          <input type="number" class="mobile" />
        </form>
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
      <div class="col-md-4 col-sm-5 mobile">
        <img src="http://placehold.it/640x480" class="img-responsive">
      </div>
    </div>
  </div>
</div>
<div class="NextApp">
  <div class="conainer">
    <div class="row">
      <div class="col-md-8 col-sm-7">
        The image above is to touch the top of this div in any screen size
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Patrick Mlr
Patrick Mlr

Reputation: 2965

You could use display: flex (parent) and align-self: flex-end (children). I've added a media query for the mobile view and a new class called imageBottom.

See this snippet:

.App {
  padding: 15px 0;
}

.NextApp {
  background-color: #eee;
  padding: 50px 0;
}

.imageBottom {
  display: flex;
}

.mobile {
  align-self: flex-end;
}

@media (max-width: 755px) { 
  .imageBottom {
    display: block;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="App">
  <div class="container">
    <div class="row imageBottom">
      <div class="col-md-8 col-sm-7">
        <h1>Welcome</h1>
        <h2>This is the best and there's been no better measure. This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.</h2>
        <br />
        <h2>Available on Play Store</h2>
        <form>
          <input type="number" class="mobile" />
        </form>
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
      <div class="col-md-4 col-sm-5 mobile">
        <img src="http://placehold.it/640x480" class="img-responsive">
      </div>
    </div>
  </div>
</div>
<div class="NextApp">
  <div class="conainer">
    <div class="row">
      <div class="col-md-8 col-sm-7">
        The image above is to touch the top of this div in any screen size
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions