How to retain my current css if i use bootstrap - html

Question

Hi I want to use <span class="glyphicon glyphicon-print"></span>
but to do it i need to put a bootstrap below
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
the problem is, my current table and some h1 text is changing the size or design if I put that bootstrap, what should I do? Any idea?
The resut is on this picture
With Bootstrap the icon of gly is working
but this is my default and i want the size of this table Without Bootstrap
my css is here
html {
height: 100%;
}
body{
height: 100%;
position: relative;
margin: 0;
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%);
font-family: 'Roboto', sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
}
table{
width:100%;
table-layout: auto;
}
.tbl-header{
position: relative;
background-color: rgba(255,255,255,0.3);
top: -45px;
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
background: black;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
section{
margin: 50px;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
*, *:before, *:after {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 0;
margin: 0;
}
a, a:visited, a:hover {
color: inherit;
text-decoration: none;
}
h1 {
position: relative;
top: -40px;
display: block;
margin: 0 auto 25px auto;
text-align: center;
font-size: 1.92em;
font-weight: 600;
letter-spacing: -0.055em;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 48px;
color: #03e9f4;
text-shadow: 0px 1px black;
}
h2 {
display: block;
margin: 0 auto 60px auto;
text-align: center;
font-weight: 400;
font-size: 1.25em;
letter-spacing: -0.015em;
}
.container {
position: relative;
margin: calc(75px + 2vh + 2vw) auto 0 auto;
padding: 0;
width: 100%;
max-width: 840px;
}
.search-box {
top: -40px;
position: relative;
width: 100%;
max-width: 360px;
height: 60px;
border-radius: 120px;
margin: 0 auto;
}
.search-box1 {
top: -60px;
position: relative;
width: 33%;
max-width: 300px;
height: 40px;
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
}
input[type="text"]{ padding: 10px 10px; line-height: 5px; }
.search-icon, .go-icon {
position: absolute;
top: 0;
height: 60px;
width: 86px;
line-height: 61px;
text-align: center;
}
.search-icon {
left: 0;
pointer-events: none;
font-size: 1.22em;
will-change: transform;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: center center;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.si-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.go-icon {
right: 0;
pointer-events: none;
font-size: 1.38em;
will-change: opacity;
cursor: default;
opacity: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.go-in {
opacity: 1;
pointer-events: all;
cursor: pointer;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.search-border {
display: block;
width: 100%;
max-width: 360px;
height: 60px;
}
.border {
fill: none;
stroke: #FFFFFF;
stroke-width: 5;
stroke-miterlimit: 10;
}
.border {
stroke-dasharray: 740;
stroke-dashoffset: 0;
transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-webkit-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-moz-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-o-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
}
.border-searching .border {
stroke-dasharray: 740;
stroke-dashoffset: 459;
transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-webkit-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-moz-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-o-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
}
#search {
font-family: 'Montserrat Alternates', sans-serif;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 120px;
border: none;
background: rgba(255,255,255,0);
padding: 0 68px 0 68px;
color: #FFFFFF;
font-size: 1.32em;
font-weight: 400;
letter-spacing: -0.015em;
outline: none;
color:black;
}
#search::-webkit-input-placeholder {color: #FFFFFF;}
#search::-moz-placeholder {color: #FFFFFF;}
#search:-ms-input-placeholder {color: #FFFFFF;}
#search:-moz-placeholder {color: #FFFFFF;}
#search::-moz-selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
#search::selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
.submit-btn {
display: inline-block;
float:right;
background-color: #000;
color: #fff;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
line-height: 24px;
padding: 8px 8px;
border: none;
cursor: pointer;
}
.submit-btn:hover {
text-decoration: underline;
background-color: white;
color: black;
border: solid;
border-width: 1px;
}

Answer 1

Generally speaking,
If your CSS comes after Bootstrap's, then Bootstrap is given priority and will override your CSS where possible.
If your CSS comes after Boostrap's, then in some cases, your CSS will be given priority.
Additionally, if you're planning to work with Bootstrap then being mindful of specificity moving forward can save you some headache. Plus, when all else fails and you are sure the issue is a clash between your CSS and Bootstrap then you can take a look at how that CSS rule is declared in Bootstrap CSS and that will likely give you some hint as to how to circumvent it.

Answer 2

Simple, just follow this pattern when you linked the bootstrap css and your custom css file to the head section.
Link bootstrap css first
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Then link your custom css file
<link rel="stylesheet" href="css/style.css">