5

I have included a bootstrap stylesheet in a PHP-File, which I only need for one div. Problem: It should only affect this one div. To achieve that, I placed a link to another CSS before and after the bootstrap-stylesheet as you can see below. But it seems that bootstrap.css still affects some elements outside that div. How can I prevent it from doing it?

<link rel="stylesheet" href="style/style-1.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<div class="container">
...
</div>
<link rel="stylesheet" href="style-1.css" type="text/css">
Daniel Cheung
  • 4,779
  • 1
  • 30
  • 63
slurm
  • 91
  • 2
  • 11
  • 1
    You can't apply a stylesheet to a single div without modifying said stylesheet. You'd need to download it onto your server, give your div an id name, and encapsulate the stylesheet with the id of that div. – duper51 Oct 05 '14 at 17:03
  • It is simple don't use bootsrap classes and boostrap will not affect the divs – Gildas.Tambo Oct 05 '14 at 17:08
  • @duper51: you mean like that? `
    ...
    `. This still doesn't work.     – slurm Oct 05 '14 at 19:45
  • Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else – Daniel Cheung Oct 12 '14 at 11:40
  • I think what you are trying to do will *eventually* be supported by HTML5 scoped CSS: http://css-tricks.com/saving-the-day-with-scoped-css/ but at the moment, no browsers except Firefox, I think, support it. – CodingWithSpike Oct 12 '14 at 13:01
  • similar question: http://stackoverflow.com/questions/16356939/div-with-external-stylesheet – aleskva May 10 '16 at 18:30

2 Answers2

1

There is one feature in CSS called "scoped css" ... it is not well supported (Fireofx only, I believe ... and I think it's better this way)... It allows to say that a stylesheet applies only to a single element.

In your case, but I definitely do not recommend it, you could do something like :

<div class="container">
    <style scoped>
    //... copy content from bootstrap stylesheet
    </style>
</div>

See here for an example : http://css-tricks.com/saving-the-day-with-scoped-css/

or here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

Check here to know which browsers support it : http://caniuse.com/#feat=style-scoped

tsimbalar
  • 5,790
  • 6
  • 37
  • 61
  • Why don't you recommend? Your first link presents (at the bottom) a jquery plugin that adds support for browsers... – Fanky Sep 05 '16 at 12:36
0

The concept of loading a secondary CSS file after the bootstrap CSS file would be to override certain elements and create your own styles. However, since you only want to take one element from the bootstrap CSS file, you will have to override ALL the other elements if you don't want to see the bootstrap styles on your other elements. This I DON'T recommend.

My suggestion is to examine the styling for the certain element that you want to use from bootstrap and then just recreate it in your own CSS file.

Baraa
  • 1,341
  • 11
  • 8