Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Luis Dominguez
Luis Dominguez
3,516 Points

How to use Bootstrap without it affecting my pre-existing CSS?

I'll try to keep it short. I've been developing a website, and as part of the function of the main page, I want images to scroll by on the homepage. I decided to integrate Bootstrap with my site using its carousel slider, placing the .css declaration before mine: 

<link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/respond.js"></script>
    <link href="stylesheet.css" rel="stylesheet">

However, the layout changed entirely, as shown here: http://i.imgur.com/N6IT1fw.png

I thought taking the .css away might help, so I did, which restored the original formatting, but the carousel failed: http://i.imgur.com/8g2aJws.png

Is there some way to have the .css just apply for the carousel slider? Or will I have to try to use javascript and make my own? Thanks in advance

2 Answers

Michelle Giralico
Michelle Giralico
8,328 Points
Michelle Giralico
Michelle Giralico
8,328 Points

I would start by using Chrome's developer tools to inspect the element (your carousel) to see what portion of the Bootstrap CSS is being applied to your layout and what portions of your CSS are not working. It's possible that you may be using some of the same id or class names that Bootstrap is using and they could be conflicting.

When I'm using Bootstrap, I generally start with Bootstrap CSS and only use my custom CSS where Bootstrap is not able to do what I want it to do.

Daniel Marlin
Daniel Marlin
8,128 Points
Daniel Marlin
Daniel Marlin
8,128 Points

You could always try compiling a custom build of Bootsrap which allows you to include only the features you want. In this case you would only be including the Carousel feature. This can be done from their website: http://getbootstrap.com/customize Once you have compiled this custom build you can press the "Compile and Download" button at the bottom the their webpage. Replace this new bootstrap file with the original bootstrap css you have in your document: Note: it should have the same file name (bootstrap.min.css), so make sure you add the new file to your css folder!

Hope this helps