CODEWITHSUNDEEP
twitter-bootstrap
dovid
dovid

Reputation: 6462

bootstrap basic layout: image in left of content div

I'm now starting with Botsraf. I have a basic layout the following content:

<div class="jumbotron">
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" />
  <div>
      <h1>a title</h1>
      <p class="lead">
          a sub title, sub title, sub title....
      </p>
    </div>
</div>

live example: http://www.bootply.com/DSuDe10sGW

i want the image float in left, and the title & sub title in right. ant the height jumbotron div fit the picture (or the div content, the highest). like:

|      |  title
| img  |  sub title.. sub title.. sub title..
|      |  sub title..

like this qustion The basic style for make this layot but in right way using bootstarp.

Upvotes: 0

Views: 44

Answers (2)

brduca
brduca

Reputation: 3623

In bootstrap it's called media defaults http://getbootstrap.com/components/#media-default

Your code is going to be something like: 

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Upvotes: 1

sheshadri
sheshadri

Reputation: 1217

add this DEMO

<div style="margin-left: 325px;margin-top: -179px;">

This full code

  <div class="jumbotron">
          <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg">
          <div style="margin-left: 325px;margin-top: -179px;">
              <h1>a title</h1>
              <p class="lead">
                  a sub title, sub title, sub title....
              </p>
            </div>
        </div>

Upvotes: 1

Related Questions