CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3091715
user3091715

Reputation: 53

Bootstrap .col-md-* error

<div class="container">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>
        <div class="sponsor">
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
       </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->


.sp {
    border: 1px solid red;
    display: inline-block;
}

.sponsor {
    text-align: center;
    border: 7px solid green;
}

.companies {
    border: 7px solid yellow;
}

Image1

Image2

As you can see from the CSS styling I the .companies class has a 7px green border, the .sponsor - a 7px yellow border. .sp has just a red border so that you can see it.

The .sp should be wrapped in a green container like in the image2 (In image2 I don't use the .col-md-4 class from bootstrap), instead it is showing like in the image1 (where I use the .col-md-4). .col-md-* or other classes from bootstrap work perfectly in other parts of the document.

Upvotes: 0

Views: 830

Answers (5)

Rahul K
Rahul K

Reputation: 928

Try this: no changes in css only two changes in HTML you can get exact output as you wish.

<div class="container">
  <div class="row">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>
        <div class="sponsor clearfix">
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
       </div>
    </div>
</div>

Upvotes: 0

user3091715
user3091715

Reputation: 53

<div class="container">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>

        <div class="sponsor">
            <div class="row">
                <div class="col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                <div class="col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                <div class="col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            </div>
        </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->

This is how it should be. Thanks to everyone for answers.

Upvotes: 1

Omri
Omri

Reputation: 94

why not do it "politically correct"?

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="companies row">
                <div class="col-md-12">
                    <div class="sponsor row">
                        <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                        <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                        <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->

Upvotes: -1

Karim AG
Karim AG

Reputation: 2193

Your problem is caused by something known as div collapsing, which means that the height of the div is reduced to Zero, the reason for that is the float of the divs with the class col-md-4, they have a float:left; style, that's why the parent is collapsing.

The solution is to clear the float after those div, so your html would be:

<div class="container">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>
        <div class="sponsor">
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <br style="clear:both;" />
       </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->

Hope this helps.

Upvotes: 1

Andrei Giurescu
Andrei Giurescu

Reputation: 1

You should increase the "companies" div size so the "sponsor" div fits in. idem for "sponsor" div for the "sp" div to fit in. That should resolve the problem with the borders.

Upvotes: 0

Related Questions