CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CorayThan
CorayThan

Reputation: 17835

bootstrap well squishing content to left

Using twitter bootstrap, I'm trying to float some .well divs inside a modal box, but it's giving me all kinds of headaches.

Basically, I want each well to contain two things, some text on the left, and an image on the right. I want those two in the same row. Then, I want the wells floating next to each other.

Unfortunately, I can't get the content of the well to work correctly. The text always gets squished to the left, and the image is also to the left, and the entire right side is empty.

Here's my css:

<div class="modal-body">
    <div class="row-fluid">
        <div class="span4 oneBook">
           <div class="well">
            <div class="row">
                <div class="span2">
                    <p><strong>Book Title</strong>: Claw of the Conciliator<br>
                    <strong>Author:</strong>: Gene Wolfe<br>
                </div>  
                <div class="offset3">
                    <img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/>
                </div>
            </div>
           </div>
       </div>
    </div>
</div>

The div with the class oneBook would be repeated multiple times for however many books I want to display in the modal.

Does anyone have any suggestions to get this to work?

Upvotes: 0

Views: 375

Answers (1)

Abdul Malik
Abdul Malik

Reputation: 2642

<div class="offset3 span3"><img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/></div>

Upvotes: 1

Related Questions