CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NaDa
NaDa

Reputation: 15

Bootstrap 3 div display block

Wanted to build something like this: http://s29.postimg.org/n2me4y65z/img.png

<div class="row">
    <div class="col-md-12">
        <div class="col-md-6">

        </div>
        <div class="col-md-6">
            ...
        </div>
        <img src="test.png" class="img-responsive"/>
    </div>
</div>

issue 1 Cause the div2 stay below the div 1. (display: block does not work)

issue 2 Make the image always stay on the right side. (then disappearing "hidden-xs")

If someone is able to help ;/

Upvotes: 0

Views: 32645

Answers (3)

tkymtk
tkymtk

Reputation: 2705

How about using Media object or Media list if it fits your case?

<div class="media">
  <a class="pull-right" href="#">
    <img class="media-object hidden-xs" src="//placehold.it/200x150" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
Aliquam in felis sit amet augue.
  </div>
   <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
Aliquam in felis sit amet augue.
  </div>
</div>

Bootstrap3 - Media object

You can play around with this sample here: http://bootply.com/101967

Upvotes: 1

anyaelise
anyaelise

Reputation: 92

You don't need the outer div with the full width, Bootstrap automatically assumes a 12-column layout. Just make sure you're enclosing everything within a div with a class of "container". You can set the positioning using floats.

<div class="container">
    <div class="row">                          
        <div id="div1" class="col-md-8" style="{float:left;}">
            Div 1 Text
        </div>
        <div id="div2" class="col-md-4" style="{float:right;}">
            <img src="test.png" class="img-responsive"/>
        </div>
        <div id="div3" class="col-md-8" style="{float:left;}">
            Div 2 Text
        </div>
    </div>
</div>

Upvotes: 1

Dmitry Astrikov
Dmitry Astrikov

Reputation: 657

<div class="row">
   <div class="col-md-8">
        <div>Div 1 text</div>
        <div>Div 2 text</div>
   </div>
   <div class="col-md-4">
        <img src="test.png" class="img-responsive"/>
   </div>
</div>

Add the bootstrap's affix or responsive-helpers to your image if you need to pin it on scroll on hide on small -resolution devices.

Upvotes: 1

Related Questions