Using Bootstrap selectively on an already existing website

Question

I am currently working on a website made by someone else with Wordpress and I have to add some webpages in it. I have already done all the functional parts in PHP and now I have to do the design part. For it, I want to use Bootstrap but when I linked bootstrap in the header that already exist some parts of the website change too.

I think they have some class and id names in common so I want to know if there is any method where I can use Bootstrap only for my webpages. To summary, I include the header and footer that already exist and I want to use Bootstrap on the body, is this possible?

score 0 · Answer 1 · answered Jul 22 '16 at 14:42

Link bootstrap in the header.php document:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Optionally, if you'd like the JavaScript too:

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Both of these are copied directly from the Bootstrap guide. You can now use these in your HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6"><p>Oh hey</p></div>
        <div class="col-sm-6"><p>Oh hey</p></div>
    </div>
</div>

Maybe I said it in the wrong way but when I link bootstrap with that line, the header changes too(the margin and other thing change). So I want to use Bootstrap without changing the header. — Zhang, Jul 22 '16 at 14:50

score 0 · Answer 2 · answered Jul 22 '16 at 14:51

It will be difficult to use Bootstrap only in your body because Bootstrap naturally applies its CSS to your whole webpage. You could exclude some parts of the LESS code but I doubt that you will be able to completely separate the body from the footer and header successfully. Bootstrap applies to all sorts of html tags for lists, paragraphs, headings etc.

It would maybe help if you would tell us exactly, which elements change but shouldn't.

If you just want a unified UX and don't have design specs in place you could try using one of the many WordPress themes, which have Bootstrap preinstalled.

score 0 · Answer 3 · answered Jul 22 '16 at 15:11

I know its not perfect but if you have specific url to pages where you are using boothstrap you could do this

<?php
    $uri = $_SERVER['REQUEST_URI'];
    if ( strpos($uri,'/contains-this-in-url/') !== false){
      echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">'
    }
 ?>

To explain $uri will contain the part of url that is after the domain name (www.example.com) the if statment will check if $uri contains desired part you can use === for definite path and have more checks though adding or with ||

Using Bootstrap selectively on an already existing website

3 Answers3