CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
questionasker
questionasker

Reputation: 2697

html - DIV overlapping each other using Bootstrap

Using bootstrap, i create 6 thumbnails in one screen where every single line only contain maximum 3 thumbnails. Everything is okay, but when browser resized, then the thumbnail become overlapping each other.

The Code:

<div class="row">
    <div class="col-lg-12">
        <div class="ui-widget">
            <div class="main_content">
                <div class="col-sm-4>
                    <!-- 1st thumb -->
                    <div id="video1.mp4" class="thumbnail" style="height:205px;width:337px;background-image:url('http://localhost/myapps/uploads/thumb/thumb1.jpg')">
                        <div style="position: absolute;bottom:40%;left:40%;" onclick="loadModal();">
                            <div class="thumb_text" style="z-index:1; position:relative;"></div>
                        </div>
                    </div>
                    <!-- 2nd thumb -->
                    <div id="video2.mp4" class="thumbnail" style="height:205px;width:337px;background-image:url('http://localhost/myapps/uploads/thumb/thumb2.jpg')">
                        <div style="position: absolute;bottom:40%;left:40%;" onclick="loadModal();">
                            <div class="thumb_text" style="z-index:1; position:relative;"></div>
                        </div>
                    </div>
                    <!-- 3rd thumb -->
                    <div id="video3.mp4" class="thumbnail" style="height:205px;width:337px;background-image:url('http://localhost/myapps/uploads/thumb/thumb3.jpg')">
                        <div style="position: absolute;bottom:40%;left:40%;" onclick="loadModal();">
                            <div class="thumb_text" style="z-index:1; position:relative;"></div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</div>

Upvotes: 1

Views: 1085

Answers (2)

Sarower Jahan
Sarower Jahan

Reputation: 1495

First of all, you didn't follow bootstrap default grid system. But I don't know why you make it fixed with. I have a solution. Use this css code below. It may help you.

.thumbnail{
     max-width:calc(33.33% - 10px);
     margin:0 5px;
}

Upvotes: 0

Bmd
Bmd

Reputation: 1318

At least part of the problem is that you've given your divs explicit widths (style="width:337px;"). That means that if your window is smaller than 1011px (3 x 337px), there's no way for them to fit next to each other and still fit in the row.

Another issue is that you're also using the bootstrap classes incorrectly; If you want 3 equal-width columns with 1 thumbnail in each, then you should put each in its own col-sm-4 container as seen in this w3schools example (http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp)

You also need to put bootstrap col- classes in a row like this:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

I see you have a row at the very top of your HTML snippet, but you'll need a new row for each set of columns. Right now it's a little hard for me to see what the rest of your code will do without the CSS for your ui-widget and main_content classes, but if you take the inline styles out of your HTML and clean up your bootstrap structure, that should get you started and fix most of your issues. If you're still having trouble after that, you can come back and edit your question with your new code.

Upvotes: 4

Related Questions