0

I'm adding a new page to a current site - with php. I decided that the best solution, for this new page, was to add bootstrap, for column capability.

The issue stems from accessing both the original style sheet AND the bootstrap.min.css // the original style sheet is overridden.

What is the best way to keep the original styles, while integrating the capabilities of bootstrap?

Essentially, I don't want bootstrap to replace the original style sheet - just enhance it.

daniula
  • 6,898
  • 4
  • 32
  • 49
johnmisgood
  • 1
  • Linking to bootstrap.min.css before your existing stylesheet may help (essentially, watching the order in which they're loaded). Unfortunately, there's no great way I can think of for integrating Bootstrap into an existing set of styles - Bootstrap is a framework meant for sites to be built off of, and not added in later down the road. – Serlite Jul 24 '14 at 21:11
  • Oh, though you may want to look into http://getbootstrap.com/customize/. If you're getting a lot of conflicts between selectors, it can be handy to remove all unneeded components from the Bootstrap CSS. – Serlite Jul 24 '14 at 21:23
  • Thank you very much! i appreciate you clarifying the use of bootstrap - perhaps there's a better option for using columns versus bootstrap? I'm going to try reversing the style sheet loading and see what happens. Thank you! – johnmisgood Jul 28 '14 at 14:21
  • In your opinion, is there a better option for columns than bootstrap? The page is: thehockeymommy.com/partners.php – johnmisgood Aug 04 '14 at 14:08
  • Well, you could look at http://codecondo.com/minimal-css-frameworks-grid-systems/ for some ideas. Alternatively, you could write your own grid system - it may take longer to get started on that, but you'll have full control and minimal bloat in your CSS. (And you'll probably learn some useful CSS tricks to help in the future.) – Serlite Aug 04 '14 at 18:00

1 Answers1

0

By the sounds of it you are importing the bootstrap css after you have imported your original style sheet.

Browsers pay attention to the order in which stylesheets are loaded. In your document head you probably have something like this

<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href"/bootstrap.min.css">

Because you are importing the bootstrap css after your style.css. it's over riding anything which you may already have styled.

For example

You may have this in your style.css

p{
color:red;
}

And this in bootstrap.min.css

p{
color:blue;
}

The end result would mean your paragraphs will all be blue, and not red as you defined.

There is other factors which could come into play such as how targeted your css is or the use of !important but I don't think that's your problem.

You'll find a similar question here was answered as well

Community
  • 1
  • 1
robobobobo
  • 739
  • 1
  • 9
  • 19