CODEWITHSUNDEEP
csstwitter-bootstrap
Juliatzin
Juliatzin

Reputation: 19695

Using Bootstrap in a WP template that doesn't use bootstrap

In my page : http://biz166.inmotionhosting.com/~cappie5/affiches/

I'm using Bootstrap.

Code for the 3 pictures : 

 <div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column"><a href="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Maurin-quina.jpg" class="group1 cboxElement"><img class=" wp-image-759 size-full aligncenter" src="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Maurin-quina.jpg" alt="Maurin quina" width="249" height="338"></a></div>
        <div class="col-md-4 column"><a href="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Thermogene.jpg" class="group1 cboxElement"><img class=" wp-image-760 size-full aligncenter" src="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Thermogene.jpg" alt="Thermogene" width="251" height="338"></a></div>
        <div class="col-md-4 column"><a href="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Klaus.jpg" class="group1 cboxElement"><img class=" wp-image-761 aligncenter" src="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Klaus-217x300.jpg" alt="Chocolat Klaus" width="244" height="338"></a></div>
</div>

The problem is content is having an overflow on the right, as you can see with the link.

When I debug css with chrome, I have see:

media (min-width: 1200px) .container { width: 1170px; }

The thing I understand is that Template has a fixed width, and content is developped with bootstrap. What can I do in this case???

Upvotes: 1

Views: 59

Answers (2)

Juliatzin
Juliatzin

Reputation: 19695

What I did is to delete css rules in boostrap.min.css

@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}

Not very elegant, but it worked... I will check the Marcelo's version tonight, it might be a better way to do it.

EDIT: The Marcelo's solution is working and more elegant.

Upvotes: 1

Marcelo
Marcelo

Reputation: 4425

Change your .container to a .container-fluid.

.containers are set to a fixed width based on the bootstrap breakpoint you are at. .container-fluids are set to 100% the width of the parent element.

HTML:

<div class="container-fluid">
  <div class="row clearfix">
    ...
  </div>
</div>

Upvotes: 1

Related Questions