-2

I have a very old working page which I don't want to change/upgrade at all. I need to add Bootstrap 3 because I've added a popup modal but Bootstrap default CSS reset/re-styling is changing the old page so it looks awful.

Is there any simple way to prevent Bootstrap CSS changing my page by default?

I know I can add a modal without bootstrap, but I've the bootstrap modal already written and working on another page of the same website so I would like to use the same code.

Cœur
  • 37,241
  • 25
  • 195
  • 267
user3781074
  • 41
  • 8

1 Answers1

0

A great solution to prevent overwriting is to go to this page and select the components you just want to use. This will prevent you from bringing over unnecessary code you don't need and hopefully, it will prevent it from overwriting your css. Make sure you add all your css files after bootstrap is called. Also, you could add a css reset at the beginning of your css file. Then style accordingly and add important tags.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
Zachary
  • 300
  • 3
  • 11
  • I've already tried selecting "modals" only and is still changing my page behaivor when I add bootstrap.css – user3781074 Apr 05 '19 at 15:02
  • Are you transferring over the whole css file? If not you may have other elements under the same class? @user3781074 – Zachary Apr 05 '19 at 15:05
  • What to you mean with "transferring"? The issue is noticeable just after adding bootstrap css file without any other code (I mean, before adding the modal code). – user3781074 Apr 05 '19 at 15:12
  • What I mean by that is you probably just want to grab the modal element styles without taking everything else with it. I am guessing that is your goal? Here is someone with a similar problem: https://stackoverflow.com/questions/17088160/using-just-bootstrap-modal This will show you how to just get the modal without any other components. @user3781074 – Zachary Apr 05 '19 at 15:17
  • that may be a nice solution. I will try it out. – user3781074 Apr 05 '19 at 15:21