Isolated Bootstrap styles in Ionic 3

Hi all,
I want to use the bootstrap css with jquery animations for the accordion kind of thing, So I tried by adding the cdn’s of the bootstrap and jquery in the index.html like this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

and it worked for me but some how the bootstrap is effecting the Ionic grid system which I have used in other component. So is there any other way so that I can use the bootstrap only for single component in the app, may be something like by importing the bootstrap files in components scss file?